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

189

26 апреля 2018, 07:11

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

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

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

<use xlink:href="#snail" transform="scale(0.25) translate(1550 900)" > </use> <use xlink:href="#snail" transform="scale(0.20) translate(1400 1150)" ></use>

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

<animateMotion id="anFirst" dur="45s" repeatCount="3" fill="freeze" > <mpath xlink:href="#MpathSnail"/> </animateMotion>

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

Answer 1

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

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

<animate attributeName="d" dur="2s" repeatCount="indefinite" values="m271 13-4... начальный путь;m271 13-4... конечный путь;m271 13-4... начальный путь />

Первая формула патча расположена в атрибуте values=”m271…..;m271….” до первой точки с запятой, вторая формула до второй точки с запятой, затем снова возврат к исходному патчу и так по кругу, создавая иллюзию волнообразного изменения формы подошвы улитки. За повторяемость циклов отвечает команда repeatCount=”indefinite”

Ниже пример этой анимации

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin meet" > 
 
  <defs> 
    <filter id="filter4444" color-interpolation-filters="sRGB"> 
      <feGaussianBlur stdDeviation="3" id="feGaussianBlur9"/> 
    </filter> 
    <filter id="filter4502" height="1" width="1" color-interpolation-filters="sRGB" y="0" x="0"> 
      <feGaussianBlur id="feGaussianBlur4504" stdDeviation="3"/> 
    </filter> 
    <radialGradient id="radialGradient4530" gradientUnits="userSpaceOnUse" cy="156" cx="453" gradientTransform="matrix(2.6303 6.1449e-7 -.0050582 2.6926 -1052.6 -365.61)" r="29"> 
      <stop id="stop3688" offset="0" stop-color="#977640"/> 
      <stop id="stop3690" offset="1" class="s0"/> 
    </radialGradient> 
    <radialGradient id="radialGradient4532" gradientUnits="userSpaceOnUse" cy="161" cx="456" gradientTransform="matrix(-3.2548 .012681 -9.7842e-7 -3.3049 2021 617.52)" r="29"> 
      <stop id="stop4454" offset="0" stop-color="#977640"/> 
      <stop id="stop4456" offset="1" class="s0"/> 
    </radialGradient> 
    <linearGradient id="linearGradient4534" y2="98" gradientUnits="userSpaceOnUse" x2="563" gradientTransform="matrix(-.25136 -.34551 .29567 -.21510 362.44 304.84)" y1="92" x1="369"> 
      <stop id="stop4508" offset="0" stop-color="#000000"/> 
      <stop id="stop4510" offset="1" style="stop-color:#000000;stop-opacity:0"/> 
    </linearGradient>  
	<linearGradient id="Grad1" x1="0%" y1="0%" x2="0%" y2="100%" > 
        <stop offset="0%" stop-color="skyblue" /> 
		 <stop offset="40%" stop-color="white" /> 
		 <stop offset="70%" stop-color="green" /> 
		 <stop offset="100%" stop-color="black" /> 
      </linearGradient>    
	  <linearGradient id="GradRect" x1="0%" y1="0%" x2="0%" y2="100%" > 
        <stop offset="0%" stop-color="#B6E1F3" /> 
		 <stop offset="100%" stop-color="#474747" /> 
      </linearGradient>   
	   
    <symbol id="grass"  viewBox="0 0 1600 2496" > 	  
	 <g id="grass" transform="translate(1592.4714,1450.3679)" fill="#008B00" stroke="#004A00" stroke-width="0.1"> 
    <g id="g5201" transform="matrix(58.394198,45.45022,45.45022,-58.394198,-38079.323,9455.4817)" > 
      <path id="path3602" d="m311.8 408.4c-0.1 4.7-0.4 9.4-2.1 13.9 0.9-4.8 1.6-12.8 1.4-14.5l0.7 0.6z" /> 
      <path id="path3604" d="m311.1 407.8c-0.4 6.1-1.3 11-2.8 14 1.2-4.5 2.2-10.6 2.3-14.4l0.5 0.4z" /> 
      <path id="path3606" d="m311.1 407.8c-1 5.6-2.6 11.3-5.2 14.9 1.9-4.2 4.4-12.1 4.4-15.6l0.7 0.6z" /> 
      <path id="path3608" d="m310.6 407.4c-0.8 5.5-3.7 11.9-7.1 15.6 2.4-3.5 6-11.7 6.6-16.1l0.5 0.5z" /> 
      <path id="path3610" d="m309 406c-1.1 2.8-4.3 8.1-6.8 10.4 3.8-3 6.4-7.2 7.3-10l-0.4-0.4z" /> 
      <path id="path3612" d="m309.4 406.3c-1.5 3.6-4.4 8.6-7.2 11.4 3.7-3.2 6.4-7.4 7.7-10.9l-0.5-0.4z" /> 
      <path id="path3614" d="m309.7 406.6c-1.5 4-4.8 10.1-7.1 12.6 3.9-3.5 6.2-8 7.7-12.1l-0.6-0.5z" /> 
      <path id="path3616" d="m309.9 406.8c-2.5 7-5.6 12.5-7.7 14.9 3.9-2.8 7.3-11.5 8.1-14.5l-0.5-0.4z" /> 
    </g> 
  </g> 
  </symbol> 
  </defs> 
    <style id="style4"> 
     
.s0{ 
	stop-color:#3d280a; 
	stop-opacity:0; 
} 
.s1{ 
	fill:#977640; 
	stroke:#000; 
} 
.s2{ 
	fill:#fff; 
	stroke-width:6; 
	stroke:#000; 
} 
.s3{ 
	fill:#000; 
	stroke-width:8; 
	stroke:#000; 
} 
 
  </style> 
   
   <rect width="1500" height="1500" style="fill:url(#Grad1);" /> 
  
 <g transform="translate(0 -130 ) scale(1)" > 
	   
  <g id="snail" >  
    <path id="headBody" d="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" style="fill:#88A96B;stroke:#000">  
	 
	<animate attributeName="d" dur="2s" repeatCount="indefinite" values="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z;m271 13-4 1c11 19.2 13 30 2 43-3-2-7-2-9-3 0-14 2-27.1-13.3-40.7L243 13c15.4 17.8 14 26 13 41-19 5-23 49-57 49C168 94 86 83.1 41 101 19.1 105-24.4 91.5 21.1 112 133.4 134.7 148.1 133.1 223 120c72.8-8.5 33-6 38-15 12-14 19-27 11-47 11-15 8.2-29.7-1-47z;m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" /> 
	</path> 
    <path id="baseSnail" d="m83 110c-22-4-17-17 5-19l93-12c39 6 46 23 26 27-50 5-74 13-123 3zM130 130 130 130 130 130" class="s1"/> 
    
	<path id="smallHouse" d="m130 130c3 3-2 5-4 5-6-1-8-8-6-13 4-9 15-11 23-7 12 6 14 21 8 32-8 14-28 17-41 9-17-11-21-34-10-51 13-20 41-24 60-11 23 15 27 47 12 69-18 25-54 30-78 13-28-20-34-60-14-88 22-31 67-37 97-15 30 21 39 63 23 95" transform="matrix(.99841 .056439 -.056439 .99841 16.305 -84.731)" class="s1"> 
    </path>    
	 
  <g id="twoEyes" transform="translate(-359.76 -66.757)" > 
      <g id="g3587" transform="matrix(.95649 0 0 .95649 650.55 49.498)" stroke="#000"> 
        <path id="rightEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/> 
        <path id="rightEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/> 
        <path id="rightEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:22;stroke:#000"/> 
      </g> 
      <g id="g3595" transform="matrix(.95649 0 0 .95649 627.87 50.514)" stroke="#000"> 
        <path id="LeftEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/> 
        <path id="LeftEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/> 
        <path id="LeftEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:23;stroke:#000"/> 
      </g> 
	   
    </g>  
	 
    <path id="mouth" d="m245 81c10 8 19 5 27 0" style="fill:none;stroke-width:2;stroke:#977640"> 
   
  </path>   
   
    <path id="SpiralShadow" d="m77 29c-3 31-5 76 56 81 32-7 38 13 53-36-76 63-137-30-56-85 6-22-33 3-52 41z" style="fill:url(#radialGradient4530);filter:url(#filter4444)"/> 
    <path id="SpiralShadow2" transform="matrix(.42727 0 0 .42113 -97.169 11.158)" d="m466 45c-22 83 33 130 89 129 32-16 47-23 51-66-66 115-213-100 7-108-25-23-96-45-147 45z" style="fill:url(#radialGradient4532);filter:url(#filter4444)"/> 
    <path id="neckShadow" d="m256 125c19-3 23 4 14-3-23-15 1-18 6-47 3-6-19-30-48 12-22 28-99 22-99 30 0 7 110 8 127 8z" style="fill:url(#linearGradient4534);filter:url(#filter4502)"/> 
  
  </g>  
    </g> 
 
 <rect y="52%" width="150%" height="250px"  fill="url(#GradRect)" />	 
  
 <use xlink:href="#snail" transform="scale(1.5) translate(100 110)"/> 
  
	 </svg>

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

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

<animateTransform attributeName="transform" type="translate" values="-359.76 -66.757;-361.76 -62.757; -359.76 -66.757" dur="2s" repeatCount="indefinite"/>

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

<animate attributeName="d" dur="5s" values="m245 81c10 8 19 5 27 0;m245.4 80.3c10-8 19-5 27 0;m245 81c10 8 19 5 27 0" repeatCount="indefinite" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin meet" > 
 
  <defs> 
    <filter id="filter4444" color-interpolation-filters="sRGB"> 
      <feGaussianBlur stdDeviation="3" id="feGaussianBlur9"/> 
    </filter> 
    <filter id="filter4502" height="1" width="1" color-interpolation-filters="sRGB" y="0" x="0"> 
      <feGaussianBlur id="feGaussianBlur4504" stdDeviation="3"/> 
    </filter> 
    <radialGradient id="radialGradient4530" gradientUnits="userSpaceOnUse" cy="156" cx="453" gradientTransform="matrix(2.6303 6.1449e-7 -.0050582 2.6926 -1052.6 -365.61)" r="29"> 
      <stop id="stop3688" offset="0" stop-color="#977640"/> 
      <stop id="stop3690" offset="1" class="s0"/> 
    </radialGradient> 
    <radialGradient id="radialGradient4532" gradientUnits="userSpaceOnUse" cy="161" cx="456" gradientTransform="matrix(-3.2548 .012681 -9.7842e-7 -3.3049 2021 617.52)" r="29"> 
      <stop id="stop4454" offset="0" stop-color="#977640"/> 
      <stop id="stop4456" offset="1" class="s0"/> 
    </radialGradient> 
    <linearGradient id="linearGradient4534" y2="98" gradientUnits="userSpaceOnUse" x2="563" gradientTransform="matrix(-.25136 -.34551 .29567 -.21510 362.44 304.84)" y1="92" x1="369"> 
      <stop id="stop4508" offset="0" stop-color="#000000"/> 
      <stop id="stop4510" offset="1" style="stop-color:#000000;stop-opacity:0"/> 
    </linearGradient>  
	<linearGradient id="Grad1" x1="0%" y1="0%" x2="0%" y2="100%" > 
        <stop offset="0%" stop-color="skyblue" /> 
		 <stop offset="40%" stop-color="white" /> 
		 <stop offset="70%" stop-color="green" /> 
		 <stop offset="100%" stop-color="black" /> 
      </linearGradient>    
	  <linearGradient id="GradRect" x1="0%" y1="0%" x2="0%" y2="100%" > 
        <stop offset="0%" stop-color="#B6E1F3" /> 
		 <stop offset="100%" stop-color="#474747" /> 
      </linearGradient>   
	    
  </defs> 
    <style> 
     
.s0{ 
	stop-color:#3d280a; 
	stop-opacity:0; 
} 
.s1{ 
	fill:#977640; 
	stroke:#000; 
} 
.s2{ 
	fill:#fff; 
	stroke-width:6; 
	stroke:#000; 
} 
.s3{ 
	fill:#000; 
	stroke-width:8; 
	stroke:#000; 
} 
 
  </style> 
   
   <rect width="1500" height="1500" style="fill:url(#Grad1);" /> 
  
 <g transform="translate(0 -130 ) scale(1)" > 
	   
  <g id="snail" >  
    <path id="headBody" d="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" style="fill:#88A96B;stroke:#000">  
	 
	<animate attributeName="d" dur="2s" repeatCount="indefinite" values="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z;m271 13-4 1c11 19.2 13 30 2 43-3-2-7-2-9-3 0-14 2-27.1-13.3-40.7L243 13c15.4 17.8 14 26 13 41-19 5-23 49-57 49C168 94 86 83.1 41 101 19.1 105-24.4 91.5 21.1 112 133.4 134.7 148.1 133.1 223 120c72.8-8.5 33-6 38-15 12-14 19-27 11-47 11-15 8.2-29.7-1-47z;m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" /> 
	</path> 
    <path id="baseSnail" d="m83 110c-22-4-17-17 5-19l93-12c39 6 46 23 26 27-50 5-74 13-123 3zM130 130 130 130 130 130" class="s1"/> 
    
	<path id="smallHouse" d="m130 130c3 3-2 5-4 5-6-1-8-8-6-13 4-9 15-11 23-7 12 6 14 21 8 32-8 14-28 17-41 9-17-11-21-34-10-51 13-20 41-24 60-11 23 15 27 47 12 69-18 25-54 30-78 13-28-20-34-60-14-88 22-31 67-37 97-15 30 21 39 63 23 95" transform="matrix(.99841 .056439 -.056439 .99841 16.305 -84.731)" class="s1"> 
    </path>    
	 
  <g id="twoEyes" transform="translate(-359.76 -66.757)" > 
      <g id="g3587" transform="matrix(.95649 0 0 .95649 650.55 49.498)" stroke="#000"> 
        <path id="rightEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/> 
        <path id="rightEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/> 
        <path id="rightEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:22;stroke:#000"/> 
      </g> 
      <g id="g3595" transform="matrix(.95649 0 0 .95649 627.87 50.514)" stroke="#000"> 
        <path id="LeftEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/> 
        <path id="LeftEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/> 
        <path id="LeftEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:23;stroke:#000"/> 
      </g> 
	    <animateTransform  attributeName="transform" type="translate" values="-359.76 -66.757;-361.76 -62.757; -359.76 -66.757"  dur="2s" repeatCount="indefinite"/> 
    </g>  
	 
    <path id="mouth" d="m245 81c10 8 19 5 27 0" style="fill:black;stroke-width:2;stroke:#977640"> 
  <animate attributeName="d" dur="5s" values="m245 81c10 8 19 5 27 0;m245.4 80.3c10-8 19-5 27 0;m245 81c10 8 19 5 27 0" repeatCount="indefinite" /> 
  </path>   
   
    <path id="SpiralShadow" d="m77 29c-3 31-5 76 56 81 32-7 38 13 53-36-76 63-137-30-56-85 6-22-33 3-52 41z" style="fill:url(#radialGradient4530);filter:url(#filter4444)"/> 
    <path id="SpiralShadow2" transform="matrix(.42727 0 0 .42113 -97.169 11.158)" d="m466 45c-22 83 33 130 89 129 32-16 47-23 51-66-66 115-213-100 7-108-25-23-96-45-147 45z" style="fill:url(#radialGradient4532);filter:url(#filter4444)"/> 
    <path id="neckShadow" d="m256 125c19-3 23 4 14-3-23-15 1-18 6-47 3-6-19-30-48 12-22 28-99 22-99 30 0 7 110 8 127 8z" style="fill:url(#linearGradient4534);filter:url(#filter4502)"/> 
  
  </g>  
    </g> 
 
 <rect y="52%" width="150%" height="250px"  fill="url(#GradRect)" />	 
  
 <use xlink:href="#snail" transform="scale(1.5) translate(100 110)"/> 
  
	 </svg>

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

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

<use xlink:href="#snail" transform="scale(0.75) translate(700 220)" > </use> <use xlink:href="#snail" transform="scale(0.25) translate(1550 900)" > </use> <use xlink:href="#snail" transform="scale(0.20) translate(1400 1150)" ></use>

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

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

<path id="MpathSnail" d="M0 250 1000 250" stroke="gray" /> <use xlink:href="#snail" transform="scale(0.75) translate(0 -110)" > <animateMotion id="anFirst" dur="45s" repeatCount="3" fill="freeze" > <mpath xlink:href="#MpathSnail"/> </animateMotion> </use>

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin meet" > 
  
  <defs> 
    <filter id="filter4444" color-interpolation-filters="sRGB"> 
      <feGaussianBlur stdDeviation="3" id="feGaussianBlur9"/> 
    </filter> 
    <filter id="filter4502" height="1" width="1" color-interpolation-filters="sRGB" y="0" x="0"> 
      <feGaussianBlur id="feGaussianBlur4504" stdDeviation="3"/> 
    </filter> 
    <radialGradient id="radialGradient4530" gradientUnits="userSpaceOnUse" cy="156" cx="453" gradientTransform="matrix(2.6303 6.1449e-7 -.0050582 2.6926 -1052.6 -365.61)" r="29"> 
      <stop id="stop3688" offset="0" stop-color="#977640"/> 
      <stop id="stop3690" offset="1" class="s0"/> 
    </radialGradient> 
    <radialGradient id="radialGradient4532" gradientUnits="userSpaceOnUse" cy="161" cx="456" gradientTransform="matrix(-3.2548 .012681 -9.7842e-7 -3.3049 2021 617.52)" r="29"> 
      <stop id="stop4454" offset="0" stop-color="#977640"/> 
      <stop id="stop4456" offset="1" class="s0"/> 
    </radialGradient> 
    <linearGradient id="linearGradient4534" y2="98" gradientUnits="userSpaceOnUse" x2="563" gradientTransform="matrix(-.25136 -.34551 .29567 -.21510 362.44 304.84)" y1="92" x1="369"> 
      <stop id="stop4508" offset="0" stop-color="#000000"/> 
      <stop id="stop4510" offset="1" style="stop-color:#000000;stop-opacity:0"/> 
    </linearGradient>  
	<linearGradient id="Grad1" x1="0%" y1="0%" x2="0%" y2="100%" > 
        <stop offset="0%" stop-color="skyblue" /> 
		 <stop offset="40%" stop-color="white" /> 
		 <stop offset="70%" stop-color="green" /> 
		 <stop offset="100%" stop-color="black" /> 
      </linearGradient>    
	  <linearGradient id="GradRect" x1="0%" y1="0%" x2="0%" y2="100%" > 
        <stop offset="0%" stop-color="#B6E1F3" /> 
		 <stop offset="100%" stop-color="#474747" /> 
      </linearGradient>   
	   
    <symbol id="grass"  viewBox="0 0 1600 2496" > 	  
	 <g id="grass" transform="translate(1592.4714,1450.3679)" fill="#518B51" stroke="#004A00" stroke-width="0.1"> 
    <g id="g5201" transform="matrix(58.394198,45.45022,45.45022,-58.394198,-38079.323,9455.4817)" > 
      <path id="path3602" d="m311.8 408.4c-0.1 4.7-0.4 9.4-2.1 13.9 0.9-4.8 1.6-12.8 1.4-14.5l0.7 0.6z" /> 
      <path id="path3604" d="m311.1 407.8c-0.4 6.1-1.3 11-2.8 14 1.2-4.5 2.2-10.6 2.3-14.4l0.5 0.4z" /> 
      <path id="path3606" d="m311.1 407.8c-1 5.6-2.6 11.3-5.2 14.9 1.9-4.2 4.4-12.1 4.4-15.6l0.7 0.6z" /> 
      <path id="path3608" d="m310.6 407.4c-0.8 5.5-3.7 11.9-7.1 15.6 2.4-3.5 6-11.7 6.6-16.1l0.5 0.5z" /> 
      <path id="path3610" d="m309 406c-1.1 2.8-4.3 8.1-6.8 10.4 3.8-3 6.4-7.2 7.3-10l-0.4-0.4z" /> 
      <path id="path3612" d="m309.4 406.3c-1.5 3.6-4.4 8.6-7.2 11.4 3.7-3.2 6.4-7.4 7.7-10.9l-0.5-0.4z" /> 
      <path id="path3614" d="m309.7 406.6c-1.5 4-4.8 10.1-7.1 12.6 3.9-3.5 6.2-8 7.7-12.1l-0.6-0.5z" /> 
      <path id="path3616" d="m309.9 406.8c-2.5 7-5.6 12.5-7.7 14.9 3.9-2.8 7.3-11.5 8.1-14.5l-0.5-0.4z" /> 
    </g> 
  </g> 
  </symbol> 
  </defs>  
   <style> 
     
.s0{ 
	stop-color:#3d280a; 
	stop-opacity:0; 
} 
.s1{ 
	fill:#977640; 
	stroke:#000; 
} 
.s2{ 
	fill:#fff; 
	stroke-width:6; 
	stroke:#000; 
} 
.s3{ 
	fill:#000; 
	stroke-width:8; 
	stroke:#000; 
} 
 
 
  </style> 
  
   
   <rect width="1500" height="1500" style="fill:url(#Grad1);" /> 
 <!-- масштабирование улитки --> 
 <g transform="translate(0 -130 ) scale(1)" >  
 <!-- Трава по которой ползет улитка --> 
	<g transform="translate(0 330)" stroke="#005600" >	 
   <path d="M-800,60 H1800"  stroke-width="4.5"  /> 
   <path d="M-800,55 H1800"  stroke-width="4.5"  /> 
   <path d="M-800,50 H1800"  stroke-width="4.5"  /> 
   <path d="M-800,45 H1800"  stroke-width="4.5"  /> 
 </g> 
   
  <g id="snail" >  
    <path id="headBody" d="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" style="fill:#88A96B;stroke:#000">  
	<!-- Анимация подошвы улитки --> 
	<animate attributeName="d" dur="2s" repeatCount="indefinite" values="m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z;m271 13-4 1c11 19.2 13 30 2 43-3-2-7-2-9-3 0-14 2-27.1-13.3-40.7L243 13c15.4 17.8 14 26 13 41-19 5-23 49-57 49C168 94 86 83.1 41 101 19.1 105-24.4 91.5 21.1 112 133.4 134.7 148.1 133.1 223 120c72.8-8.5 33-6 38-15 12-14 19-27 11-47 11-15 8.2-29.7-1-47z;m271 13-4 1c-13 19 13 30 2 43-3-2-7-2-9-3 0-14-25-28-13-41l-4 0c-12 18 14 26 13 41-19 5-23 49-57 49-31-9-108-8-158-2-21 4-66 9-24 16 117 13 128-5 206 3 75 6 33-6 38-15 12-14 19-27 11-47 11-15-14-29-1-47z" /> 
	</path> 
    <path id="baseSnail" d="m83 110c-22-4-17-17 5-19l93-12c39 6 46 23 26 27-50 5-74 13-123 3zM130 130 130 130 130 130" class="s1"/> 
    <path id="smallHouse" d="m130 130c3 3-2 5-4 5-6-1-8-8-6-13 4-9 15-11 23-7 12 6 14 21 8 32-8 14-28 17-41 9-17-11-21-34-10-51 13-20 41-24 60-11 23 15 27 47 12 69-18 25-54 30-78 13-28-20-34-60-14-88 22-31 67-37 97-15 30 21 39 63 23 95" transform="matrix(.99841 .056439 -.056439 .99841 16.305 -84.731)" class="s1"/> 
    <g id="g4389" transform="translate(-359.76 -66.757)"> 
      <g id="g3587" transform="matrix(.95649 0 0 .95649 650.55 49.498)" stroke="#000"> 
       <desc> All rights belong to svg-art.ru. Copying with the permission of the owner with indication of the indexed link </desc>       
	   <path id="rightEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/> 
        <path id="rightEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/> 
        <path id="rightEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:22;stroke:#000"/> 
      </g> 
      <g id="g3595" transform="matrix(.95649 0 0 .95649 627.87 50.514)" stroke="#000"> 
        <path id="LeftEye" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.17771 0 0 .17771 -42.905 -80.331)" class="s2"/> 
        <path id="LeftEyeBlack" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3"/> 
        <path id="LeftEyeWhite" d="m177 592c0 32-26 57-57 57s-57-26-57-57 26-57 57-57 57 26 57 57z" transform="matrix(.044528 0 0 .044528 -26.134 -5.617)" style="fill:#fff;stroke-width:23;stroke:#000"/> 
      </g>  
	  <!-- Анимация глаз улитки --> 
	    <animateTransform  attributeName="transform" type="translate" values="-359.76 -66.757;-361.76 -62.757; -359.76 -66.757"  dur="2s" repeatCount="indefinite"/> 
    </g> 
         <!-- Анимация рта улитки --> 
  <path id="mouth" d="m245 81c10 8 19 5 27 0" style="fill:black;stroke-width:2;stroke:#977640"> 
   <animate attributeName="d" dur="5s" values="m245 81c10 8 19 5 27 0;m245.4 80.3c10-8 19-5 27 0;m245 81c10 8 19 5 27 0" repeatCount="indefinite" /> 
  </path>   
      
    <path id="SpiralShadow" d="m77 29c-3 31-5 76 56 81 32-7 38 13 53-36-76 63-137-30-56-85 6-22-33 3-52 41z" style="fill:url(#radialGradient4530);filter:url(#filter4444)"/> 
    <path id="SpiralShadow2" transform="matrix(.42727 0 0 .42113 -97.169 11.158)" d="m466 45c-22 83 33 130 89 129 32-16 47-23 51-66-66 115-213-100 7-108-25-23-96-45-147 45z" style="fill:url(#radialGradient4532);filter:url(#filter4444)"/> 
    <path id="neckShadow" d="m256 125c19-3 23 4 14-3-23-15 1-18 6-47 3-6-19-30-48 12-22 28-99 22-99 30 0 7 110 8 127 8z" style="fill:url(#linearGradient4534);filter:url(#filter4502)"/> 
  
  </g>  
    </g> 
 
 <rect y="52%" width="150%" height="250px"  fill="url(#GradRect)" />	 
 <path id="MpathSnail" d="M0 250 1000 250" stroke="gray" /> 
 <use xlink:href="#snail" transform="scale(0.75) translate(0 -110)" >  
   <!-- Анимация движения улиток --> 
 <animateMotion id="anFirst" dur="90s" repeatCount="3" fill="freeze"   > 
  <mpath xlink:href="#MpathSnail"/>  
  </animateMotion> 
 </use>    
  
 <use xlink:href="#snail" transform="scale(0.25) translate(0 -80)" > 
 <animateMotion id="anSecond" begin="anFirst.begin+10s" dur="90s" repeatCount="3" fill="freeze"   > 
  <mpath xlink:href="#MpathSnail"/> 
   </animateMotion> 
 </use>    
  
  <use xlink:href="#snail" transform="scale(0.20) translate(0 -100)" > 
 <animateMotion id="anSecond" begin="anFirst.begin+20s" dur="90s" repeatCount="3" fill="freeze"   > 
  <mpath xlink:href="#MpathSnail"/>  
   </animateMotion> 
 </use>   
 
 <use xlink:href="#grass" x="-350" y="100" transform="translate(-50 -100) scale(1.7)" /> 
<use xlink:href="#grass" x="-250" y="200" transform="translate(-50 -100) scale(1.4)"/> 
 <use xlink:href="#grass" x="-150" y="250" />  
  <use xlink:href="#grass" x="-80" y="250" />  
 <use xlink:href="#grass" x="-50" y="200" transform="scale(1.2)" /> 
    <use xlink:href="#grass" x="100" y="200" transform="translate(-150 -40) scale(1.3)" /> 
 <use xlink:href="#grass" x="140" y="220" transform="translate(0 -50) scale(1.2)" />	 
 <use xlink:href="#grass" x="150" y="200" transform="translate(0 -100) scale(1.4)" />	 
 <use xlink:href="#grass" x="200" y="100" transform="translate(0 -50) scale(1.6)" />	 
  </svg> 
<audio src="https://svg-art.ru/files/bobby-mcferrin-don't-worry-be-happy.mp3" autoplay="autoplay"></audio>

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