Как сделать анимацию стрелки, прямоугольника svg

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

https://cpeople.ru/portfolio/ в портфолио есть иконка svg, при наведении на которую
анимируется стрелка вместе с прямоугольником. Как такое реализовать?  







    

Ответы

Ответ 1

Доработал код иконки: 



.container {
width:30%;
height:30%;
}








Для анимации используется атрибут патча stroke-dasharray 

Вычисление длин дало результаты:   


    


Исчезновение и рисование контуров иконки 


     
     


Ниже полный код. Анимация начинается после наведения    



.container {
width:15%;
height:15%;
}







Второй вариант анимации, - сначала рисуется стрелка, затем прямоугольник.   

Задержка рисования прямоугольника реализуется командой - begin="an_Line.end-0.5s"    



.container {
width:15%;
height:15%;

}







Вариант с картинкой:  



.img1 {
position:relative;
}
.container {
position:absolute;
width:5%;
height:5%;
top:12%;
left:2%;

}
 
 

 





Ответ 2

Это конечно больше хак чем верное решение но примерно так 

Хотя в примере использован bodymovin.js что говорит о том что рисовали в AI и для
анимации использовали After Effects с его плагином bodymovin 

Но я совместил SVG с анимацией css3



a {
  margin: 0;
  padding: 0;
  display: block;
  width: 50px;
  height: 48px;
  position: relative;
}

a:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
}

a:hover:after {
  animation: scalable 0.64s linear;
}

@keyframes scalable {
  0%,
  100% {
    width: 0;
    height: 0;
  }
  50% {
    width: 40px;
    height: 40px;
  }
}

  




Ответ 3

Вариант с использованием масок SVG

Чтобы анимация появления стрелки и рисования контейнера начиналась и заканчивалась
в центре круга, можно использовать две половинки маски, которые будут двигаться в разные
стороны от центра. 

Роль двух половинок маски будут играть два прямоугольника



.container {
width:30%;
height:30%;

}








Поворачиваем прямоугольники на 60 градусов
transform="rotate(60 12 12)"




.container {
width:30%;
height:30%;

}







Выглядит получше, но всё равно не реалистично

Выводим маскирование контейнера прямоугольника 
     
      



.container {
width:30%;
height:30%;

}







Делаем маску непрозрачной fill="black" подробнее о масках здесь      



.container {
width:10%;
height:10%;

}





  

Финальная часть + картинка  



.img1 {
position:relative;
}
.container {
position:absolute;
width:5%;
height:5%;
top:2%;
left:2%;

}