Перерисовать байкальскую нерпу и анимацию ластов
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 250" fill="none">
|
||||
<title>Байкальская нерпа хлопает ластами по камню</title>
|
||||
<defs>
|
||||
<linearGradient id="rock" x1="131" y1="177" x2="170" y2="240" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#c3c7c5"/><stop offset=".48" stop-color="#929e9f"/><stop offset="1" stop-color="#4a6069"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="coat" cx="0" cy="0" r="1" gradientTransform="translate(135 88) rotate(49) scale(132 119)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#bdc9ca"/><stop offset=".42" stop-color="#819598"/><stop offset=".77" stop-color="#4b6269"/><stop offset="1" stop-color="#283e49"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="chest" cx="0" cy="0" r="1" gradientTransform="translate(108 119) rotate(80) scale(67 44)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#e0e5e1"/><stop offset=".6" stop-color="#becbc8" stop-opacity=".7"/><stop offset="1" stop-color="#b7c9c7" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="head" cx="0" cy="0" r="1" gradientTransform="translate(111 44) rotate(62) scale(64 50)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#becacc"/><stop offset=".55" stop-color="#81969a"/><stop offset="1" stop-color="#3b525e"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="fin" x1="154" y1="149" x2="174" y2="201" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#92a5a8"/><stop offset=".46" stop-color="#5e777f"/><stop offset="1" stop-color="#2d444e"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="muzzle">
|
||||
<stop stop-color="#e3e8e3"/><stop offset="1" stop-color="#abbdbb"/>
|
||||
</radialGradient>
|
||||
<pattern id="spots" width="31" height="27" patternUnits="userSpaceOnUse" patternTransform="rotate(-17)">
|
||||
<ellipse cx="7" cy="6" rx="3.4" ry="2" fill="#263f4a" opacity=".15"/>
|
||||
<ellipse cx="24" cy="17" rx="4.5" ry="2.2" fill="#243a43" opacity=".13"/>
|
||||
<ellipse cx="10" cy="24" rx="1.5" ry="1" fill="#e6efec" opacity=".28"/>
|
||||
<path d="m18 6 3-1M2 17l3-1" stroke="#d2e0dc" stroke-opacity=".2" stroke-linecap="round"/>
|
||||
</pattern>
|
||||
<path id="body" d="M92 74C79 88 67 117 69 145c1 28 22 45 59 48 45 5 103 4 124-10-11-7-17-20-23-35-12-32-37-66-68-72-21-5-46-10-69-2Z"/>
|
||||
</defs>
|
||||
<style>
|
||||
.near-flipper{transform-origin:151px 148px;animation:tap-near 3.6s ease-in-out infinite}
|
||||
.far-flipper{transform-origin:85px 139px;animation:tap-far 3.6s ease-in-out .22s infinite}
|
||||
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 6.8s infinite}
|
||||
@keyframes tap-near{0%,12%,32%,47%,100%{transform:rotate(0)}23%,38%{transform:rotate(-24deg)}28%,43%{transform:rotate(3deg)}}
|
||||
@keyframes tap-far{0%,12%,32%,47%,100%{transform:rotate(0)}23%,38%{transform:rotate(20deg)}28%,43%{transform:rotate(-2deg)}}
|
||||
@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
|
||||
@media(prefers-reduced-motion:reduce){.near-flipper,.far-flipper,.eyes{animation:none}}
|
||||
</style>
|
||||
<!-- Неподвижный камень и контактная тень удерживают нерпу на поверхности. -->
|
||||
<ellipse cx="163" cy="234" rx="136" ry="9" fill="#092335" opacity=".25"/>
|
||||
<path d="m18 217 15-28 35-10 42 5 49-12 40 7 54 3 27 12 27 30-29 14-63 2-50-5-58 6-55-8Z" fill="url(#rock)"/>
|
||||
<path d="m33 189 35-10 42 5 49-12 40 7 54 3-28 14-68 7-56-6-48 9Z" fill="#d4d9d4" opacity=".54"/>
|
||||
<path d="m18 217 35-11 48-9-18 24-41 12Zm139-14 68-7 55-2-27 21-68 9Zm96 12 54 9-29 14-63 2Z" fill="#48616c" opacity=".28"/>
|
||||
<path d="m68 185 20 9 13 3-18 24m74-18 11 13-8 13m57-40-10 9m53 16 12 6" stroke="#677c81" stroke-width="1.4" stroke-linecap="round" opacity=".65"/>
|
||||
<path d="m45 210 23-7m45 21 25-1m89-4 18-3m-129-29 20-5" stroke="#e6e9df" stroke-width="2" stroke-linecap="round" opacity=".5"/>
|
||||
<ellipse cx="161" cy="193" rx="99" ry="10" fill="#213e4b" opacity=".35"/>
|
||||
<!-- Задние ласты: у нерпы нет рыбьего хвоста. -->
|
||||
<path d="M232 174c21-1 30 2 46 13 5 4 4 9-3 9-12 0-24-6-36-8 16 8 28 16 25 20-5 6-32-9-46-20Z" fill="#354c58" stroke="#718991" stroke-width="1"/>
|
||||
<path d="m240 180 30 11m-35-5 22 16" stroke="#9bafb1" stroke-width="1" opacity=".5"/>
|
||||
<g class="far-flipper">
|
||||
<path d="M89 132c-12 7-26 24-29 39-3 11-4 20 1 22 7 2 25-15 33-25l10-25Z" fill="#536e76" stroke="#9cafb0" stroke-width="1"/>
|
||||
<path d="m66 183 9-13m-5 17 10-14" stroke="#bac9c6" stroke-width="1" opacity=".5"/>
|
||||
</g>
|
||||
<use href="#body" fill="url(#coat)" stroke="#9bafb1" stroke-width="1.2"/>
|
||||
<use href="#body" fill="url(#spots)"/>
|
||||
<path d="M94 82c-16 28-21 57-8 80 9 18 32 27 49 21 16-7 13-39 3-63-11-26-21-44-44-38Z" fill="url(#chest)"/>
|
||||
<path d="M157 91c27 9 49 35 59 63" stroke="#c1d0cd" stroke-width="3" stroke-linecap="round" opacity=".22"/>
|
||||
<path d="M81 108c17 15 43 17 59 5M78 118c13 10 32 13 45 10" stroke="#344f59" stroke-width="2" stroke-linecap="round" opacity=".36"/>
|
||||
<path d="M81 112c14 12 37 15 53 9" stroke="#e0e7e0" stroke-width="1.3" stroke-linecap="round" opacity=".44"/>
|
||||
<!-- Маленькая округлая голова плавно переходит в широкую шею. -->
|
||||
<path d="M80 72c-2-14 3-31 14-39 12-9 31-10 44-1 12 8 18 24 16 39-1 11-8 23-19 29-15 8-37 4-48-7-5-6-7-13-7-21Z" fill="url(#head)"/>
|
||||
<path d="M91 44c9-12 28-17 41-8" stroke="#d7e0da" stroke-width="2" stroke-linecap="round" opacity=".6"/>
|
||||
<path d="M87 64q9-11 18-5m19-1q9-8 17 2" stroke="#344e59" stroke-width="3" stroke-linecap="round" opacity=".65"/>
|
||||
<g class="eyes">
|
||||
<ellipse cx="99" cy="65" rx="5.5" ry="6.5" fill="#101f29"/>
|
||||
<ellipse cx="133" cy="64" rx="5" ry="6" fill="#101f29"/>
|
||||
<circle cx="97.5" cy="62.8" r="1.8" fill="#fff"/>
|
||||
<circle cx="131.5" cy="61.8" r="1.6" fill="#fff"/>
|
||||
<circle cx="101" cy="67" r=".8" fill="#829fa7"/>
|
||||
<circle cx="134" cy="66" r=".7" fill="#829fa7"/>
|
||||
</g>
|
||||
<path d="M94 78c2-8 11-11 20-8 9-4 20-1 23 6 4 9-5 18-19 19-14 1-26-6-24-17Z" fill="url(#muzzle)"/>
|
||||
<path d="M107 74c1-5 16-6 18-1 1 3-5 8-8 8-4 0-11-4-10-7Z" fill="#1b2e39"/>
|
||||
<path d="m112 73 7-1" stroke="#71888e" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="m117 80 1 6m-10 1q10 4 18-1" stroke="#405861" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<g fill="#5b747b" opacity=".8">
|
||||
<circle cx="101" cy="79" r=".9"/><circle cx="104" cy="84" r=".9"/><circle cx="99" cy="85" r=".8"/>
|
||||
<circle cx="130" cy="78" r=".9"/><circle cx="129" cy="84" r=".8"/><circle cx="134" cy="82" r=".8"/>
|
||||
</g>
|
||||
<g stroke="#e7eee5" stroke-width="1" stroke-linecap="round" opacity=".85">
|
||||
<path d="M103 79Q85 74 71 78m31 5Q80 82 68 88m36-1q-19 3-29 9m55-18q18-7 29-4m-28 8q22-3 31 2m-32 2q20 3 28 9"/>
|
||||
</g>
|
||||
<!-- Короткий передний ласт вращается от плеча и возвращается к камню. -->
|
||||
<g class="near-flipper">
|
||||
<path d="M145 143c9-6 19-1 22 10 4 14 8 23 19 34 7 8 4 12-4 12-17-1-33-16-39-30-4-11-5-21 2-26Z" fill="url(#fin)" stroke="#9bafb0" stroke-width="1"/>
|
||||
<path d="M149 149c-1 14 9 33 23 41" stroke="#c2ceca" stroke-width="1.5" stroke-linecap="round" opacity=".55"/>
|
||||
<path d="m174 185 8 9m-12-6 6 7m-12-4 5 4" stroke="#263f4a" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
Reference in New Issue
Block a user