Отрисовать спираль на сайте

#html #css #css3 #svg #анимация

Интересует какими  лучше способами нарисовать (анимировать само рисование спирали)
спираль Ферма на сайте? (Чтобы пользователь видел как она рисуется) Можно ли её сделать
на чистом css? 
А если я хочу анимировать её с помощью математической функции это только в js?
P.S. Прошу не давать готовых решений, а направить какими средствами её можно реализовать.


    

Ответы

Ответ 1

Спираль - это не html-элемент, поэтому и средства css для ее рисования (в смысле
- анимированного создания из ничего) в чистом виде здесь применить не получится.

Я вижу три варианта:


Один из вариантов уже описали здесь - представить что спираль это картинка, или див
с картинкой в фоне и не меняя размер фона увеличить див - фон постепенно появится полностью,
типа "отрисовался", ага ))
Второй вариант - это положить эту спираль картинкой svg - это уже логичнее, всё таки
это по сути векторный элемент, у которого внутри линия. И сделать постепенную прорисовку
линии например при помощи vivus.js
JS-рисование при помощи канвас.


Вот как-то так, выбирай )


Ответ 2

Можно так. Сделал увеличение при наведении, реально можно любое событие подвязать...



.spiral {
  display:block;
  width:10px;
  height:10px;
  background: url(https://i.stack.imgur.com/hAalo.png) no-repeat center;
  position: absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  transition: all 5s;
}

.spiral:hover{
  width:300px;
  height:300px;
  margin-left:-145px;
  margin-top:-145px;

}



Ответ 3

Вариант SVG


В векторном редакторе, например Inkscape выбираем готовый
шейп - спираль. Сохраняем файл. Нам нужна строка ...
Копируем её.    
Для анимации рисования спирали будем использовать атрибут  патча
stroke-dashoffset - отступ  от начала линии.    При максимальном
отступе равном длине линии (патча) линия не видна.   При     stroke-dashoffset="0"
линия будет прорисована полностью.

Другими словами, чтобы реализовать анимацию рисования линии нужно уменьшать отступ
от максимума до нуля. 
Находим длину линии  var len = Math.round(path.getTotalLength() );
Для нашего патча - 6265px;       









Главное преимущество svg - картинка не теряет качества при кардинальном изменении
масштаба.   

Вариант CSS

Начало анимации при наведении курсора


#spiral {
  
  stroke: dodgerblue;
  stroke-width:4;
  fill:#FCFCFC;
  stroke-dasharray: 6265;
  stroke-dashoffset: 6265;
  transition: stroke-dashoffset 10s;
}

#spiral:hover {
  stroke-dashoffset: 0;
}





Более сложный пример

Анимация движения шарика и рисование линии начинается при наведении курсора.    

begin="svg2.mouseover"


Рисование спирали реализуется аналогично первому примеру. Движение по спирали красного
шарика обеспечивает команда: 


                        
                   




   


   

Защита от повторного запуска анимации пока она полностью не завершится: 

restart="whenNotActive"