CSS Animation with Transform Translate [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
i want the bottom right animated thing to be animated like translatedX 0 to translatedX 20px then come back to -20px then to up with translateY -10px straight then come down to translateY 0px straight and then get back to translateX 0px. but it is not heppening whtn it is going up and down diagonally.
codesendbox: https://codesandbox.io/s/svg-animation-ch1vz?file=/index.html:602-930


Try using this:
#keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px, 0px);
}
100% {
transform: translateX(0px);
}
}
Working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#stob1 {
animation: leftStob 6s linear infinite;
transform-origin: 10% 70%;
transform-box: fill-box;
}
#stob2 {
}
#like1 {
}
#like2 {
}
#love1 {
}
#love2 {
}
#love3 {
}
/* #pata1 {
animation: pata 6s linear infinite;
transform-origin: bottom;
transform-box: fill-box;
i want the bottom right animated thing to be animated like translatedX
0 to translatedX 20px then come back to -20px then to up with translateY
-10px straight then come down to translateY 0px straight and then get back to translateX 0px.
but it is not heppening whtn it is going up and down diagonaly.
} */
#keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px, 0px);
}
100% {
transform: translateX(0px);
}
}
#keyframes pata {
0% {
transform: rotateZ(0deg);
}
25% {
transform: rotateZ(5deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(-5deg);
}
100% {
transform: rotateZ(0deg);
}
}
</style>
</head>
<body>
<div id="wrapper">
<svg
width="646"
height="479"
viewBox="0 0 646 479"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="undraw_Social_life_re_x7t5 1" clip-path="url(#clip0)">
<g id="stob2">
<path
id="Vector"
d="M39.8701 476.965C39.8701 467.152 43.7683 457.741 50.7071 450.802C57.646 443.863 67.0571 439.965 76.8701 439.965C86.6831 439.965 96.0942 443.863 103.033 450.802C109.972 457.741 113.87 467.152 113.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="stob1">
<path
id="Vector_2"
d="M153.87 476.965C153.87 467.152 157.768 457.741 164.707 450.802C171.646 443.863 181.057 439.965 190.87 439.965C200.683 439.965 210.094 443.863 217.033 450.802C223.972 457.741 227.87 467.152 227.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="like2">
<path
id="Vector_3"
d="M230.87 144.402C227.903 144.402 225.003 145.282 222.537 146.93C220.07 148.578 218.147 150.921 217.012 153.662C215.877 156.402 215.58 159.418 216.158 162.328C216.737 165.238 218.166 167.911 220.264 170.008C222.361 172.106 225.034 173.535 227.944 174.114C230.853 174.692 233.869 174.395 236.61 173.26C239.351 172.125 241.694 170.202 243.342 167.735C244.99 165.269 245.87 162.369 245.87 159.402C245.87 155.424 244.29 151.608 241.477 148.795C238.664 145.982 234.848 144.402 230.87 144.402V144.402ZM227.279 165.951C227.279 166.063 227.234 166.171 227.155 166.25C227.076 166.329 226.968 166.374 226.856 166.374H223.476C223.364 166.374 223.256 166.329 223.177 166.25C223.098 166.171 223.053 166.063 223.053 165.951V157.923C223.053 157.811 223.098 157.703 223.177 157.624C223.256 157.545 223.364 157.5 223.476 157.5H226.856C226.968 157.5 227.076 157.545 227.155 157.624C227.234 157.703 227.279 157.811 227.279 157.923V165.951ZM238.687 159.613C238.687 159.949 238.553 160.272 238.316 160.509C238.078 160.747 237.756 160.881 237.419 160.881V160.902C237.658 160.951 237.872 161.08 238.026 161.269C238.18 161.458 238.264 161.694 238.264 161.937C238.264 162.181 238.18 162.417 238.026 162.605C237.872 162.794 237.658 162.923 237.419 162.972V163.416C237.644 163.416 237.858 163.505 238.017 163.663C238.175 163.822 238.264 164.037 238.264 164.261C238.264 164.485 238.175 164.7 238.017 164.859C237.858 165.017 237.644 165.106 237.419 165.106H228.969C228.857 165.106 228.749 165.062 228.67 164.982C228.591 164.903 228.546 164.796 228.546 164.684V157.923C228.546 155.81 231.926 152.852 231.926 152.852V151.822C231.926 151.509 232.041 151.207 232.249 150.972C232.456 150.738 232.743 150.588 233.054 150.551C233.365 150.514 233.679 150.593 233.936 150.772C234.193 150.951 234.375 151.218 234.448 151.522L234.462 151.585C234.626 153.074 234.263 154.573 233.435 155.822H236.036C236.075 155.818 236.112 155.81 236.152 155.81H237.419C237.083 156.483 237.028 157.261 237.266 157.974C237.503 158.687 238.015 159.277 238.687 159.613V159.613Z"
fill="#5E90FF"
/>
</g>
<g id="like1">
<path
id="Vector_4"
d="M252.87 51.4018C248.717 51.4018 244.657 52.6334 241.203 54.9409C237.75 57.2484 235.058 60.5282 233.469 64.3654C231.879 68.2027 231.463 72.4251 232.274 76.4987C233.084 80.5723 235.084 84.3141 238.021 87.251C240.958 90.1879 244.7 92.188 248.773 92.9983C252.847 93.8086 257.069 93.3927 260.906 91.8033C264.744 90.2138 268.023 87.5222 270.331 84.0688C272.638 80.6153 273.87 76.5552 273.87 72.4018C273.87 66.8322 271.658 61.4908 267.719 57.5526C263.781 53.6143 258.44 51.4018 252.87 51.4018ZM247.842 81.5708C247.842 81.7277 247.78 81.8781 247.669 81.9891C247.558 82.1 247.407 82.1623 247.25 82.1623H242.518C242.361 82.1623 242.211 82.1 242.1 81.9891C241.989 81.8781 241.926 81.7277 241.926 81.5708V70.3314C241.926 70.1745 241.989 70.024 242.1 69.9131C242.211 69.8021 242.361 69.7398 242.518 69.7398H247.25C247.407 69.7398 247.558 69.8021 247.669 69.9131C247.78 70.024 247.842 70.1745 247.842 70.3314V81.5708ZM263.814 72.6975C263.814 73.1682 263.627 73.6196 263.294 73.9524C262.961 74.2852 262.51 74.4722 262.039 74.4722V74.502C262.373 74.5702 262.673 74.7517 262.889 75.0157C263.104 75.2798 263.222 75.6102 263.222 75.9511C263.222 76.292 263.104 76.6224 262.889 76.8864C262.673 77.1505 262.373 77.3319 262.039 77.4001V78.0215C262.353 78.0215 262.654 78.1461 262.876 78.368C263.098 78.5899 263.222 78.8908 263.222 79.2046C263.222 79.5184 263.098 79.8193 262.876 80.0412C262.654 80.263 262.353 80.3877 262.039 80.3877H250.208C250.051 80.3877 249.901 80.3254 249.79 80.2144C249.679 80.1035 249.617 79.953 249.617 79.7961V70.3314C249.617 67.3736 254.349 63.2328 254.349 63.2328V61.7906C254.348 61.3521 254.509 60.9287 254.8 60.6006C255.091 60.2726 255.492 60.0627 255.928 60.0109C256.363 59.9591 256.802 60.069 257.162 60.3196C257.522 60.5702 257.777 60.9442 257.88 61.3706C257.886 61.3994 257.892 61.4286 257.898 61.4581C258.49 64.4159 256.461 67.3899 256.461 67.3899H260.103C260.157 67.385 260.209 67.3736 260.264 67.3736H262.039C262.51 67.3736 262.961 67.5606 263.294 67.8934C263.627 68.2262 263.814 68.6776 263.814 69.1483C263.814 69.6189 263.627 70.0703 263.294 70.4031C262.961 70.7359 262.51 70.9229 262.039 70.9229C262.51 70.9229 262.961 71.1099 263.294 71.4427C263.627 71.7755 263.814 72.2269 263.814 72.6975Z"
fill="#5E90FF"
/>
</g>
<g id="mobile">
<path
id="Vector_5"
d="M258.702 209.928L282.994 227.126C283.305 227.352 283.68 227.474 284.064 227.474C284.449 227.474 284.824 227.352 285.135 227.126L291.699 222.198C291.917 222.038 292.097 221.831 292.224 221.593C292.351 221.354 292.423 221.09 292.435 220.82C292.446 220.55 292.396 220.281 292.289 220.033C292.182 219.784 292.021 219.563 291.817 219.386L273.124 202.717C272.879 202.503 272.581 202.357 272.26 202.295C271.94 202.233 271.609 202.257 271.301 202.364L259.138 206.717C258.825 206.832 258.55 207.03 258.342 207.29C258.133 207.55 258 207.862 257.955 208.192C257.91 208.522 257.956 208.858 258.088 209.164C258.219 209.469 258.432 209.734 258.702 209.928H258.702Z"
fill="#3F3D56"
/>
<path
id="Vector_6"
d="M260.91 208.601L282.802 224.1C282.911 224.183 283.045 224.229 283.183 224.23C283.32 224.231 283.455 224.188 283.566 224.107L289.47 219.675C289.537 219.627 289.594 219.566 289.638 219.496C289.682 219.426 289.711 219.347 289.725 219.266C289.738 219.184 289.735 219.101 289.716 219.02C289.697 218.94 289.663 218.864 289.614 218.797C289.587 218.76 289.556 218.727 289.522 218.697L272.662 203.662C272.574 203.587 272.468 203.536 272.354 203.515C272.24 203.494 272.123 203.503 272.014 203.542L261.058 207.462C260.948 207.504 260.852 207.576 260.779 207.668C260.707 207.761 260.66 207.871 260.645 207.988C260.63 208.104 260.647 208.223 260.693 208.331C260.74 208.439 260.815 208.533 260.91 208.602V208.601Z"
fill="white"
/>
</g>
<g id="body">
<path
id="Vector_7"
d="M299.623 297.6C301.153 297.244 302.586 296.558 303.822 295.589C305.057 294.62 306.066 293.391 306.776 291.991C307.485 290.59 307.879 289.05 307.93 287.48C307.98 285.911 307.686 284.349 307.067 282.905L346.67 193.433L324.015 187.727L292.211 277.47C289.855 278.669 288.02 280.692 287.055 283.153C286.09 285.615 286.062 288.345 286.976 290.827C287.889 293.308 289.681 295.368 292.012 296.616C294.343 297.865 297.051 298.215 299.623 297.6V297.6Z"
fill="#A0616A"
/>
<path
id="Vector_8"
d="M335.309 221.435L313.275 211.121C312.648 210.828 312.092 210.403 311.644 209.875C311.196 209.347 310.868 208.729 310.68 208.062C310.493 207.396 310.451 206.697 310.558 206.013C310.666 205.329 310.919 204.677 311.301 204.1L324.691 183.877C326.212 180.68 328.938 178.216 332.272 177.026C335.606 175.835 339.276 176.014 342.478 177.525C345.68 179.035 348.153 181.753 349.354 185.083C350.556 188.413 350.389 192.083 348.889 195.29L341.965 218.453C341.767 219.116 341.428 219.729 340.971 220.249C340.515 220.769 339.951 221.185 339.32 221.468C338.688 221.751 338.003 221.895 337.31 221.889C336.618 221.883 335.935 221.728 335.309 221.435H335.309Z"
fill="#FF63E5"
/>
<path
id="Vector_9"
d="M347.236 466.333L334.976 466.332L329.144 419.044L347.238 419.045L347.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_10"
d="M350.363 478.217L310.832 478.216V477.716C310.832 475.695 311.23 473.694 312.003 471.828C312.776 469.961 313.91 468.265 315.339 466.836C316.767 465.407 318.464 464.274 320.33 463.501C322.197 462.727 324.198 462.329 326.219 462.329H326.22L350.363 462.33L350.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_11"
d="M388.236 466.333L375.976 466.332L370.144 419.044L388.238 419.045L388.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_12"
d="M391.363 478.217L351.832 478.216V477.716C351.832 475.695 352.23 473.694 353.003 471.828C353.776 469.961 354.91 468.265 356.339 466.836C357.767 465.407 359.464 464.274 361.33 463.501C363.197 462.727 365.198 462.329 367.219 462.329H367.22L391.363 462.33L391.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_13"
d="M387.675 453.178C387.564 453.178 387.453 453.174 387.342 453.166L373.243 452.122C372.277 452.046 371.361 451.662 370.629 451.027C369.897 450.391 369.389 449.538 369.178 448.592L344.698 314.22C344.617 313.848 344.398 313.521 344.086 313.305C343.773 313.089 343.39 313 343.014 313.055C342.637 313.111 342.296 313.307 342.06 313.604C341.823 313.902 341.708 314.278 341.737 314.657L350.43 447.05C350.478 447.668 350.398 448.291 350.195 448.877C349.992 449.463 349.669 450.001 349.248 450.457C348.827 450.913 348.315 451.277 347.747 451.525C347.178 451.774 346.564 451.902 345.944 451.902H335.208C334.302 451.903 333.418 451.63 332.67 451.119C331.922 450.609 331.345 449.885 331.015 449.042C304.015 378.336 313.792 239.795 313.87 238.402L314.87 237.402L368.648 246.687L368.762 246.798C387.136 260.294 395.088 418.348 392.167 448.414C392.148 449.691 391.677 450.92 390.837 451.882C389.994 452.712 388.858 453.178 387.675 453.178V453.178Z"
fill="#2F2E41"
/>
<path
id="Vector_14"
d="M376.404 269.505C376.154 269.505 375.904 269.48 375.659 269.43L312.581 261.336C310.323 260.88 308.711 258.47 308.833 255.728L314.87 222.402C306.87 212.402 314.429 186.576 319.318 180.046L317.427 174.93C316.94 173.602 316.91 172.149 317.343 170.801C317.715 169.533 318.567 168.46 319.719 167.812L345.318 154.21C347.588 153.004 350.25 154.239 351.256 156.959L356.276 170.545L356.199 170.585C368.219 177.028 378.87 183.402 370.87 217.402L380.9 264.358C380.866 265.839 380.27 267.251 379.231 268.307C378.481 269.06 377.467 269.49 376.404 269.505Z"
fill="#FF63E5"
/>
<path
id="Vector_15"
d="M287.403 214.455C287.806 214.834 288.179 215.244 288.517 215.682L337.993 212.263L343.3 201.448L360.67 207.324L353.135 227.385C352.526 229.005 351.408 230.385 349.949 231.316C348.489 232.247 346.767 232.68 345.041 232.549L288.781 228.282C287.535 230.012 285.793 231.322 283.785 232.037C281.777 232.752 279.598 232.84 277.54 232.287C275.481 231.734 273.639 230.567 272.26 228.942C270.88 227.317 270.028 225.311 269.817 223.189C269.605 221.068 270.045 218.933 271.077 217.068C272.108 215.202 273.684 213.696 275.593 212.747C277.502 211.799 279.655 211.455 281.764 211.76C283.874 212.065 285.841 213.005 287.403 214.455V214.455Z"
fill="#A0616A"
/>
<path
id="Vector_16"
d="M337.099 209.879C336.853 209.281 336.739 208.637 336.764 207.991C336.789 207.344 336.953 206.711 337.245 206.134L347.448 185.985C348.493 182.846 350.739 180.249 353.696 178.764C356.652 177.279 360.077 177.027 363.219 178.062C366.36 179.098 368.964 181.338 370.457 184.29C371.951 187.242 372.213 190.665 371.186 193.81L367.256 216.126C367.144 216.763 366.896 217.368 366.529 217.9C366.162 218.432 365.684 218.879 365.129 219.21C364.573 219.542 363.953 219.749 363.31 219.819C362.667 219.889 362.017 219.819 361.403 219.615L339.839 212.436C339.226 212.232 338.663 211.898 338.19 211.456C337.717 211.015 337.345 210.477 337.099 209.879Z"
fill="#FF63E5"
/>
</g>
<g id="love3">
<path
id="Vector_17"
d="M262.48 196.17C262.277 196.36 262.01 196.465 261.732 196.465C261.455 196.465 261.188 196.36 260.985 196.17L260.411 195.651C255.713 191.341 253 188.54 253 185.049C253 182.201 254.802 180 257.628 180C258.412 180.004 259.184 180.179 259.893 180.512C260.602 180.844 261.23 181.327 261.734 181.927C262.237 181.327 262.865 180.845 263.573 180.512C264.281 180.179 265.054 180.005 265.836 180C268.666 180 270.465 182.194 270.465 185.049C270.465 188.533 267.752 191.334 263.054 195.651L262.48 196.17Z"
fill="#FF6584"
/>
</g>
<g id="love2">
<path
id="Vector_18"
d="M225.57 133.698C225.181 134.061 224.669 134.262 224.138 134.262C223.606 134.262 223.094 134.061 222.705 133.698L221.605 132.704C212.603 124.444 207.406 119.078 207.406 112.388C207.406 106.931 210.859 102.714 216.274 102.714C217.775 102.722 219.255 103.057 220.614 103.694C221.972 104.332 223.176 105.257 224.141 106.406C225.105 105.257 226.308 104.332 227.665 103.695C229.022 103.057 230.502 102.722 232.001 102.714C237.423 102.714 240.87 106.917 240.87 112.388C240.87 119.064 235.672 124.43 226.67 132.704L225.57 133.698Z"
fill="#FF6584"
/>
</g>
<g id="love1">
<path
id="Vector_19"
d="M226.999 40.2437C226.493 40.7144 225.828 40.9762 225.138 40.9762C224.447 40.9762 223.782 40.7144 223.277 40.2437L221.849 38.9517C210.157 28.2243 203.406 21.2547 203.406 12.5654C203.406 5.47747 207.891 3.05176e-05 214.924 3.05176e-05C216.873 0.0111436 218.797 0.445725 220.561 1.27367C222.325 2.10161 223.888 3.30314 225.142 4.79504C226.395 3.30336 227.956 2.10188 229.719 1.2739C231.482 0.445914 233.404 0.0112366 235.351 3.05176e-05C242.394 3.05176e-05 246.87 5.45928 246.87 12.5654C246.87 21.2365 240.119 28.2061 228.427 38.9517L226.999 40.2437Z"
fill="#FF6584"
/>
</g>
<g id="floor">
<path
id="Vector_20"
d="M645 478.402H1C0.734784 478.402 0.480444 478.296 0.292908 478.109C0.105371 477.921 0 477.667 0 477.402C0 477.137 0.105371 476.882 0.292908 476.695C0.480444 476.507 0.734784 476.402 1 476.402H645C645.265 476.402 645.52 476.507 645.707 476.695C645.895 476.882 646 477.137 646 477.402C646 477.667 645.895 477.921 645.707 478.109C645.52 478.296 645.265 478.402 645 478.402Z"
fill="#CCCCCC"
/>
</g>
<g id="head">
<path
id="Vector_21"
d="M320.074 156.357C333.639 156.357 344.635 145.361 344.635 131.796C344.635 118.231 333.639 107.235 320.074 107.235C306.509 107.235 295.513 118.231 295.513 131.796C295.513 145.361 306.509 156.357 320.074 156.357Z"
fill="#A0616A"
/>
<path
id="Vector_22"
d="M333.87 112.402C344.916 112.402 353.87 103.447 353.87 92.4018C353.87 81.3561 344.916 72.4018 333.87 72.4018C322.824 72.4018 313.87 81.3561 313.87 92.4018C313.87 103.447 322.824 112.402 333.87 112.402Z"
fill="#352404"
/>
<path
id="Vector_23"
d="M296.823 134.833C294.869 135.039 292.792 135.225 291.034 134.347C290.093 133.814 289.292 133.066 288.695 132.165C288.098 131.264 287.721 130.235 287.596 129.161C283.87 104.402 304.923 106.438 307.414 105.366C309.088 104.645 310.321 103.194 311.817 102.153C315.089 99.8756 319.334 99.7091 323.32 99.6232C328.051 99.5211 332.954 99.4509 337.297 101.332C341.202 103.162 344.447 106.153 346.588 109.896C348.707 113.623 350.259 117.645 351.195 121.829C352.399 126.616 353.218 131.68 351.978 136.457C350.955 140.089 348.823 143.31 345.878 145.669C342.934 148.029 339.326 149.408 335.559 149.616C337.175 143.909 333.648 137.583 328.416 134.79C324.194 132.714 319.39 132.142 314.799 133.169C311.821 133.772 308.802 134.148 305.767 134.294C302.789 134.405 299.214 134.58 296.823 134.833Z"
fill="#352404"
/>
</g>
<g id="pata1">
<path
id="Vector_24"
d="M616.896 203.791C616.896 155.527 577.745 41 529.448 41C481.152 41 442 155.527 442 203.791C442.018 226.972 451.239 249.198 467.636 265.583C484.034 281.969 506.267 291.173 529.448 291.173C552.63 291.173 574.862 281.969 591.26 265.583C607.658 249.198 616.879 226.972 616.896 203.791V203.791Z"
fill="#46BB0F"
/>
</g>
<g id="wood">
<path
id="Vector_25"
d="M530.164 477.402C529.898 477.402 529.644 477.296 529.456 477.109C529.269 476.921 529.164 476.667 529.164 476.402V200.261C529.164 199.996 529.269 199.742 529.456 199.554C529.644 199.367 529.898 199.261 530.164 199.261C530.429 199.261 530.683 199.367 530.871 199.554C531.058 199.742 531.164 199.996 531.164 200.261V476.402C531.163 476.667 531.058 476.921 530.871 477.109C530.683 477.296 530.429 477.402 530.164 477.402V477.402Z"
fill="#CAC0C0"
/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="646" height="478.402" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>

Related

Why doesn't the group animation work for me?

I have svg (from undraw edited in figma) with groups selected by id and I would like to have animation in css on these groups.
But I set animation for group with id head and it doesn't work (The head should tilt, but the image doesn't move at all).
Can you help me?
Thank you in advance for your reply!
#head{
animation: head 1s ease infinite alternate;
transform-origin: bottom;
}
#keyframes head{
from{
transform: rotateZ('-10deg');
}
to{
transform: rotateZ('10deg');
}
}
<div class="svg-animation">
<svg width="600" height="523" viewBox="0 0 600 523" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_developer_activity_re_39tg 1" clip-path="url(#clip0_3_67)">
// Lots of other vectors
<g id="head">
<path id="ab6171fa-7d69-4734-b81c-8dff60f9761b" d="M199.507 172.87C226.126 172.87 247.704 151.292 247.704 124.674C247.704 98.0553 226.126 76.4769 199.507 76.4769C172.889 76.4769 151.311 98.0553 151.311 124.674C151.311 151.292 172.889 172.87 199.507 172.87Z" fill="#FFB6B6"/>
<path id="bf427902-b9bf-4946-b5d7-5c1c7e04535e" d="M241.715 89.3366C241.715 89.3366 254.32 65.2383 226.587 63.0475C226.587 63.0475 202.945 41.6007 178.847 59.1267C178.847 59.1267 165.702 59.1267 158.514 74.0013C158.514 74.0013 148.176 70.0805 145.904 80.5736C145.904 80.5736 138.339 102.481 145.904 122.198C153.469 141.915 155.981 144.106 155.981 144.106C155.981 144.106 143.551 102.768 173.808 100.577C204.064 98.3866 237.923 79.4782 240.444 103.577C242.966 127.675 246.76 133.612 246.76 133.612C246.76 133.612 270.709 99.1951 241.715 89.3366Z" fill="#2F2E41"/>
<path id="Vector_42" d="M257.955 122.04H254.428C254.428 95.3746 228.038 77.901 201.415 77.8869C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.885 176.809 82.2182C159.618 87.4879 143.675 97.6743 143.675 122.04C143.671 126.772 144.273 131.485 145.467 136.064L142.052 136.953C140.786 132.083 140.146 127.072 140.148 122.04C140.148 100.75 148.888 86.1264 163.984 77.4072C171.92 72.8218 181.606 69.8661 192.702 68.427C197.32 67.8127 201.988 67.6708 206.635 68.0037C237.251 70.2047 257.955 93.6816 257.955 122.04Z" fill="#009B77"/>
<path id="Vector_43" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979C257.673 105.831 256.186 104.98 254.566 104.491C252.947 104.003 251.238 103.888 249.568 104.157L247.36 104.461C246.755 104.54 246.173 104.739 245.646 105.045C245.12 105.352 244.659 105.76 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.305 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27C250.613 137.327 250.901 137.356 251.19 137.355C251.398 137.355 251.605 137.341 251.811 137.313L254.28 136.981C255.785 136.781 257.234 136.276 258.537 135.496C259.84 134.716 260.969 133.678 261.856 132.445C262.047 132.177 262.23 131.902 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#009B77"/>
<path id="Vector_44" d="M245.935 104.891C245.287 105.206 244.724 105.67 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.306 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27L245.935 104.891Z" fill="white"/>
<path id="Vector_45" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979L262.11 130.519C262.158 130.897 262.255 131.267 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#3F3D56"/>
<path id="Vector_46" d="M252.848 131.395C253.813 131.264 254.299 128.967 253.932 126.264C253.565 123.562 252.486 121.477 251.521 121.608C250.555 121.739 250.07 124.036 250.437 126.738C250.803 129.441 251.883 131.526 252.848 131.395Z" fill="#3F3D56"/>
<path id="Vector_47" d="M250.732 118.697C251.697 118.566 252.182 116.269 251.816 113.566C251.449 110.864 250.369 108.779 249.404 108.91C248.439 109.041 247.954 111.338 248.32 114.041C248.687 116.743 249.767 118.828 250.732 118.697Z" fill="#3F3D56"/>
<path id="Vector_48" d="M264.135 123.635C265.1 123.504 265.586 121.207 265.219 118.505C264.852 115.802 263.773 113.717 262.808 113.848C261.842 113.979 261.357 116.276 261.724 118.979C262.09 121.681 263.17 123.766 264.135 123.635Z" fill="#3F3D56"/>
<path id="Vector_49" d="M201.415 77.8868C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.8849 176.809 82.2182C170.002 81.8867 164.993 80.1231 163.984 77.4071C171.92 72.8218 181.606 69.866 192.702 68.4269C197.32 67.8126 201.988 67.6708 206.635 68.0037C207.127 68.292 207.552 68.6812 207.883 69.1457C208.213 69.6101 208.442 70.1393 208.554 70.6984C208.885 73.1534 206.085 75.7635 201.415 77.8868Z" fill="#3F3D56"/>
<path id="Vector_50" d="M156.38 146.519L150.948 123.938C150.754 123.123 150.324 122.384 149.711 121.813C149.099 121.242 148.331 120.864 147.505 120.728C147.272 120.692 147.036 120.673 146.8 120.672C146.467 120.673 146.136 120.713 145.812 120.791L143.71 121.299C141.003 121.954 138.667 123.656 137.213 126.031C135.76 128.406 135.308 131.261 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18C142.464 150.427 142.784 150.655 143.117 150.864C144.3 151.605 145.619 152.102 146.996 152.325C148.374 152.548 149.782 152.493 151.138 152.162L153.233 151.654C153.787 151.525 154.309 151.282 154.764 150.942C155.442 150.448 155.957 149.764 156.245 148.976C156.532 148.188 156.579 147.333 156.38 146.519Z" fill="#009B77"/>
<path id="Vector_51" d="M144.992 142.317C145.939 142.089 146.19 139.755 145.552 137.104C144.914 134.452 143.629 132.487 142.682 132.715C141.735 132.943 141.484 135.277 142.122 137.929C142.76 140.58 144.045 142.545 144.992 142.317Z" fill="#3F3D56"/>
<path id="Vector_52" d="M137.938 144.434C138.885 144.206 139.135 141.871 138.497 139.22C137.859 136.568 136.574 134.604 135.627 134.832C134.68 135.059 134.43 137.394 135.068 140.045C135.706 142.697 136.991 144.661 137.938 144.434Z" fill="#3F3D56"/>
<path id="Vector_53" d="M156.725 146.434L151.293 123.853C151.082 122.972 150.615 122.172 149.951 121.555C149.287 120.937 148.456 120.53 147.562 120.382L154.976 151.224C155.708 150.688 156.265 149.947 156.576 149.094C156.888 148.242 156.94 147.316 156.725 146.434Z" fill="white"/>
<path id="Vector_54" d="M137.185 129.497C137.035 128.869 136.753 128.28 136.359 127.768C135.596 129.746 135.455 131.909 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18L137.185 129.497Z" fill="#3F3D56"/>
</g>
</g>
<defs>
<clipPath id="clip0_3_67">
<rect width="600" height="522.608" fill="white"/>
</clipPath>
</defs>
</svg>
</div>

How to fill SVG?

could you please tell me guys how to fill this SVG?
<svg class="animationCounter2" width="80%" height="80%" viewBox="0 0 295 298" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M0 45.4119C27.6939 36.5087 55.7265 28.637 84.1171 22.1956C112.508 15.7834 141.208 10.7528 170.102 7.18185C198.996 3.64005 228.073 1.63562 257.161 0.740441C271.704 0.28312 286.258 0.0982462 300.801 0.0204044C308.068 -0.0282467 315.345 0.0204044 322.622 0.0593253C329.898 0.0982462 337.165 0.0982462 344.442 0.234469C373.529 0.555567 402.607 1.45075 431.675 2.80325C460.733 4.15575 489.772 5.99476 518.772 8.30082C547.773 10.6069 576.734 13.3897 605.647 16.5715C634.56 19.7436 663.425 23.3535 692.261 27.1483C721.097 30.9431 749.894 34.9616 778.71 38.8634C807.517 42.7458 836.333 46.5892 865.217 49.7321C879.654 51.3668 894.111 52.6998 908.587 53.9453C915.825 54.4805 923.063 55.1032 930.31 55.5119C933.929 55.7259 937.558 55.9984 941.177 56.1638L952.053 56.66C966.549 57.2925 981.054 57.3898 995.53 56.7768C1009.98 56.1054 1024.46 54.8307 1038.47 51.5906C1045.44 49.9267 1052.36 47.7666 1058.44 44.2637C1061.45 42.5123 1064.22 40.3522 1066.26 37.6958C1068.32 35.0492 1069.45 31.848 1069.44 28.53C1069.45 26.9245 1069.12 25.3676 1068.4 24.0249C1067.71 22.6821 1066.61 21.5631 1065.29 20.775C1062.64 19.1889 1059.14 19.0235 1056.19 20.162C1053.2 21.2809 1050.81 23.7135 1049.5 26.7201C1048.85 28.2186 1048.4 29.8435 1048.18 31.5269C1047.96 33.2005 1047.89 34.9616 1048.07 36.5671C1048.45 39.8462 1049.98 42.921 1052.17 45.5384C1054.35 48.1655 1057.12 50.3548 1060.09 52.2522C1066.06 56.0276 1072.8 58.6742 1079.64 60.7856C1083.07 61.8365 1086.54 62.722 1090.08 63.4809C1093.6 64.2788 1097.14 64.9891 1100.7 65.641C1107.81 66.9254 1114.98 67.8984 1122.17 68.5309C1150.95 71.1191 1180.28 67.9276 1207.74 58.645C1235.18 49.3526 1260.69 34.1929 1282 14.2752C1261.22 34.7476 1235.84 50.53 1208.31 60.2991C1194.54 65.174 1180.25 68.6282 1165.74 70.3894C1151.23 72.2089 1136.53 72.4425 1121.95 71.3137C1114.67 70.7494 1107.4 69.8347 1100.19 68.6087C1096.59 67.986 1092.99 67.2952 1089.42 66.5265C1085.84 65.787 1082.26 64.8821 1078.74 63.8215C1071.7 61.6808 1064.74 58.9953 1058.38 55.0059C1055.21 52.9917 1052.19 50.637 1049.68 47.6596C1047.18 44.7113 1045.28 41.0041 1044.8 36.9855C1044.57 34.9616 1044.65 33.035 1044.9 31.089C1045.15 29.143 1045.66 27.2066 1046.48 25.3676C1047.29 23.5286 1048.44 21.8064 1049.9 20.3663C1051.35 18.9262 1053.12 17.7878 1055.04 17.058C1058.86 15.5985 1063.34 15.7736 1066.99 17.9337C1068.8 19.0041 1070.36 20.5901 1071.33 22.4875C1072.33 24.3752 1072.76 26.5061 1072.75 28.5494C1072.75 30.5441 1072.41 32.568 1071.74 34.4654C1071.07 36.3725 1070.09 38.1337 1068.89 39.7002C1066.47 42.8334 1063.35 45.2076 1060.09 47.0952C1056.82 48.9926 1053.37 50.4521 1049.87 51.6782C1046.37 52.9139 1042.81 53.8772 1039.23 54.7237C1024.87 58.0028 1010.26 59.2288 995.684 59.8613C981.102 60.4354 966.51 60.2991 951.966 59.618C937.423 58.9855 922.898 58.032 908.384 56.8838C893.879 55.6481 879.393 54.315 864.937 52.6901C836.004 49.557 807.168 45.733 778.342 41.8604C749.526 37.9683 720.729 33.9692 691.903 30.2036C634.26 22.6334 576.502 15.9682 518.569 11.3172C489.608 8.98194 460.598 7.11374 431.578 5.74178C402.549 4.36008 373.51 3.43571 344.452 3.08542C337.185 2.93947 329.927 2.92974 322.66 2.89082L300.869 2.82271C286.335 2.82271 271.811 2.92974 257.296 3.30922C228.267 4.04872 199.257 5.90719 170.411 9.27385C141.556 12.5529 112.856 17.3013 84.4461 23.4216C55.9684 29.5127 27.8197 36.9077 0 45.4119Z" fill="white"/>
</svg>
.svg-path{
fill:transparent;
stroke:white;
stroke-miterlimit:10;
stroke-width:2px;
fill-rule:evenodd;
}
.draw2{
stroke-dasharray: 3000;
animation: 5s write2;
filter: drop-shadow(0px 1px 10px gray);
}
#keyframes write2 {
0% {
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 0;
}
}
When i set the fill to white; it looks good, but i almost cant see the animation, when i set the stroke-width to for example 5px, its too thick..

restart svg animation on hover (mouseover) svg or css solutions only

This is my svg, the eyes blink every 12 seconds, but I want the user to be able to trigger that on any mouseover event. So restart the animation on hover.
I've tried adding
begin="mouseover;...." to my svg animate tags, but it just triggers that lone animation, not all 6 animations, and I don't want it to trigger when the user hovers over a small shape, but rather over the whole svg.
I'm not keen on javascript because it slows the load time. I'd love some assistance, it'll help those impatient to view the animation again.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto; margin-top: -110px;">
<path d="M13.936 69.536s-.904.55-1.48 1.279-1.667 3.216-1.667 3.216-1.105-7.03-1.199-10.04c-.093-3.01.45-7.942.45-7.942l-8.691.6s1.9-6.464 3.147-8.991c1.245-2.527 3.596-5.994 3.596-5.994s-2.52-.16-3.896.15S0 43.612 0 43.612c2.675-9.279 6.027-16.872 10.94-22.178C18.673 13.326 34.6-.32 57.991.004s33.594 5.326 44.206 13.637c10.612 8.311 17.832 29.67 17.832 29.67l-7.942-2.098 6.743 14.685-8.99.6-.75 15.883-2.847-3.296s-.488 10.012-1.649 13.936c-1.16 3.924-4.645 9.44-4.645 9.44l-1.349-3.596s-2.494 7.072-5.095 9.59c-2.118 2.051-5.239 2.718-7.942 3.896-7.797 3.4-13.699 8.929-23.826 9.141s-27.169-6.132-33.417-11.239c-6.248-5.106-6.593-11.389-6.593-11.389l-1.199 5.245s-4.679-9.466-5.694-13.636-.9-10.939-.9-10.939z" fill="#45332c" fill-rule="evenodd"/><path d="M19.331 13.043s-3.966-3.487-4.945-5.844c-.904-2.176-.6-7.043-.6-7.043s7.166 3.172 13.17 5.076c3 .953 7.174.818 12.08 1.929 4.907 1.11 10.865 3.784 10.865 3.784L48.85 6.3l6.894 5.544 3.896-9.29 3.596 9.74 7.643-5.695-1.499 4.646s6.731-2.78 10.639-3.747c3.908-.965 8.456-.707 12.737-1.873 4.281-1.165 12.737-5.17 12.737-5.17s-.35 4.496-1.199 6.594c-.849 2.098-3.896 5.994-3.896 5.994s6.142 7.34 7.343 12.438c1.2 5.097 1.137 11.9-1.199 16.933s-6.847 9.09-11.688 11.389c-4.842 2.298-10.806 2.824-15.734 1.798-4.928-1.026-9.334-4.78-12.438-7.193s-6.444-6.593-6.444-6.593-4.605 5.051-7.942 7.492c-3.336 2.442-7.178 5.841-12.138 6.744-4.96.902-11.333.372-16.184-2.398-4.85-2.77-9.06-8.213-10.789-13.337s-.665-10.657.45-15.285 5.694-11.988 5.694-11.988z" fill="#785647" fill-rule="evenodd"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734"/>
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732"/>
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<path d="M34.232 104.03l-.344 6.305 3.284 8.9 3.391-6.781 2.12 7.629 3.92-7.735 2.119 6.04 2.86-6.146 1.167-7.312zM65.57 105.35l5.616 13.563 2.437-6.676 2.437 8.16 3.709-8.054 2.33 6.676 3.71-9.007-1.166-6.781z" fill="#f59e01" fill-rule="evenodd"/><path d="M21.064 60.248s-1.255 4.953-1.199 7.642c.056 2.69 1.649 8.242 1.649 8.242l1.648-3.896s-.085 7.66 1.086 11.09c1.172 3.427 5.058 8.091 5.058 8.091l.15-4.196s.463 3.721 1.948 5.844 7.343 5.845 7.343 5.845l-7.043 7.792 5.094.6-2.547 2.397s4.28-.363 5.994-1.349c1.715-.986 3.896-4.196 3.896-4.196s1.782 3.081 3.121 3.966c1.34.885 4.664.917 4.664.917s-.704-3.049-.442-3.234c.32-.227 2.997 1.798 2.997 1.798l-.45-2.098 11.538-.15-.45 2.847 3.783-.837-.869 2.111s4.14-.577 4.938-1.413c.797-.835 3.537-3.607 3.537-3.607s3.022 3.412 4.646 4.196c1.623.784 4.495.75 4.495.75l-2.547-2.698 6.144.45s-3.181-3.102-4.346-4.646-2.697-4.495-2.697-4.495 5.457-2.504 6.893-4.496 1.648-6.294 1.648-6.294l1.218 4.566s3.437-5.57 4.327-7.862c.89-2.293.717-3.393.899-5.245s.15-5.844.15-5.844l1.798 2.697s1.37-7.276 1.498-9.89c.128-2.615-.3-5.694-.3-5.694l-40.758 4.345z" fill="#785647" fill-rule="evenodd"/><path d="M36.563 61.997l-5.006 6.939s4.14 1.15 6.252.953c2.112-.197 6.04-2.119 6.04-2.119s-1.236 3.934-2.331 5.404c-1.096 1.47-3.921 3.285-3.921 3.285s4.698.717 6.993.212c2.296-.505 6.358-3.179 6.358-3.179l-1.59 6.888 7.63-8.795 3.062 16.27 3.19-16.482 6.463 8.795-.636-7.206s2.438 2.334 4.45 3.073 7.418.742 7.418.742l-5.26-8.59s2.796 1.16 4.795 1.35c2 .19 7.043-.6 7.043-.6l-4.645-7.193s-8.02-.125-11.913-.899c-1.947-.387-6.65-2.862-8.88-3.889s-3.15-.13-3.15-.13-6.802 3.06-10.823 4.146c-4.021 1.085-11.539 1.025-11.539 1.025z" fill="#ffe8bb" fill-rule="evenodd"/><path d="M53.047 37.768s4.706-3.805 7.343-3.746c2.637.059 6.593 3.746 6.593 3.746S63.06 66.979 60.54 66.989c-3.12.012-7.492-29.221-7.492-29.221z" fill="#f59e01" fill-rule="evenodd"/>
<animate
id = "yellowEye"
xlink:href="#yellow"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye.end+12s;"
/>
<animate
id = "yellowEye2"
xlink:href="#yellow2"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye2.end+12s;"
/>
<animate
id = "blackEye"
xlink:href="#black"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye.end+12s;"
/>
<animate
id = "blackEye2"
xlink:href="#black2"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye2.end+12s;"
/>
<animate
id = "whiteEye"
xlink:href="#white"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye.end+12s;"
/>
<animate
id = "whiteEye2"
xlink:href="#white2"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye2.end+12s;"
/>
</svg>

In SMIL you can use the event mouseover. Since you want the eyes to blink simultaneously I've putted the eyes in a group and I'm targeting the group:
begin="2s; theGroup.mouseover; whiteEye2.end+12s;"`
However you won't get a blink when mousing between the eyes. To fix this I'm adding to the group a rect behind the eyes:
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
The rect has no fill so you need to add pointer-events="all" in order to make it sensitive to the mouse.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto;">
<g id="theGroup">
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734" />
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732" />
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<animate id="yellowEye" xlink:href="#yellow" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="yellowEye2" xlink:href="#yellow2" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye" xlink:href="#black" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye2" xlink:href="#black2" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye" xlink:href="#white" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye2" xlink:href="#white2" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; whiteEye2.end+12s;" />
</g>
</svg>

css transition duration doesn't work with vector-effect: non-scaling-stroke

I have two svgs with different viewports. I use vector-effect: non-scaling-stroke to make stroke-width the same for both svgs.
The problem is that when I use vector-effect: non-scaling-stroke, duration of css transition doesn't work.
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
Example with working animation without vector-effect: non-scaling-stroke rule.
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
/* vector-effect: non-scaling-stroke; */
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
Animation doesn't work with vector-effect: non-scaling-stroke rule.
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
vector-effect: non-scaling-stroke;
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>

I think the problem here doesn't lie with the transition duration. If, for example, you change the timing function from cubic-bezier() to linear you'll see that the duration value is honoured in both states. The issue therefore may lie with the bezier-values for the un/toggled state of #pause > #circleStroke.
Adding a CSS transition to #circleStroke.play may be one way of addressing this, and while something like this...
...
#circleStroke {
transition: all 800ms cubic-bezier(0, 0.25, 0.01, 0.99);
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
transition: all 800ms cubic-bezier(0.99, 0.01, 0.25, 0);
stroke-dashoffset: 0;
}
...
... may be a little extreme it does show that each state of #pause > #circleStroke can operate to it's own transition timing function.
I generally prefer to do this sort of thing with CSS animate rather than transitions - something I picked up a while back from Jake Archbald's blog here.
Additionally, you can also use Element.classList.toggle('class') for your state-changing function...
document.getElementById("pause").addEventListener("click", function( event ) {
document.getElementById("circleStroke").classList.toggle('play');
}, false);
... Not part of the question I know, but a little tidier nonetheless.
Hoped that helps :)

SVG Path rotation center

please help me.
I have a SVG image. I need to animate many objects from this SVG.
But provides animation objects move is unclear on what axis. I need to object rotate around its axis.
Video screen: http://dropix.net/view/1411265678541e348e45f2d/
CSS
#-webkit-keyframes svg_atom_1 {
0% {
}
100% {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
}
}
.element-atom-1 {
-webkit-animation: svg_atom_1 13s linear infinite;
animation: svg_atom_1 3s linear infinite;
z-index: 999;
position: absolute;
}
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="320" viewBox="0 0 960 320">
<path class="element-clock" fill="#ED1E79" d="M485 90h2v7h-2zM525.07 99.488l1.369.889-4.444 6.845-1.369-.889zM552.711 128.25l.853 1.392-6.958 4.263-.853-1.392zM554.365 205.887l-.819 1.41-7.056-4.1.819-1.41zM526.35 235.354l-1.396.845-4.224-6.982 1.396-.845zM486.872 245.342l-1.631.033-.166-8.159 1.631-.033zM448.369 236.372l-1.494-.658 3.29-7.468 1.494.658zM418.988 206.991l-.69-1.479 7.394-3.452.69 1.479zM408.441 168.492l.048-1.631 8.157.239-.048 1.631zM418.398 129.659l.852-1.39 6.957 4.265-.852 1.39zM446.366 101.147l1.375-.877 4.388 6.881-1.375.877zM564.358 167.014l-.017 1.633-8.16-.087.017-1.633z"/>
<path fill="#FF7BAC" d="M485.867 86.432"/>
<path opacity=".6" fill="#FBB03B" d="M486 86v87l39.443 64.233s42.257-20.391 41.319-69.906c.001 0-.093-73.445-80.762-81.327z"/><circle fill="#0cc" stroke="#0cc" stroke-width="1.558" stroke-miterlimit="10" cx="485.674" cy="167.864" r="50.004"/><g fill="#666766">
<path class="element-clock-2" d="M556.291 183.288l.363-1.702 5.116 1.092-.363 1.702zM554.28 190.604l.537-1.656 4.976 1.614-.537 1.656zM551.463 197.599l.707-1.59 4.78 2.126-.707 1.59zM543.784 210.531l1.025-1.407 4.228 3.081-1.025 1.407zM538.99 216.323l1.168-1.295 3.883 3.502-1.168 1.295zM533.599 221.605l1.293-1.163 3.498 3.889-1.293 1.163zM527.665 226.295l1.41-1.023 3.069 4.233-1.41 1.023zM514.518 233.676l1.59-.711 2.134 4.772-1.59.711zM507.458 236.304l1.655-.538 1.617 4.973-1.655.538zM500.109 238.136l1.705-.363 1.09 5.115-1.705.363zM492.673 239.234l1.732-.181.543 5.203-1.732.181zM477.605 239.054l1.732.181-.543 5.203-1.732-.181zM470.18 237.775l1.703.363-1.091 5.116-1.703-.363zM462.933 235.745l1.655.538-1.618 4.974-1.655-.538zM455.912 232.976l1.594.711-2.131 4.777-1.594-.711zM442.944 225.278l1.409 1.022-3.072 4.233-1.409-1.022zM437.163 220.444l1.295 1.163-3.495 3.891-1.295-1.163zM557.583 175.896l.182-1.729 5.203.547-.182 1.729zM427.216 209.122l1.023 1.407-4.229 3.076-1.023-1.407zM419.822 195.986l.708 1.589-4.777 2.127-.708-1.589zM417.188 188.931l.535 1.657-4.979 1.608-.535-1.657zM415.338 181.617l.362 1.702-5.114 1.088-.362-1.702zM414.241 174.129l.182 1.729-5.201.546-.182-1.729zM414.421 159.06l-.182 1.73-5.201-.546.182-1.73zM415.687 151.623l-.362 1.704-5.114-1.088.362-1.704zM417.729 144.367l-.535 1.657-4.974-1.606.535-1.657zM419.818 138.965l.708-1.588-4.776-2.132-.709 1.595zM428.218 124.402l-1.024 1.408-4.232-3.076 1.024-1.408zM433.027 118.605l-1.164 1.292-3.887-3.502 1.164-1.292zM438.441 113.332l-1.295 1.165-3.498-3.888 1.295-1.165zM444.331 108.667l-1.409 1.021-3.069-4.235 1.409-1.021zM457.476 101.299l-1.594.708-2.124-4.781 1.594-.708zM464.563 98.657l-1.654.539-1.621-4.974 1.654-.539zM471.877 96.828l-1.703.362-1.089-5.116 1.703-.362zM479.347 95.748l-1.731.184-.552-5.2 1.731-.184zM557.768 160.835l-.182-1.73 5.201-.546.182 1.73zM556.672 153.363l-.363-1.704 5.114-1.09.363 1.704zM554.813 146.033l-.537-1.657 4.976-1.613.537 1.657zM551.48 137.377l.708 1.588 4.779-2.125-.707-1.595zM544.839 125.832l-1.025-1.408 4.228-3.078 1.025 1.408zM540.148 119.917l-1.168-1.292 3.878-3.506 1.168 1.292zM534.882 114.501l-1.293-1.165 3.501-3.885 1.293 1.165zM529.04 109.707l-1.41-1.021 3.067-4.234 1.41 1.021zM516.11 102.015l-1.589-.708 2.128-4.778 1.589.708zM509.086 99.235l-1.654-.539 1.621-4.976 1.654.539zM501.82 97.148l-1.705-.362 1.088-5.118 1.705.362zM431.844 215.055l1.164 1.295-3.89 3.497-1.164-1.295zM494.407 95.93l-1.731-.184.551-5.203 1.731.184z"/></g><g stroke-width="2" fill="none"><ellipse stroke="#66899A" cx="481.409" cy="170.426" rx="20.336" ry="149.132"/><ellipse transform="matrix(-.913 -.407 .407 -.913 851.879 521.925)" stroke="#E1D85D" cx="481.409" cy="170.426" rx="149.132" ry="20.336"/><ellipse transform="matrix(.913 -.407 .407 .913 -27.699 210.541)" stroke="#80A3CF" cx="481.409" cy="170.426" rx="149.132" ry="20.336"/></g><circle fill="#66899A" stroke="#fff" stroke-width="2" cx="497.508" cy="78.931" r="14.405"/>
<path class="element-atom-1" fill="#E5D015" stroke="#fff" stroke-miterlimit="10" d="M555.479 200.33h5.568v-4.019c4.071-.985 6.582-3.812 6.582-7.565 0-3.842-2.041-6.195-6.825-7.868-1.756-.639-3.786-1.476-3.786-2.225 0-.985 1.384-1.137 2.207-1.137 2.407 0 3.947.741 4.869 1.183l1.059.507.336-1.116 1.32-4.962-.733-.346c-.976-.459-2.537-1.033-4.842-1.23v-3.335h-5.568v3.731c-3.866 1.005-6.249 3.741-6.249 7.334 0 4.632 3.909 6.54 7.316 7.688 2.894.976 3.295 1.681 3.295 2.294 0 .912-1.314 1.32-2.615 1.32-2.536 0-4.644-.945-5.671-1.509l-1.098-.6-1.604 6.267v.001l.658.363c1.485.822 3.674 1.401 5.782 1.591v3.633z" /><g fill="#80A3CF" stroke="#fff" stroke-width="2">
<path d="M387.995 214.209c-8.832 0-15.991 5.506-15.991 12.301 0 3.331 1.725 6.36 4.524 8.574-.162 2.258-.706 5.021-2.281 6.51 3.134 0 6.337-1.963 8.362-3.498 1.683.463 3.493.716 5.385.716 8.832 0 15.991-5.503 15.991-12.301.001-6.796-7.158-12.302-15.99-12.302zM408.251 227.708c1.346-1.798 2.116-3.89 2.116-6.119 0-6.795-7.159-12.301-15.991-12.301-3.887 0-7.45 1.068-10.22 2.839 1.304-.246 2.667-.379 4.069-.379 9.511 0 17.221 6.059 17.221 13.531 0 2.945-1.193 5.673-3.228 7.89 2.02 1.535 5.228 3.503 8.362 3.503-2.228-2.115-2.388-6.804-2.329-8.964z"/></g>
<path fill="#DF5C4D" d="M536.5 137.833v61l-52 28.5-51-28.5v-61l51-28.5z"/>
<path fill="#BC4A3D" d="M530.5 141.387v53.893l-45.942 25.179-45.058-25.179v-53.893l45.058-25.18z"/><text transform="translate(456.5 186.333)" fill="#fff" font-family="'PTMono-Bold'" font-size="48">VS</text>
...
...
...
</svg>

Resources