To animate an SVG stroke with vanilla JS without using an ID, you can use the querySelectorAll()
method to select all the SVG path elements that you want to animate. Then you can use a forEach
loop to iterate over the selected path elements and apply the animation to each one.
Here’s an example code snippet that uses the stroke-dasharray
and stroke-dashoffset
properties to create a dash animation effect.
Example with duration 5000 ms:
The setup in Bricks:
Replace your own svg element. This is just example svg element with black stroke:
<svg viewBox="0 0 100 100">
<path d="M10 10 L90 90" stroke="black" stroke-width="4" fill="none"/>
<path d="M90 10 L10 90" stroke="black" stroke-width="4" fill="none"/>
</svg>
Copy and paste below JS code to code block. Make sure wrap with <script> tag.
const paths = document.querySelectorAll("svg path");
paths.forEach((path) => {
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
path.animate(
[{ strokeDashoffset: length }, { strokeDashoffset: 0 }],
{
duration: 1000, //Adjust your desire duration here
easing: "linear",
fill: "forwards",
}
);
});
In this example, we first get all the path
elements in the SVG using querySelectorAll()
. Then we iterate over each path
element using forEach
and get the total length of each path using the getTotalLength()
method.
We then set the stroke-dasharray
property to the length of the path, which creates a dashed line with the same length as the path. We also set the stroke-dashoffset
property to the same length, which hides the dashed line behind the path.
Finally, we use the animate()
method to animate the strokeDashoffset
property from the path’s total length to 0 over a duration of 1000 milliseconds with a linear easing function. The fill: "forwards"
property ensures that the animation remains at its final state after it completes.