RAX7

str.replace(/(?:^|\s+)(\w)/g, ' .$1');

Добавь в settings.json

"emmet.preferences": {
      "filter.commentBefore": "<!-- begin [.CLASS] -->\n",
      "filter.commentAfter": "\n<!-- end [.CLASS] -->",
    },

за основу возьми слайдер из этой статьи https://medium.com/better-programming/webgl-enhanc...
и допили под собственные нужды

Держи очень упрощенный вариант, надеюсь так проще будет понять идею как это сделано

Галочку в настройках убери и будет тебе sass

Маска должна быть сплошной черной. Для этого активной маской слоя нажми shift+F5 (изображение -> выполнить заливку) и выбери заливку цветом фона. Цвет фона перед этим поставь чистый черный #000000

В иллюстраторе можно просто разомкнуть контур окружности перед экспортом/копированием

В HTML атрибутах размер канваса поправь
<canvas id="sig-canvas" width="620" height="160">

function moving() {
  var pos = 0;
  var g = setInterval(move, 10);
  var box = document.getElementById('box');
  var direction = 1;

  function move() {
    pos += 1 * direction;
    box.style.left = pos + 'px';
    if (pos >= 290 || pos <= 0) {
      direction *= -1; // меняем направление движения
    }
  }
}

var angle = app.activeDocument.selection[0].fillColor.angle;
$.writeln(angle);

У адобы есть достаточно подробная документация по скриптам:
https://www.adobe.com/devnet/illustrator/scripting.html

https://www.youtube.com/watch?v=izi0mtItHh4