Animate SVG with custom properties

[camwiegert]

This removes the circuit.js script in favor of an inline script that only sets the path length as a custom property. It then uses CSS to orchestrate the animation using that property.

<script>
    const lines = document.querySelector('#lines').children;
    [...lines].forEach(line => {
        line.style.setProperty('--length', line.getTotalLength());
    });
</script>

I also narrowed the content so it would collide less with the circuits.

Hope this helps! 👍

[jessfraz]

this is awesome, thanks! So I kinda liked that the points of the wire were shown first then the wires appeared, which gives it more of a circuit feel, is there a way to do that? wdyt

[camwiegert]

For sure! Just had to adjust the timing a bit.

[jessfraz]

Awesome, that's dope thanks!