90 lines
7.2 KiB
XML
90 lines
7.2 KiB
XML
<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="#668d9d"/><stop offset=".48" stop-color="#355f77"/><stop offset="1" stop-color="#142f4a"/>
|
|
</linearGradient>
|
|
<radialGradient id="coat" cx="0" cy="0" r="1" gradientTransform="translate(135 88) rotate(49) scale(132 119)" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#9ab8bd"/><stop offset=".42" stop-color="#5f8b9a"/><stop offset=".77" stop-color="#315f77"/><stop offset="1" stop-color="#112f4d"/>
|
|
</radialGradient>
|
|
<radialGradient id="chest" cx="0" cy="0" r="1" gradientTransform="translate(108 119) rotate(80) scale(67 44)" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#eee7d5"/><stop offset=".6" stop-color="#c8d5ca" stop-opacity=".7"/><stop offset="1" stop-color="#9bb9bd" 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="#a4c0c2"/><stop offset=".55" stop-color="#5d8998"/><stop offset="1" stop-color="#244e69"/>
|
|
</radialGradient>
|
|
<linearGradient id="fin" x1="154" y1="149" x2="174" y2="201" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#7ca7ae"/><stop offset=".46" stop-color="#48778b"/><stop offset="1" stop-color="#1a405b"/>
|
|
</linearGradient>
|
|
<radialGradient id="muzzle">
|
|
<stop stop-color="#f1e8d5"/><stop offset="1" stop-color="#bfccb9"/>
|
|
</radialGradient>
|
|
<pattern id="spots" width="31" height="27" patternUnits="userSpaceOnUse" patternTransform="rotate(-17)">
|
|
<ellipse cx="7" cy="6" rx="3.4" ry="2" fill="#102f4b" opacity=".3"/>
|
|
<ellipse cx="24" cy="17" rx="4.5" ry="2.2" fill="#0b2945" opacity=".24"/>
|
|
<ellipse cx="10" cy="24" rx="1.5" ry="1" fill="#e6efec" opacity=".35"/>
|
|
<path d="m18 6 3-1M2 17l3-1" stroke="#f0d08c" stroke-opacity=".3" 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)" stroke="#d8ad63" stroke-width="1.5"/>
|
|
<path d="m33 189 35-10 42 5 49-12 40 7 54 3-28 14-68 7-56-6-48 9Z" fill="#c8d5cc" opacity=".28"/>
|
|
<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="#143b59" opacity=".55"/>
|
|
<path d="m68 185 20 9 13 3-18 24m74-18 11 13-8 13m57-40-10 9m53 16 12 6" stroke="#9ac2c1" 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="#e7c77e" stroke-width="2" stroke-linecap="round" opacity=".65"/>
|
|
<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="#1b4561" stroke="#d8ad63" stroke-width="1"/>
|
|
<path d="m240 180 30 11m-35-5 22 16" stroke="#8eb7bd" stroke-width="1" opacity=".6"/>
|
|
<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="#285b73" stroke="#d8ad63" stroke-width="1"/>
|
|
<path d="m66 183 9-13m-5 17 10-14" stroke="#9bc3c0" stroke-width="1" opacity=".65"/>
|
|
</g>
|
|
<use href="#body" fill="url(#coat)" stroke="#e0b66b" stroke-width="1.5"/>
|
|
<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="#b1d1ce" stroke-width="3" stroke-linecap="round" opacity=".26"/>
|
|
<path d="M81 108c17 15 43 17 59 5M78 118c13 10 32 13 45 10" stroke="#173e5a" stroke-width="2" stroke-linecap="round" opacity=".5"/>
|
|
<path d="M81 112c14 12 37 15 53 9" stroke="#f0d08c" stroke-width="1.3" stroke-linecap="round" opacity=".5"/>
|
|
<!-- Маленькая округлая голова плавно переходит в широкую шею. -->
|
|
<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)" stroke="#e0b66b" stroke-width="1.2"/>
|
|
<path d="M91 44c9-12 28-17 41-8" stroke="#f0d08c" stroke-width="2" stroke-linecap="round" opacity=".72"/>
|
|
<path d="M87 64q9-11 18-5m19-1q9-8 17 2" stroke="#214d68" stroke-width="3" stroke-linecap="round" opacity=".75"/>
|
|
<g class="eyes">
|
|
<ellipse cx="99" cy="65" rx="5.5" ry="6.5" fill="#071c37"/>
|
|
<ellipse cx="133" cy="64" rx="5" ry="6" fill="#071c37"/>
|
|
<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="#d8ad63" stroke-width="1.5" stroke-linecap="round"/>
|
|
<path d="m117 80 1 6m-10 1q10 4 18-1" stroke="#24536a" stroke-width="1.4" stroke-linecap="round"/>
|
|
<g fill="#286079" 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="#f0d08c" 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="#d8ad63" stroke-width="1.2"/>
|
|
<path d="M149 149c-1 14 9 33 23 41" stroke="#b4d1cc" stroke-width="1.5" stroke-linecap="round" opacity=".65"/>
|
|
<path d="m174 185 8 9m-12-6 6 7m-12-4 5 4" stroke="#173c58" stroke-width="1.2" stroke-linecap="round"/>
|
|
</g>
|
|
</svg>
|