Revision control
Copy as Markdown
<svg width="400" height="450" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#dot1 {
offset-path: path("M200 50 L150 100 L250 100 Z");
animation: 6000ms triangle-path infinite;
offset-rotate: auto;
}
#dot2 {
offset-path: path("M200 50 L150 100 L250 100 Z");
offset-rotate:35deg;
animation: 6000ms triangle-path infinite;
}
#dot3 {
offset-path: path("M200 50 L150 100 L250 100 Z");
offset-rotate: auto 35deg;
animation: 6000ms triangle-path infinite;
}
#dot4 {
offset-path: path("M200 50 L150 100 L250 100 Z");
offset-rotate: reverse;
animation: 6000ms triangle-path infinite;
}
#dot5 {
offset-path: path("M200 50 L150 100 L250 100 Z");
offset-rotate: reverse 35deg;
animation: 6000ms triangle-path infinite;
}
@keyframes triangle-path {
0% {offset-distance: 30%;}
100% {offset-distance: 70%;}
}
}
</style>
<text y="80" fill="black"> Auto </text>
<g transform="translate(80, 0)">
<path stroke="green" stroke-width="1" d="M200 50 L150 100 L250 100 Z"/>
<rect id="dot1" width="6" height="8" fill="red"/>
</g>
<text y="160" fill="black"> Angle = 35deg </text>
<g transform="translate(80, 80)">
<path stroke="green" stroke-width="1" d="M200 50 L150 100 L250 100 Z"/>
<rect id="dot2" width="6" height="8" fill="red"/>
</g>
<text y="240" fill="black"> Auto with angle = 35deg </text>
<g transform="translate(80, 160)">
<path stroke="green" stroke-width="1" d="M200 50 L150 100 L250 100 Z"/>
<rect id="dot3" width="6" height="8" fill="red"/>
</g>
<text y="320" fill="black"> Reverse </text>
<g transform="translate(80, 240)">
<path stroke="green" stroke-width="1" d="M200 50 L150 100 L250 100 Z"/>
<rect id="dot4" width="6" height="8" fill="red"/>
</g>
<text y="400" fill="black"> Reverse with angle = 35deg </text>
<g transform="translate(80, 320)">
<path stroke="green" stroke-width="1" d="M200 50 L150 100 L250 100 Z"/>
<rect id="dot5" width="6" height="8" fill="red"/>
</g>
</svg>