я что-то похожее делал на d3 https://codepen.io/strangerintheq/pen/LYpGEjb

И не должны, в глобальной области видимости не определено свойства time, у Вас же модули, область видимости модуля остается внутри модуля.

Если очень хочется Вы можете добавить ссылку на объект в глобальный скоуп руками:

window.time = time;

Редактор тут не нужен, тут нужны кривые Безье:

2 квадратичных и 2 кубических:

<svg width="320px" height="320px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d="
    m 3 10
    c 0 4 8 4 8 0
    q 0 -2 -4 -3 
    q -4 -1 -4 -3 
    c 0 -4 8 -4 8 0
    "></path>
</svg>

или 3 кубических:

<svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d="
    m 3 10
    c 0 4 8 4 8 0
    c 0 -4 -8 -2 -8 -6 
    c 0 -4 8 -4 8 0
    "></path>
</svg>

Можно, но необходимо будет вручную пытаться определить какой же Вы объект собрались вращать.

Например можно поделить экран на 3 области, закрыть их прозрачными элементами и на них уже повесить слушатели мыши, которые будут вращать объекты.

Или, вариант 2: вешать один слушатель, но анализировать координату по X, определять в какую из третей экрана она попала при начале перетаскивания - тот объект и вращать.