Лина Литвак

Просто запушить локальный develop?

Осталось там подправить и добавить rotate.
А так думаю если часок посидеть можно сделать.

https://jsfiddle.net/3n9Loath/5/
можно вообще одним элементом и градиентом в бэкграунде развлечься, но мне лень.

Вариант 1 Сделать просто картинкой
Вариант 2 на canvas отрисовать

Например так. Можно, конечно, сделать JS более гибким, уже на Ваше усмотрение.

Способ подключения шрифта есть только один – директива @font-face в css.

подключала шрифты через линку в html-файле

Таким образом вы подключали css файл, в котором были директивы font-face.

через import в SCSS

Полагаю, подключали scss файл, в котором были директивы font-face.

В общем, технически способ только один. А как вы раскидываете свои файлы - без разницы.

плагин для компиляции sass есть во всех редакторах и ide. если ты делаешь проект для себя и только сам, то разницы нет. удобнее тебе - юзай Live SASS Copiler
НО когда дело доходит до того, что код могут писать несколько людей или после того как ты сверстал проект его может дальше допиливать другой верстальщик - тут уже будут если не проблемы, то неудобства.
Вот тут как раз gulp и помогает. т.е. человеку, который получил твою верстку - достаточно прописать npm i и он спокойно может продолжать твою работу.

А с Gulp я так понимаю нужно все время самому запускать функцию через терминал, чтобы код каждый раз компилировался?

нет. в gulp есть watch() https://gulpjs.com/docs/en/api/watch/ т.е. ты можешь создать функцию, при которой при изменении *.scss файлов он вызывал компиляцию