Could someone help me with the amination of an svg? I am trying to create an animation of the pump impeller. What I want is for the last 4 elements of svg to do a rotating impeller effect. Make it look like it is rotating. The real effect would be to raise the elements one position and the one that is left above appears below and so on while it is on. I have no idea how it could be done. Thanks a lot
icon_return_pump_1:
styles:
custom_fields:
icon:
- margin-left: -15%
custom_fields:
icon: >
[[[
let state = 'on';
return `
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="55.000000pt" height="55.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<style>
.start {
}
.on {
}
.end {
}
.start_timeout {
}
.end_timeout {
}
@keyframes on {
0% {
transform: scale(0.5);
}
20% {
transform: scale(1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
transform-origin: center;
}
</style>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path fill="#9da0a2" d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z"/>
<path fill="#9da0a2" d="M960 2400 l0 -1120 160 0 160 0 0 -80 0 -79 -429 -3 c-416 -3 -430 -4 -457 -24 -64 -47 -69 -63 -69 -214 0 -151 5 -167 69 -214 l27 -21 2139 0 2139 0 27 21 c64 47 69 63 69 214 0 151 -5 167 -69 214 -27 20 -40 21 -537 24 l-509 3 0 159 0 160 160 0 160 0 0 80 0 80 -480 0 -480 0 0 -80 0 -80 160 0 160 0 0 -160 0 -160 -880 0 -880 0 0 80 0 80 160 0 160 0 0 1120 0 1120 -480 0 -480 0 0 -1120z"/>
<path fill="#9da0a2" d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z"/>
<path fill="#9da0a2" d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z"/>
<path fill="#9da0a2" d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
<path fill="#9da0a2" d="M3040 3280 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
<path fill="#9da0a2" d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z"/>
<path fill="#9da0a2" d="M3040 2880 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
<path fill="#9da0a2" d="M3040 2400 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
<path fill="#9da0a2" d="M3040 1920 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
</g>
</svg>
`;
]]]
CodePudding user response：
This is how I would do it: I would replace those paths with a very thick line with a stroke-dasharay and I would animate the stroke-dashoffset of the line.
@keyframes on {
100% {
stroke-dashoffset:1920
}
}
.on {
animation: on 0.8s infinite;
}<svg viewBox="0 0 512.000000 512.000000"width="200" >
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#9da0a2" stroke="none">
<path d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z" />
<path d="M960,2400L960,1280L1120,1280L1280,1280L1280,1200L1280,1121L851,1118C435,1115,421,1114,394,1094C330,1047,325,1031,325,880C325,729,330,713,394,666L421,645L2560,645L4699,645L4726,666C4790,713,4795,729,4795,880C4795,1031,4790,1047,4726,1094C4699,1114,4686,1115,4189,1118L3680,1121L3680,1280L3680,1440L3040,1440L3200,1440L3360,1440L3360,1280L3360,1120L2480,1120L1600,1120L1600,1200L1600,1280L1760,1280L1920,1280L1920,2400L1920,3520L1440,3520L960,3520L960,2400Z" />
<path d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z" />
<path d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z" />
<path d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z" />
<path d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
<path stroke="#9da0a2" stroke-width="970" d="M3530 3360V1440" stroke-dasharray="250 150" />
</g>
</svg>Observation: I've modified the second path since I wanted to remove the bit corresponding to the rotating engine.