Перерисовать байкальскую нерпу и анимацию ластов
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 |
+13
-79
@@ -4127,87 +4127,21 @@ body.menu-open{overflow:hidden}
|
|||||||
.baikal-nav a:after,.baikal-nav a:before{display:none!important}
|
.baikal-nav a:after,.baikal-nav a:before{display:none!important}
|
||||||
.baikal-nav a:hover{color:#e2b36d!important}
|
.baikal-nav a:hover{color:#e2b36d!important}
|
||||||
|
|
||||||
/* Нерпа отдыхает на камне в нижней части шапки. */
|
/* Самостоятельный SVG: старые стили плавающих нерп не влияют на рисунок. */
|
||||||
.baikal-header .free-seal{
|
.baikal-header .hero-nerpa{
|
||||||
display:block!important;
|
|
||||||
left:auto!important;
|
|
||||||
right:9%!important;
|
|
||||||
bottom:8%!important;
|
|
||||||
width:190px!important;
|
|
||||||
height:142px!important;
|
|
||||||
z-index:8!important;
|
|
||||||
opacity:.88!important;
|
|
||||||
animation:sealResting 5.4s ease-in-out infinite!important;
|
|
||||||
}
|
|
||||||
.baikal-header .free-seal-inner{
|
|
||||||
position:absolute!important;
|
|
||||||
left:10px!important;
|
|
||||||
bottom:27px!important;
|
|
||||||
width:150px!important;
|
|
||||||
height:125px!important;
|
|
||||||
z-index:2!important;
|
|
||||||
animation:sealBob 5.4s ease-in-out infinite!important;
|
|
||||||
filter:drop-shadow(0 5px 7px rgba(0,11,35,.3));
|
|
||||||
}
|
|
||||||
.baikal-header .seal-rock{
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
left:0;
|
right:8%;
|
||||||
bottom:0;
|
bottom:7%;
|
||||||
width:190px;
|
display:block;
|
||||||
height:52px;
|
width:clamp(200px,19vw,290px);
|
||||||
z-index:1;
|
height:auto;
|
||||||
border:1px solid rgba(218,178,121,.42);
|
z-index:8;
|
||||||
border-radius:52% 45% 28% 32%;
|
pointer-events:none;
|
||||||
background:linear-gradient(160deg,#8193a1 0%,#4f6375 48%,#263d55 100%);
|
|
||||||
box-shadow:inset 12px 8px 18px rgba(255,255,255,.13),0 10px 18px rgba(0,9,30,.28);
|
|
||||||
transform:rotate(-3deg);
|
|
||||||
}
|
|
||||||
.baikal-header .seal-rock:after{
|
|
||||||
content:"";
|
|
||||||
position:absolute;
|
|
||||||
left:24px;
|
|
||||||
top:10px;
|
|
||||||
width:72px;
|
|
||||||
height:5px;
|
|
||||||
border-radius:50%;
|
|
||||||
background:rgba(221,218,199,.24);
|
|
||||||
transform:rotate(-8deg);
|
|
||||||
}
|
|
||||||
.baikal-header .free-seal .seal-flipper{
|
|
||||||
transform-box:fill-box;
|
|
||||||
transform-origin:center top;
|
|
||||||
animation:sealFlipperClap 1.15s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.baikal-header .free-seal .seal-flipper-right{animation-delay:-.58s}
|
|
||||||
.baikal-header .free-seal .seal-eye{fill:#f7e5cf;stroke:currentColor;stroke-width:1.2}
|
|
||||||
.baikal-header .free-seal .seal-pupil{fill:#081a35;stroke:none}
|
|
||||||
.baikal-header .free-seal .seal-nose{fill:#2a1930;stroke:none}
|
|
||||||
.baikal-header .free-seal .seal-flipper{stroke-width:1.6}
|
|
||||||
.baikal-header .free-seal .seal-smile,
|
|
||||||
.baikal-header .free-seal .seal-whiskers{stroke-width:1.35}
|
|
||||||
@keyframes sealResting{
|
|
||||||
0%,100%{transform:translateY(0) rotate(-1deg)}
|
|
||||||
50%{transform:translateY(-4px) rotate(1deg)}
|
|
||||||
}
|
|
||||||
@keyframes sealFlipperClap{
|
|
||||||
0%,100%{transform:rotate(-12deg)}
|
|
||||||
50%{transform:rotate(22deg) translateY(3px)}
|
|
||||||
}
|
}
|
||||||
@media(max-width:620px){
|
@media(max-width:620px){
|
||||||
.baikal-header .free-seal{
|
.baikal-header .hero-nerpa{
|
||||||
right:3%!important;
|
right:2%;
|
||||||
bottom:4%!important;
|
bottom:5%;
|
||||||
width:132px!important;
|
width:clamp(145px,42vw,185px);
|
||||||
height:100px!important;
|
|
||||||
opacity:.72!important;
|
|
||||||
}
|
}
|
||||||
.baikal-header .free-seal-inner{width:108px!important;height:90px!important;left:8px!important;bottom:19px!important}
|
|
||||||
.baikal-header .seal-rock{width:132px;height:37px}
|
|
||||||
.baikal-header .seal-rock:after{left:16px;top:7px;width:50px;height:3px}
|
|
||||||
}
|
|
||||||
@media(prefers-reduced-motion:reduce){
|
|
||||||
.baikal-header .free-seal,
|
|
||||||
.baikal-header .free-seal-inner,
|
|
||||||
.baikal-header .free-seal .seal-flipper,
|
|
||||||
.baikal-header .free-seal .seal-tail{animation:none!important}
|
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-34
@@ -186,40 +186,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="free-seal" aria-hidden="true">
|
<img class="hero-nerpa" src="assets/images/nerpa.svg" width="320" height="250" alt="" aria-hidden="true" decoding="async">
|
||||||
<span class="seal-rock"></span>
|
|
||||||
<div class="free-seal-inner">
|
|
||||||
<svg viewBox="0 0 180 150" aria-hidden="true">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="seal-body-fill" x1="0" y1="0" x2="1" y2="1">
|
|
||||||
<stop offset="0" stop-color="#d7c4a5"/>
|
|
||||||
<stop offset=".48" stop-color="#8d806f"/>
|
|
||||||
<stop offset="1" stop-color="#4b4d50"/>
|
|
||||||
</linearGradient>
|
|
||||||
<radialGradient id="seal-muzzle-fill" cx="50%" cy="35%" r="70%">
|
|
||||||
<stop offset="0" stop-color="#f4e7d0"/>
|
|
||||||
<stop offset="1" stop-color="#b9a98f"/>
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
<g stroke="#273447" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path class="seal-flipper seal-flipper-left" fill="#67635f" d="M61 94C47 96 33 108 31 123c8 9 23 5 39-13l7-12Z"/>
|
|
||||||
<path class="seal-flipper seal-flipper-right" fill="#5b5957" d="M119 96c15 1 29 12 32 27-8 9-23 5-39-13l-7-12Z"/>
|
|
||||||
<path class="seal-body" fill="url(#seal-body-fill)" stroke-width="2.2" d="M48 116C40 99 43 76 55 61c9-11 21-17 35-18 18-2 34 5 44 19 10 14 13 38 4 54-9 16-78 18-90 0Z"/>
|
|
||||||
<ellipse class="seal-belly" fill="#b8a990" stroke="none" cx="90" cy="96" rx="25" ry="34" opacity=".72"/>
|
|
||||||
<ellipse class="seal-head" fill="url(#seal-body-fill)" stroke-width="2.2" cx="90" cy="48" rx="35" ry="30"/>
|
|
||||||
<ellipse class="seal-muzzle" fill="url(#seal-muzzle-fill)" stroke="none" cx="90" cy="59" rx="22" ry="15"/>
|
|
||||||
<circle class="seal-eye" cx="77" cy="47" r="5"/>
|
|
||||||
<circle class="seal-pupil" cx="78" cy="47" r="2"/>
|
|
||||||
<circle class="seal-eye" cx="103" cy="47" r="5"/>
|
|
||||||
<circle class="seal-pupil" cx="104" cy="47" r="2"/>
|
|
||||||
<path class="seal-nose" d="M86 57q4-5 8 0-2 6-4 6-2 0-4-6Z"/>
|
|
||||||
<path class="seal-smile" fill="none" stroke-width="1.7" d="M90 63q-6 8-13 1M90 63q6 8 13 1"/>
|
|
||||||
<path class="seal-whiskers" fill="none" stroke-width="1.2" d="M82 60 60 55M82 64 58 65M98 60l22-5M98 64l24 1"/>
|
|
||||||
<path class="seal-spot" fill="none" stroke="#d9c7a8" stroke-width="2" opacity=".62" d="M62 79q8-5 16 0M112 82q8-5 15 1M68 109q6-4 12 0"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-bubbles hero-bubbles-front">
|
<div class="hero-bubbles hero-bubbles-front">
|
||||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||||
|
|||||||
Reference in New Issue
Block a user