Есть один хороший скрипт, который к сожалению, работает только на сайте codepen.io.
Я пытаюсь портировать его на SVG. Сначала я делал с помощью <animate> и <animateTransform>. Но что-то не получалось, решил переделать на SVG+CSS. Но, получается тоже как-то не так. На скрипте, что на сайте codepen, часы работают как-то по-живому. А у меня получаются какие-то с нереальной физикой.
html,
body {
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
background: #4873a9;
}
* {
box-sizing: border-box;
}
svg {
position: absolute;
width: 600px;
height: 600px;
left: calc(50vw - 300px);
top: calc(50vh - 300px);
}
:root {
--animation-duration: 10s;
}
.topSand {
animation: topSand var(--animation-duration) linear infinite;
}
.botSand {
animation: botSand var(--animation-duration) linear infinite;
}
.topShadow {
animation: topShadow var(--animation-duration) linear infinite;
}
.botShadow {
animation: botShadow var(--animation-duration) linear infinite;
}
.rightShine {
animation: rightShine var(--animation-duration) linear infinite;
}
.leftShine {
animation: leftShine var(--animation-duration) linear infinite;
}
.allGrouped {
animation: rotate var(--animation-duration) linear infinite;
transform-origin: 306px 275px;
}
.drip {
animation: drip var(--animation-duration) linear infinite;
stroke-miterlimit: 10;
}
@keyframes topSand {
0% {
y: 90px;
}
90% {
y: 280px;
}
100% {
y: 280px;
}
}
@keyframes botSand {
0% {
cy: 580px;
rx: 47.5;
}
5% {
cy: 580px;
rx: 47.5;
}
90% {
cy: 415px;
rx: 247.5;
}
93% {
cy: 415px;
rx: 247.5;
}
100% {
cy: 415px;
rx: 247.5;
cy: 375px;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
90% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes topShadow {
0% {
opacity: 0.12;
}
90% {
opacity: 0.12;
}
100% {
opacity: 0;
}
}
@keyframes botShadow {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0.12;
}
}
@keyframes rightShine {
0% {
opacity: 0.1;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0.28;
}
}
@keyframes leftShine {
0% {
opacity: 0.28;
}
90% {
opacity: 0.28;
}
100% {
opacity: 0.1;
}
}
@keyframes drip {
0% {
stroke-dashoffset: 180px;
stroke-dasharray: 1px 86px;
}
5% {
stroke-dashoffset: -186px;
stroke-dasharray: 1px, 2px;
}
8% {
stroke-dashoffset: 0;
stroke-dasharray: 1px, 1px;
}
11% {
stroke-dashoffset: -186px;
stroke-dasharray: 1px, 0px;
}
84.9% {
stroke-dashoffset: 0px;
stroke-dasharray: 1px, 0px;
}
88% {
stroke-dashoffset: 0px;
stroke-dasharray: 1px, 1px;
}
89.9% {
stroke-dashoffset: 0px;
stroke-dasharray: 1px, 48px;
}
90% {
stroke-dashoffset: -186px;
stroke-dasharray: 0px, 196px;
}
100% {
stroke-dashoffset: -186px;
stroke-dasharray: 0px, 196px;
}
}<svg viewBox="0 0 600 600" width="600" height="600" xml:space="preserve">
<defs>
<circle id="grain" cx="0" cy="0" r="1" fill="#F7E0B7"></circle>
<clipPath id="topMask">
<path
class="topMask"
fill="#6D00BF"
d="M316.7,266.3c-0.2,0.1-3.7,1.5-4.8,2.5c0,0,0,0,0,0.1c-1.8,1.5-3.2,4.5-3.2,7.1l-1.6,0l-1.4,0c0-2.6-1.4-5.6-3.2-7.1c0,0,0-0.1,0-0.1c-1.1-1-4.6-2.5-4.8-2.5C237.1,249.5,195,174,188,91h119h119.3C419.3,174,377.2,249.5,316.7,266.3z"
></path>
</clipPath>
<clipPath id="botMask">
<path
class="botMask"
fill="#6D00BF"
d="M316.7,283.7c-0.2-0.1-3.7-1.5-4.8-2.5c0,0,0,0,0-0.1c-1.8-1.5-3.2-4.5-3.2-7.1l-1.6,0l-1.4,0c0,2.6-1.4,5.6-3.2,7.1c0,0,0,0.1,0,0.1c-1.1,1-4.6,2.5-4.8,2.5C237.1,300.5,195,376,188,459h119h119.3C419.3,376,377.2,300.5,316.7,283.7z"
></path>
</clipPath>
</defs>
<g class="allGrouped">
<g clip-path="url(#topMask)">
<rect
class="topSand"
x="0"
y="90"
fill="#F7E0B7"
width="600"
height="185"
></rect>
</g>
<g clip-path="url(#botMask)">
<ellipse
class="botSand"
fill="#F7E0B7"
cx="307.5"
cy="580"
rx="47.5"
ry="120"
></ellipse>
</g>
<rect
class="top"
x="175"
y="70"
fill="#F1AF31"
width="263"
height="21"
></rect>
<line
class="drip"
fill="none"
stroke="#F7E0B7"
stroke-dashoffset="-186"
stroke-dasharray="1, 1"
stroke-width="2"
stroke-miterlimit="10"
x1="307"
y1="275"
x2="307"
y2="460"
></line>
<path
class="body"
opacity="0.23"
fill="#FFFFFF"
d="M432.2,459H180.8c4.3-90,49.8-165,108.7-175.2c6.1-1,10.3-5.2,10.3-8.8c0-3-4.2-7.8-10.3-8.8C230.6,256,185.2,180.5,180.8,91h251.3c-4.3,89.6-49.7,166.3-108.8,175.2c-6,0.9-10.2,6.1-10.2,8.8c0,2.7,4.3,7.9,10.2,8.8C382.5,292.7,427.8,369,432.2,459z"
></path>
<path
class="topShadow"
fill="#121212"
opacity="0.12"
d="M432.5,91h-252c0.3,4.1,0.8,8.8,1.4,14h249.3C432,98.3,432.2,95,432.5,91z"
style="opacity: 0.12"
></path>
<path
class="botShadow"
fill="#121212"
opacity="0"
d="M432.5,459h-252c0.3-4.1,0.8-8.8,1.4-14h249.3C432,451.7,432.2,455,432.5,459z"
style="opacity: 0"
></path>
<path
class="rightShine"
opacity="0.10"
fill="#FFFFFF"
d="M316.6,283.8c-5.2-1.2-8-6.1-8-8.8c0-2.7,2.8-7.5,8-8.8c58.6-14,105.6-87,106.5-175.2h-22.8c-3.6,85.6-38.3,168.8-102.8,177.2c0,0,8,0.7,8,6.8c0,6.2-8,6.8-8,6.8c64.5,8.3,99.2,91.6,102.8,177.2h22.8C422.3,370.8,375.3,297.8,316.6,283.8z"
style="opacity: 0.1"
></path>
<path
class="leftShine"
opacity="0.28"
fill="#FFFFFF"
d="M297,283.8c5.2-1.2,8-6.1,8-8.8c0-2.7-2.8-7.5-8-8.8c-58.6-14-105.6-87-106.5-175.2h22.8c3.6,85.6,38.3,168.8,102.8,177.2c0,0-8,0.7-8,6.8c0,6.2,8,6.8,8,6.8c-64.5,8.3-99.2,91.6-102.8,177.2h-22.8C191.4,370.8,238.4,297.8,297,283.8z"
style="opacity: 0.28"
></path>
<rect
class="bottom"
x="175"
y="459"
fill="#F1AF31"
width="263"
height="21"
></rect>
</g>
</svg>В общем, более конкретизирую вопрос.
Брызги песка, как у автора скрипта на codepen, я даже и не пытаюсь сделать. Но струя из точек песка, которая должна падать вниз, у меня то зависает в воздухе, то и вовсе летит вверх...
Хочу сделать струю из точек, которые с небольшой скоростью падают вниз. Для этого подкручиваю два свойства в CSS: stroke-dasharray и stroke-dashoffset. Свойство stroke-dasharray работает как надо. А на stroke-dashoffset, который должен отвечать за движение точек вниз, картинка вообще не реагирует.
Почему?
<animate>, надо это тоже переделать обратно)) – DiD Apr 22 '21 at 07:13