Анимация подошвы улитки
Если есть необходимость подробно разобраться с техникой анимации
атрибута "d"
команды Path
смотрите здесь Вся последующая
реализация анимаций частей тела улитки основана именно на этой
технике.
Чтобы анимировать тело улитки необходимо найти патч, который рисует внешний контур подошвы улитки.
Загружаем файл в векторный редактор и делаем копию этого path
. Сдвигаем контрольные узлы на копии path
, чтобы имитировать изменение контура подошвы улитки. Сохраняем файл и копируем эти патчи. Чтобы получилась анимация необходимо сделать плавный переход от первоначального path
ко второму и обратно. Для этого надо использовать анимацию атрибута path
“d”
<animate attributeName="d" dur="2s" repeatCount="indefinite"
values="m271 13-4... начальный путь;m271 13-4... конечный путь;m271 13-4... начальный путь />
Первая формула path
расположена в атрибуте values=”m271…..;m271….”
до первой точки с запятой, вторая формула до второй точки с запятой, затем снова возврат к исходному path
и так по кругу, создавая иллюзию волнообразного изменения формы подошвы улитки. За повторяемость циклов отвечает команда 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” path
. Другими словами верхняя губа изгибается, имитируя открывание рта, а затем смыкается с нижней губой, как-бы, закрывая рот.
<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>
Далее оформляем ландшафт, добавляем градиенты и музыку для создания настроения.
Update 19.03.2019 г.
Chrome
теперь не позволяет автоматически запускать файлы *.mp3
,
поэтому пришлось добавить аудиоплэйер. Firefox
воспроизводит в
автоматическом режиме файлы *.mp3
- Добавлена анимация глаз улитки
- Добавлена анимация солнечных лучей
.container {
width:90%;
height:90%;
}
<div class="play-audio" style="position:relative">
<audio class="my_audio" controls preload="true" autoplay="autoplay">
<source src="https://svg-art.ru/files/bobby-mcferrin-don't-worry-be-happy.mp3" type="audio/mpeg">
</audio>
</div>
<div class="container">
<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>
<radialGradient id="radGrad" cx="50%" cy="50%" r="150%"
fx="50%" fy="50%">
<stop offset="10%" style="stop-color:gold;
stop-opacity:1">
</stop>
<stop offset="90%" style="stop-color:#D3B300;
stop-opacity:1.0"/>
</radialGradient>
<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 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 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 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 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 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 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 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 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);" />
<!-- Анимация солнца -->
<circle cx="1000" cy="50" r="200"
fill="none"
stroke="url(#radGrad)"
stroke-dasharray="52.32 52.32"
stroke-width="400"
stroke-opacity="0.5">
<animateTransform attributeName="transform" type="rotate" values="0 1000 50; 360 1000 50" dur="100s" repeatCount="indefinite" />
</circle>
<circle cx="1000" cy="50" r="50" filter="url(#filter4502)" fill-opacity="0.9" fill="#FFE02F" />
<!-- масштабирование улитки -->
<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">
<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"/>
<circle id="rightEyeBlack" cx="117" cy="592" r="60" transform="matrix(.11892 0 0 .13546 -35.976 -55.558)" class="s3">
<animate id="an_r" attributeName="r" begin="0s;set_2r.end" dur="0.4s" values="62;35;62" />
<animate id="set_2r" attributeName="r" begin="an_r.end" dur="4s" values="62" />
</circle>
<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="4s" 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.35) translate(0 -120)" >
<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.25) translate(-10 -140)" >
<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>
</div>
Использована песня: Bobby McFerrin don't worry be happy