Анимация персонажа улитки

У меня есть, вот такая картинка симпатичного семейства улиток - 🐌 



Хочется сделать анимацию движения улиток, плюс к этому анимацию тела улитки, её усиков, глаз. 
  Понятно, что нужно искать или рисовать улитку в формате svg. В инете достаточно много файлов svg с улитками.
  Но мне понравилась именно эта картинка.  

Если есть svg файл большой улитки, то сделать уменьшенные копии - детёнышей не составит труда, используя команду scale(0.25):

  
`    


Анимация перемещения вдоль пути может быть реализована командой:


   
  


Как сделать остальную анимацию частей тела улиток?  
    

Ответы

Ответ 1

Анимация подошвы улитки


  Если есть необходимость подробно разобраться с техникой анимации
  атрибута "d" команды Path смотрите здесь Вся последующая
  реализация анимаций частей тела улитки основана именно на этой
  технике.


Чтобы анимировать тело улитки необходимо найти патч, который рисует внешний контур подошвы улитки.
Загружаем файл в векторный редактор и делаем копию этого патча. Сдвигаем контрольны
узлы на копии патча, чтобы имитировать изменение контура подошвы улитки. Сохраняем фай
и копируем эти патчи. Чтобы получилась анимация необходимо сделать плавный переход от первоначального патча ко второму и обратно. Для этого надо использовать анимацию атрибута патча “d”   



  
    
      
    
    
      
    
    
      
      
    
    
      
      
    
    
      
      
     
	
        
		 
		 
		 
         
	  
        
		 
        
	  
     	 
	 
    
      
      
      
      
      
      
      
      
    
  
  
  
    
  
   
 
 
	  
   
     
	
	
	
    
   
	
       
	
  
      
        
        
        
      
      
        
        
        
      
	  
     
	
    
  
    
  
    
    
    
 
   
    

 	
 
 
 
	 




Анимация глаз и рта улитки

Глаза улитки прикреплены к усикам, которые движутся, поэтому для более реалистичной картины необходимо обеспечить движение глаз влево-вправо и вверх-вниз.
Для этого используется команда :

   

Анимация рта улитки реализуется плавным изменением параметра “d” патча. Другими словам
верхняя губа изгибается, имитируя открывание рта, а затем смыкается с нижней губой, как-бы, закрывая рот.










Создание маленьких улиток

Для создания детенышей улиток будем использовать команду  для клонирования и команду scale(0.25) для уменьшения

  
  
   

Анимация движения улиток

Для анимации движения улиток используется команда  движение по заданному пути 


 
 
   
  
    

Далее оформляем ландшафт, добавляем градиенты и музыку для создания настроения.     

Update 19.03.2019 г.  


Chrome теперь не позволяет автоматически запускать файлы *.mp3,
поэтому пришлось добавить аудиоплайер. Firefox воспроизводит в
автоматическом режиме файлы *.mp3 
Добавлена анимация глаз улитки     
Добавлена анимация солнечных лучей




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


 
 
		 

		




Использована песня: Bobby McFerrin don't worry be happy