greeting the next code(two circle) it was run when mouse pointer hover over it, so the circle color change from one to another. i edit it so it now look like fan or some rotation animation, but it still need mouse pointer to run.
i hope find help for edit it so it auto run, and keep repeat(loop).
<html>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<defs>
<style>
.another-circle {
stroke-dasharray: 10;
stroke-dashoffset: 500;
transition: stroke-dashoffset 1s linear ;
}
.another-circle:hover {
stroke-dashoffset: 0;
}
</style>
</defs>
<circle cx="50" cy="50" r="36" fill="transparent" stroke="red" stroke-width="4" />
<circle transform="rotate(-90 40 40)" class="another-circle" cx="30" cy="50" r="36" fill="transparent" stroke="blue" stroke-width="60" />
</svg>
</body>
</html>thanks in advance
What about using animation instead? It will run without hovering or using JavaScript.
Instead of animating the dasharray (dashoffset) I will go for transform/rotate. The dasharray is a bit tricky in this case because it is cut off.
.another-circle {
stroke-dasharray: 10;
transform-origin: center;
animation: rotateme 1s linear infinite;
}
@keyframes rotateme {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<circle cx="50" cy="50" r="36" fill="none" stroke="red" stroke-width="4" />
<circle class="another-circle" cx="50" cy="50" r="36" fill="none" stroke="blue" stroke-width="60" pathLength="200" />
</svg>