I have a animation made in HTML & CSS on codepen.io, here's the animation - https://codepen.io/akshzyx/pen/OJOqpav.
It works fine on codepen but when tried to used in personal website, animations stop working.
Eyes blinking is the only thing that works on website. Tried in 2-3 browsers, same everywhere.
How can I fix this?
// --- Variables --- //
$hover_top: 80px;
$hover_bottom: 30px;
html,
body {
height: 100%;
}
body {
background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center / 70%;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
animation: hover 1.1s ease-in-out 0s infinite alternate
}
#head {
animation: hover 1.1s ease-in-out 0.05s infinite alternate
}
#arms {
animation: hover 1.1s ease-in-out 0.1s infinite alternate
}
#left_arm {
transform-origin: center right;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate
}
#right_arm {
transform-origin: center left;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate
}
#eyes ellipse {
transform-origin: center center;
animation: eyes_blink 2s ease-out 0s infinite alternate
}
#shadow {
transform-origin: center center;
animation: shadow 1.1s ease-in-out 0s infinite alternate
}
// ---- Animations
#keyframes hover {
0% {
transform: translate3d(0, $hover_top, 0)
}
100% {
transform: translate3d(0, $hover_bottom, 0)
}
}
#keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#keyframes arms_bounce_left {
0% {
transform: translate3d(0, $hover_top, 0)rotate(0deg)
}
100% {
transform: translate3d(0, $hover_bottom, 0)rotate(-10deg)
}
}
#keyframes arms_bounce_right {
0% {
transform: translate3d(0, $hover_top, 0)rotate(0deg)
}
100% {
transform: translate3d(0, $hover_bottom, 0)rotate(10deg)
}
}
#keyframes eyes_blink {
0% {
transform: scale(1, 1)
}
90% {
transform: scale(1, 1)
}
95% {
transform: scale(0.8, 0)
}
100% {
transform: scale(1, 1)
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6"/>
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z"/>
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z"/>
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z"/>
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z"/>
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z"/>
<path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z"/>
<path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z"/>
<path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z"/>
<path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z"/>
<path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z"/>
<path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z"/>
<path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z"/>
<path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z"/>
<path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z"/>
<g id="percent_meter">
<path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z"/>
<path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z"/>
<path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z"/>
<polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 "/>
<polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 "/>
<path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z"/>
<path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z"/>
<path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z"/>
<path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z"/>
</g>
</g>
<g id="head">
<path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z"/>
<path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z"/>
<path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z"/>
<path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z"/>
<g id="eyes">
<ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17"/>
<ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17"/>
</g>
<path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z"/>
<g id="Robot_hat">
<path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z"/>
<circle fill="#F0C419" cx="300.4" cy="207" r="8.1"/>
<circle fill="#E64C3C" cx="324.7" cy="206" r="8.1"/>
<circle fill="#4EBA64" cx="275.3" cy="206" r="8.1"/>
</g>
</g>
</g>
</svg>
You should use the Complied CSS to get the animations as you can't directly use the SCSS or SASS in your code as it is needed to be compiled to CSS before using.
You can you some of online tools like Json Formatter's SCSS to CSS tool or any NPM packages like node-sass, scss-compile etc.
html,
body {
height: 100%;
}
body {
background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center/70%;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
-webkit-animation: hover 1.1s ease-in-out 0s infinite alternate;
animation: hover 1.1s ease-in-out 0s infinite alternate;
}
#head {
-webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate;
animation: hover 1.1s ease-in-out 0.05s infinite alternate;
}
#arms {
-webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate;
animation: hover 1.1s ease-in-out 0.1s infinite alternate;
}
#left_arm {
transform-origin: center right;
-webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
}
#right_arm {
transform-origin: center left;
-webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
}
#eyes ellipse {
transform-origin: center center;
-webkit-animation: eyes_blink 2s ease-out 0s infinite alternate;
animation: eyes_blink 2s ease-out 0s infinite alternate;
}
#shadow {
transform-origin: center center;
-webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate;
animation: shadow 1.1s ease-in-out 0s infinite alternate;
}
#-webkit-keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#-webkit-keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#-webkit-keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#-webkit-keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#-webkit-keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
#keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6" />
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z" />
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z" />
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z" />
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z" />
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z" />
<path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z" />
<path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z" />
<path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z" />
<path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z" />
<path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z" />
<path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z" />
<path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z" />
<path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z" />
<path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z" />
<g id="percent_meter">
<path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z" />
<path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z" />
<path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z" />
<polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 " />
<polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 " />
<path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z" />
<path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z" />
<path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z" />
<path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z" />
<path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z" />
<path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z" />
<path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z" />
</g>
</g>
<g id="head">
<path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z" />
<path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z" />
<path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z" />
<path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z" />
<g id="eyes">
<ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17" />
<ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17" />
</g>
<path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z" />
<g id="Robot_hat">
<path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z" />
<circle fill="#F0C419" cx="300.4" cy="207" r="8.1" />
<circle fill="#E64C3C" cx="324.7" cy="206" r="8.1" />
<circle fill="#4EBA64" cx="275.3" cy="206" r="8.1" />
</g>
</g>
</g>
</svg>
JsFiddle : https://jsfiddle.net/sh9wqay5/
Export your code pen
Extract the zip
In the /dist directory
The index.html will work
The problem is you have to use compiled CSS code,and not the scss
If you use VSCode you can install "Live SASS Compiler"
see this other SO Question and its answers
RUN THE WORKING SNIPPET BELOW
html, body {
height: 100%;
}
body {
background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center/70%;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
-webkit-animation: hover 1.1s ease-in-out 0s infinite alternate;
animation: hover 1.1s ease-in-out 0s infinite alternate;
}
#head {
-webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate;
animation: hover 1.1s ease-in-out 0.05s infinite alternate;
}
#arms {
-webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate;
animation: hover 1.1s ease-in-out 0.1s infinite alternate;
}
#left_arm {
transform-origin: center right;
-webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
}
#right_arm {
transform-origin: center left;
-webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
}
#eyes ellipse {
transform-origin: center center;
-webkit-animation: eyes_blink 2s ease-out 0s infinite alternate;
animation: eyes_blink 2s ease-out 0s infinite alternate;
}
#shadow {
transform-origin: center center;
-webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate;
animation: shadow 1.1s ease-in-out 0s infinite alternate;
}
#-webkit-keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#-webkit-keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#-webkit-keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#-webkit-keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#-webkit-keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
#keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6"/>
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z"/>
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z"/>
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z"/>
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z"/>
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z"/>
<path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z"/>
<path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z"/>
<path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z"/>
<path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z"/>
<path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z"/>
<path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z"/>
<path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z"/>
<path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z"/>
<path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z"/>
<g id="percent_meter">
<path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z"/>
<path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z"/>
<path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z"/>
<polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 "/>
<polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 "/>
<path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z"/>
<path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z"/>
<path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z"/>
<path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z"/>
</g>
</g>
<g id="head">
<path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z"/>
<path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z"/>
<path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z"/>
<path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z"/>
<g id="eyes">
<ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17"/>
<ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17"/>
</g>
<path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z"/>
<g id="Robot_hat">
<path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z"/>
<circle fill="#F0C419" cx="300.4" cy="207" r="8.1"/>
<circle fill="#E64C3C" cx="324.7" cy="206" r="8.1"/>
<circle fill="#4EBA64" cx="275.3" cy="206" r="8.1"/>
</g>
</g>
</g>
</svg>
Related
I'm trying to copy the color value from the <h1> element to <path> elements.
<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>
<svg>
<path d="M10 10"></path>
<path d="M10 10"></path>
<path d="M10 10"></path>
</svg>
</div>
</div>
mycolor_element = document.querySelectorAll('#my_id h1')[0];
let my_value = window.getComputedStyle(mycolor_element).color;
document.querySelectorAll('#my_element svg path')[0].style.fill = my_value;
I expect that if my <h1> is orange then my <path>s are also orange.
You can use querySelector (if is just one element) with window.getComputedStyle for catch color of element then set it to the svg like:
const mycolor_element = window.getComputedStyle(document.querySelector('#my_id > h1')).color;
document.querySelectorAll('#my_element > svg > path').forEach(el => el.style.fill = mycolor_element);
h1 {
color: orange
}
<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>
<svg>
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
You can simplify this task by applying a fill:currentColor property value to your <path> elements:
path{
fill:currentColor;
}
This way all paths can inherit the fill color from the parent element's (text) color property:
let h1 = document.querySelector('#my_id h1');
let h1Color = window.getComputedStyle(h1).color;
let svgWrap = document.getElementById('svgWrap');
svgWrap.style.color = h1Color;
.colorOrange{
color:orange
}
.svgCurrentColor path{
fill:currentColor;
}
<div class='colorOrange'>
<h1>Inherit color via css</h1>
<div class='svgWrap'>
<svg class="svgCurrentColor">
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
<div id='my_id'>
<h1 style="color:purple">Inherit color via js</h1>
<div id='svgWrap' >
<svg class="svgCurrentColor">
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
So you might not need any javaScript at all.
document.querySelectorAll
This method is not used to select one element only.
Use the
document.querySelector
method instead.
It's kind of long but recently I was working on a smile face whose eyes track mouse position and I succeeded doing it because I use chrome browser!
but when I tested this in firefox, there was an issue -
so the mouse enters the smile yellow ball from a position let say a and the eyes have x-y position with respect to 'a' now when next time the mouse enters or exits the yellow smile ball the eyes glitches with the last position of interaction!
see in video
https://drive.google.com/file/d/1wx5Lz2Z6h6ZZpeH7AYboGTOP-rSHLS_9/view?usp=sharing
const eyeBalls = document.querySelectorAll("[data-eye-ball]")
const cursor = document.querySelector("#cursor")
function test(eyeball) {
const eyeballRect = eyeball.getBoundingClientRect()
window.addEventListener("mousemove", (e) => {
cursor.style.left = e.pageX + "px"
cursor.style.top = e.pageY + "px"
let mouseP = e.y - (eyeballRect.y + eyeballRect.height / 2)
let mouseB = e.x - (eyeballRect.x + eyeballRect.width / 2)
let mouseH = Math.hypot(mouseP, mouseB)
let eyeBallH = 3
let eyeBallSize = 1
if (e.target.closest(".eye")) {
eyeBallH = 0
eyeBallSize = 1.25
}
let eyeBallP = (mouseP / mouseH) * eyeBallH
let eyeBallB = (mouseB / mouseH) * eyeBallH
eyeball.style.transform = `translate(${eyeBallB}vmin, ${eyeBallP}vmin) scale(${eyeBallSize})`
})
}
test(eyeBalls[0])
test(eyeBalls[1])
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-color: hsl(240, 5%, 10%);
--eye-ball-bg: hsl(240, 5%, 25%);
--accent: hsl(40, 90%, 50%);
--mid-color: hsl(240, 5%, 65%);
--mouth-bg: hsl(40, 80%, 40%);
--light-color: hsl(0, 0%, 97%);
--red: hsl(10, 80%, 40%);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
body {
width: 100%;
height: 100vh;
background-color: var(--dark-color);
color: var(--light-color);
cursor: none;
}
.smile-box {
width: 100vmin;
height: 100vmin;
flex-grow: 0;
flex-shrink: 0;
}
.smile-circle {
width: 75vmin;
height: 75vmin;
background-color: var(--accent);
border-radius: 50%;
position: relative;
}
/* eyes */
.eye {
width: 16vmin;
height: 16vmin;
border-radius: 50%;
background-color: var(--light-color);
position: absolute;
top: 32%;
}
.left-eye {
left: 30%;
transform: translate(-50%, -50%);
}
.right-eye {
right: 30%;
transform: translate(50%, -50%);
}
.eye-ball {
width: 8vmin;
height: 8vmin;
background-color: var(--eye-ball-bg);
border-radius: 50%;
transition: transform 100ms ease;
}
/* mouth */
.mouth-wraper {
height: 20vmin;
width: 40vmin;
border-radius: 0vmin 0vmin 20vmin 20vmin;
background-color: var(--mouth-bg);
transition: border-radius 250ms ease, height 250ms ease, width 250ms ease;
position: absolute;
left: 50%;
bottom: 30%;
transform: translate(-50%, 50%);
}
.smile-circle:hover .mouth-wraper {
width: 35vmin;
height: 10vmin;
border-radius: 5rem;
}
/* cursor */
#cursor {
width: 3rem;
height: 3rem;
border-radius: 50%;
pointer-events: none;
position: fixed;
transform: translate(-50%, -50%);
left: 5%;
top: 5%;
display: flex;
align-items: center;
justify-content: center;
}
#cursor svg {
transition: fill 100ms ease;
}
.smile-circle:hover #cursor svg {
fill: hsl(240, 100%, 65%);
}
<body class="flex-center">
<div class="smile-box flex-center">
<div class="smile-circle">
<div class="eye left-eye flex-center">
<div class="eye-ball" data-eye-ball></div>
</div>
<div class="eye right-eye flex-center">
<div class="eye-ball" data-eye-ball></div>
</div>
<div class="mouth-wraper"></div>
<div id="cursor">
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
width="48"
fill="#ffffff"
>
<path
d="M17 25.5Q17.65 25.5 18.075 25.05Q18.5 24.6 18.5 24Q18.5 23.4 18.075 22.95Q17.65 22.5 17 22.5Q16.4 22.5 15.95 22.95Q15.5 23.4 15.5 24Q15.5 24.6 15.95 25.05Q16.4 25.5 17 25.5ZM27.5 19.5Q28.15 19.5 28.575 19.05Q29 18.6 29 18Q29 17.4 28.575 16.95Q28.15 16.5 27.5 16.5Q26.9 16.5 26.45 16.95Q26 17.4 26 18Q26 18.6 26.45 19.05Q26.9 19.5 27.5 19.5ZM20.5 19.5Q21.1 19.5 21.55 19.05Q22 18.6 22 18Q22 17.4 21.55 16.95Q21.1 16.5 20.5 16.5Q19.9 16.5 19.45 16.95Q19 17.4 19 18Q19 18.6 19.45 19.05Q19.9 19.5 20.5 19.5ZM20.5 31.5Q21.1 31.5 21.55 31.05Q22 30.6 22 30Q22 29.4 21.55 28.95Q21.1 28.5 20.5 28.5Q19.9 28.5 19.45 28.95Q19 29.4 19 30Q19 30.6 19.45 31.05Q19.9 31.5 20.5 31.5ZM22.5 44Q22.1 44 21.8 43.7Q21.5 43.4 21.5 43Q21.5 42.6 21.8 42.3Q22.1 42 22.5 42H23V37.45Q20.75 37.2 18.75 36.375Q16.75 35.55 15.15 34.2L11.95 37.4L12.35 37.8Q12.6 38.05 12.675 38.425Q12.75 38.8 12.35 39.2Q12.05 39.5 11.65 39.5Q11.25 39.5 10.95 39.2L8.8 37.1Q8.5 36.8 8.5 36.4Q8.5 36 8.8 35.65Q9.1 35.35 9.475 35.35Q9.85 35.35 10.25 35.7L10.55 36L13.75 32.8Q12.45 31.15 11.625 29.2Q10.8 27.25 10.55 25H6V25.5Q6 25.9 5.7 26.2Q5.4 26.5 5 26.5Q4.6 26.5 4.3 26.2Q4 25.9 4 25.5V22.5Q4 22.1 4.3 21.8Q4.6 21.5 5 21.5Q5.4 21.5 5.7 21.8Q6 22.1 6 22.5V23H10.55Q10.8 20.75 11.625 18.8Q12.45 16.85 13.75 15.2L10.55 12L10.2 12.35Q9.9 12.65 9.5 12.65Q9.1 12.65 8.8 12.35Q8.5 12.05 8.5 11.625Q8.5 11.2 8.8 10.9L10.9 8.8Q11.2 8.5 11.625 8.5Q12.05 8.5 12.35 8.8Q12.65 9.05 12.65 9.475Q12.65 9.9 12.35 10.15L11.95 10.55L15.15 13.75Q16.8 12.45 18.75 11.625Q20.7 10.8 22.95 10.55V6H22.5Q22.1 6 21.8 5.7Q21.5 5.4 21.5 5Q21.5 4.6 21.8 4.3Q22.1 4 22.5 4H25.5Q25.9 4 26.2 4.3Q26.5 4.6 26.5 5Q26.5 5.4 26.2 5.7Q25.9 6 25.5 6H25V10.55Q27.25 10.8 29.2 11.625Q31.15 12.45 32.8 13.75L36 10.55L35.7 10.25Q35.35 9.95 35.325 9.55Q35.3 9.15 35.65 8.8Q35.95 8.5 36.35 8.5Q36.75 8.5 37.05 8.8L39.25 11Q39.55 11.3 39.525 11.675Q39.5 12.05 39.2 12.35Q38.9 12.65 38.5 12.6Q38.1 12.55 37.75 12.25L37.45 11.95L34.25 15.15Q35.55 16.8 36.375 18.775Q37.2 20.75 37.45 23H42V22.5Q42 22.1 42.3 21.8Q42.6 21.5 43 21.5Q43.4 21.5 43.7 21.8Q44 22.1 44 22.5V25.5Q44 25.9 43.7 26.2Q43.4 26.5 43 26.5Q42.6 26.5 42.3 26.2Q42 25.9 42 25.5V25H37.45Q37.2 27.25 36.375 29.225Q35.55 31.2 34.25 32.85L37.45 36.05L37.8 35.7Q38.1 35.4 38.5 35.375Q38.9 35.35 39.2 35.65Q39.5 35.95 39.5 36.375Q39.5 36.8 39.2 37.1L37.1 39.2Q36.8 39.5 36.375 39.5Q35.95 39.5 35.65 39.2Q35.3 38.85 35.35 38.475Q35.4 38.1 35.6 37.85L36 37.45L32.8 34.25Q31.15 35.55 29.2 36.4Q27.25 37.25 25 37.5V42H25.5Q25.9 42 26.2 42.3Q26.5 42.6 26.5 43Q26.5 43.4 26.2 43.7Q25.9 44 25.5 44ZM24 34.5Q28.4 34.5 31.45 31.425Q34.5 28.35 34.5 24Q34.5 19.6 31.45 16.55Q28.4 13.5 24 13.5Q19.65 13.5 16.575 16.55Q13.5 19.6 13.5 24Q13.5 28.35 16.575 31.425Q19.65 34.5 24 34.5ZM24 25.5Q24.6 25.5 25.05 25.05Q25.5 24.6 25.5 24Q25.5 23.4 25.05 22.95Q24.6 22.5 24 22.5Q23.4 22.5 22.95 22.95Q22.5 23.4 22.5 24Q22.5 24.6 22.95 25.05Q23.4 25.5 24 25.5ZM31 25.5Q31.65 25.5 32.075 25.05Q32.5 24.6 32.5 24Q32.5 23.4 32.075 22.95Q31.65 22.5 31 22.5Q30.4 22.5 29.95 22.95Q29.5 23.4 29.5 24Q29.5 24.6 29.95 25.05Q30.4 25.5 31 25.5ZM27.5 31.5Q28.15 31.5 28.575 31.05Q29 30.6 29 30Q29 29.4 28.575 28.95Q28.15 28.5 27.5 28.5Q26.9 28.5 26.45 28.95Q26 29.4 26 30Q26 30.6 26.45 31.05Q26.9 31.5 27.5 31.5ZM24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Z"
/>
</svg>
</div>
</div>
</div>
</body>
PLEASE HELB
I'm trying to rotate the SVG text path alone with an oval path like the moving text forward not
I tried but the current CSS is rotating the whole text and I'm trying is moving forward each text to next
svg {
overflow: visible !important;
padding:50px;
}
svg text{
-webkit-animation: loading 8s linear infinite;
-moz-animation: loading 8s linear infinite;
transform-origin: center
}
#-webkit-keyframes loading {
100%{
webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#-moz-keyframes loading {
100%{
moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<svg class="Oval_text_svg" width="400" fill="#C3A97E" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 746">
<defs>
<pattern id="img1_ad77a587-4b9f-4d4a-9ef6-976c76e4841d" patternUnits="userSpaceOnUse" width="610" height="915">
<image href="https://via.placeholder.com/728x890.png" x="0" y="0"></image>
</pattern>
</defs>
<path fill="url(#img1_ad77a587-4b9f-4d4a-9ef6-976c76e4841d)" id="Oval_text" d="M 255.5 745.5 C 246.8091888427734 745.5 238.0447235107422 744.8538818359375 229.4499053955078 743.5796508789062 C 220.9792785644531 742.3237915039062 212.4674530029297 740.42724609375 204.1510009765625 737.9429321289062 C 187.7884521484375 733.0548095703125 171.6926422119141 725.7604370117188 156.310546875 716.2623901367188 C 141.2030944824219 706.933837890625 126.6308212280273 695.3866577148438 112.9986343383789 681.9414672851562 C 99.49217987060547 668.620361328125 86.79063415527344 653.3209228515625 75.24672698974609 636.46826171875 C 63.70054626464844 619.6121826171875 53.21763610839844 601.0636596679688 44.08917999267578 581.3378295898438 C 34.87191009521484 561.4202880859375 26.95518112182617 540.1268920898438 20.5587272644043 518.0492553710938 C 14.04345417022705 495.5616455078125 9.039545059204102 472.0283508300781 5.685999870300293 448.1030883789062 C 2.244818210601807 423.552734375 0.5 398.2844543457031 0.5 373 C 0.5 347.7155456542969 2.244818210601807 322.447265625 5.685999870300293 297.8969116210938 C 9.039545059204102 273.9716491699219 14.04345417022705 250.4383697509766 20.5587272644043 227.9507293701172 C 26.95518112182617 205.8730926513672 34.87191009521484 184.5797271728516 44.08917999267578 164.6621856689453 C 53.21763610839844 144.9363708496094 63.70054626464844 126.3878173828125 75.24672698974609 109.5317306518555 C 86.79063415527344 92.67909240722656 99.49217987060547 77.379638671875 112.9986343383789 64.05854797363281 C 126.6308212280273 50.61336517333984 141.2030944824219 39.06618118286133 156.310546875 29.73763656616211 C 171.6926422119141 20.23954582214355 187.7884521484375 12.94518184661865 204.1510009765625 8.057090759277344 C 212.4674530029297 5.572727203369141 220.9792785644531 3.676181793212891 229.4499053955078 2.420363664627075 C 238.0447235107422 1.146090865135193 246.8091888427734 0.5 255.5 0.5 C 264.1908264160156 0.5 272.9552612304688 1.146090865135193 281.5500793457031 2.420363664627075 C 290.0207214355469 3.676181793212891 298.5325317382812 5.572727203369141 306.8489990234375 8.057090759277344 C 323.2115478515625 12.94518184661865 339.307373046875 20.23954582214355 354.689453125 29.73763656616211 C 369.7969055175781 39.06618118286133 384.3691711425781 50.61336517333984 398.0013732910156 64.05854797363281 C 411.5078125 77.379638671875 424.2093505859375 92.67909240722656 435.7532653808594 109.5317306518555 C 447.2994689941406 126.3878173828125 457.7823486328125 144.9363708496094 466.9108276367188 164.6621856689453 C 476.1280822753906 184.5797271728516 484.0448303222656 205.8730926513672 490.4412841796875 227.9507293701172 C 496.95654296875 250.4383697509766 501.96044921875 273.9716491699219 505.3139953613281 297.8969116210938 C 508.7551879882812 322.447265625 510.5 347.7155456542969 510.5 373 C 510.5 398.2844543457031 508.7551879882812 423.552734375 505.3139953613281 448.1030883789062 C 501.96044921875 472.0283508300781 496.95654296875 495.5616455078125 490.4412841796875 518.0492553710938 C 484.0448303222656 540.1268920898438 476.1280822753906 561.4202880859375 466.9108276367188 581.3378295898438 C 457.7823486328125 601.0636596679688 447.2994689941406 619.6121826171875 435.7532653808594 636.46826171875 C 424.2093505859375 653.3209228515625 411.5078125 668.620361328125 398.0013732910156 681.9414672851562 C 384.3691711425781 695.3866577148438 369.7969055175781 706.933837890625 354.689453125 716.2623901367188 C 339.307373046875 725.7604370117188 323.2115478515625 733.0548095703125 306.8489990234375 737.9429321289062 C 298.5325317382812 740.42724609375 290.0207214355469 742.3237915039062 281.5500793457031 743.5796508789062 C 272.9552612304688 744.8538818359375 264.1908264160156 745.5 255.5 745.5 Z" stroke="none"></path>
<text dy="-10">
<textPath xlink:href="#Oval_text" class="svg_title">#Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text </textPath>
</text>
</svg>
If you need to animate separate elements containing text like illustrated in your gif:
css offset-path might be an option.
The actual motion path is defined by offset-path property
Css: ellipse motion path
offset-path: path('M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z');
svg {
overflow: visible;
height: 90vmin;
display: inline-block;
}
text {
font-size: 10px;
}
.textLabel {
offset-path: path('M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z');
offset-distance: 0%;
offset-rotate: 0deg;
animation: rotate1 3s linear infinite forwards;
}
.textLabel2 {
offset-distance: 50%;
animation-name: rotate2;
}
#keyframes rotate1 {
to {
offset-distance: 100%;
}
}
#keyframes rotate2 {
to {
offset-distance: 150%;
}
}
<svg class="Oval_text_svg" width="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 75">
<!-- optional: show motion path -->
<path stroke="#ccc" stroke-width="1" fill="none" id="oval" d="M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z" /> <g class="textLabel">
<circle cx="0" cy="0" r="10%" fill="red" />
<text fill="#fff" x="0" y="0" text-anchor="middle" dominant-baseline="central">
01
</text>
</g>
<g class="textLabel textLabel2">
<circle cx="0" cy="0" r="10%" fill="red" />
<text fill="#fff" x="0" y="0" text-anchor="middle" dominant-baseline="central">
02
</text>
</g>
</svg>
Changing offset-distance values will allow you to change offsets along the motion path (e.g offset-distance: 50% for the second element).
I work with Elementor theme on WordPress and want to animate an svg-arrow on hover but I have problems to do that. When I hover a box the arrow should become longer (see pictures). Any help appreciated. Thanks.
Normal state arrow
<div id="arrow-normal">
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2531 0.208125C12.985 -0.069375 12.5387 -0.069375 12.2612 0.208125C11.9931 0.47625 11.9931 0.9225 12.2612 1.19L17.2906 6.21938H0.694375C0.3075 6.22 0 6.5275 0 6.91437C0 7.30125 0.3075 7.61875 0.694375 7.61875H17.2906L12.2612 12.6388C11.9931 12.9163 11.9931 13.3631 12.2612 13.6306C12.5387 13.9081 12.9856 13.9081 13.2531 13.6306L19.4731 7.41062C19.7506 7.1425 19.7506 6.69625 19.4731 6.42875L13.2531 0.208125Z" fill="white"/>
</svg>
</div>
Hover State
<div id="arrow-hover">
<svg width="40" height="14" viewBox="0 0 40 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.2531 0.208125C32.985 -0.069375 32.5387 -0.069375 32.2612 0.208125C31.9931 0.47625 31.9931 0.9225 32.2612 1.19L37.2906 6.21938H0.694375C0.3075 6.22 0 6.5275 0 6.91437C0 7.30125 0.3075 7.61875 0.694375 7.61875H37.2906L32.2612 12.6388C31.9931 12.9163 31.9931 13.3631 32.2612 13.6306C32.5387 13.9081 32.9856 13.9081 33.2531 13.6306L39.4731 7.41062C39.7506 7.1425 39.7506 6.69625 39.4731 6.42875L33.2531 0.208125Z" fill="white"/>
</svg>
</div>
The arrow is drawn in double lines so it is impossible to make an animation by changing the attributes stroke-dasharray andstroke-dashoffset
Consider animating the d path attribute
To do this, you need the initial path of the short arrow and the final patch of the long arrow.
For the animation to work correctly, it is necessary that the number of nodal points and their type be the same in both patches
To fulfill these conditions, you need to load the first patch into the vector editor and extend the arrow by dragging the node points
Copy the long arrow patch to another SVG file. And write the animation formula for the attribute d
<animate id="_animate"
attributeName="d"
begin="indefinite"
dur="2s"
repeatCount="3"
values="
path-short-arrow;
path-long-arrow"
fill="freeze"
Below is the full code
var svg = document.getElementById('block');
svg.addEventListener("mouseover",() =>{
_animate.beginElement();
})
#block {
position: relative;
width:40ww;
height:auto;
max-width:450;
background-color: #1D4976;
}
#arrow-normal {
padding:1.5em;
}
#svg1 {
position: absolute;
bottom:30px;
right:50px;
}
#path {
fill:white;
stroke-width:2;
stroke:white;
}
.text1 {
padding-top:14px;
display:inline-block;
font-size:26px;
color:white;
}
.text2 {
padding-top:60px;
display:inline-block;
font-size:22px;
color:white;
}
<div id="block">
<div id="arrow-normal">
<span class="text1"> Fusce ultricies maximus ante vitae imperdiet. Proin magna orci pretium nec </span>
<span class="text2"> Nullam ornare turpis quis orci </span>
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="16" viewBox="0 0 50 16" version="1.1" fill="none">
<path id="path" d="m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z" >
<animate id="_animate"
attributeName="d"
begin="indefinite"
dur="2s"
repeatCount="2"
restart="whenNotActive"
values="
m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
m42.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H46.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z"
fill="freeze" />
</path>
</svg>
</div>
</div>
Option with dasharray arrow
var svg = document.getElementById('block');
svg.addEventListener("mouseover",() =>{
_animate.beginElement();
})
#block {
position: relative;
width:40ww;
height:auto;
max-width:450;
background-color: #1D4976;
}
#arrow-normal {
padding:1.5em;
}
#svg1 {
position: absolute;
bottom:30px;
right:50px;
stroke-dasharray:4 1;
}
#path {
fill:white;
stroke-width:2;
stroke:white;
}
.text1 {
padding-top:14px;
display:inline-block;
font-size:26px;
color:white;
}
.text2 {
padding-top:60px;
display:inline-block;
font-size:22px;
color:white;
}
<div id="block">
<div id="arrow-normal">
<span class="text1"> Fusce ultricies maximus ante vitae imperdiet. Proin magna orci pretium nec </span>
<span class="text2"> Nullam ornare turpis quis orci </span>
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="16" viewBox="0 0 50 16" version="1.1" fill="none">
<path id="path" d="m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z" >
<animate id="_animate"
attributeName="d"
begin="indefinite"
dur="2s"
repeatCount="2"
restart="whenNotActive"
values="
m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
m42.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H46.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z"
fill="freeze" />
</path>
</svg>
</div>
</div>
I am trying to reproduce something that I saw a while ago which is animating an SVG clock. Everything works fine but I can't get around the transform-origin which seems not to be working... is the way the path is made?
// Real time clock animation
let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');
setInterval(function() {
let d = new Date();
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +')');
}
r(sec, 6*d.getSeconds());
r(min, 6*d.getMinutes());
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);
.seconds-lancet,
.minutes-lancet,
.hours-lancet {
transform-origin: bottom center !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
<g id="clock">
<circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
<path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
<path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
<circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
<path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
<path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
<path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
<rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
<rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
<g id="hands">
<path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
<path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
<path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
<circle cx="80.28" cy="107" r="2" fill="#034732"/>
</g>
</g>
</svg>
Thanks
Looks like you've assumed that the transform-box is the fill-box, it's not by default it's the view-box. Setting transform-box: fill-box; seems to make things work better.
// Real time clock animation
let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');
setInterval(function() {
let d = new Date();
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +')');
}
r(sec, 6*d.getSeconds());
r(min, 6*d.getMinutes());
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);
.seconds-lancet,
.minutes-lancet,
.hours-lancet {
transform-origin: bottom center !important;
transform-box: fill-box;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
<g id="clock">
<circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
<path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
<path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
<circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
<path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
<path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
<path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
<rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
<rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
<g id="hands">
<path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
<path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
<path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
<circle cx="80.28" cy="107" r="2" fill="#034732"/>
</g>
</g>
</svg>