Infinite Repeating Dashed Lines in SVG

Infinite Repeating Dashed Lines in SVG

With a continuation of the last blog post this time I’ll quickly show you how to do the repeating animations so that you can show off and flex your skills on a website. It’s best I show you a codepen that has the full source code. To make them move in the opposite direction, make sure the number is negative like so. Now add 2 css classes, one for dashed animations to move to the left, the other one to move to right:

You’ll want to make sure you add the and values to make sure it constantly repeats. The lines will move in the opposite direction.

Source: www.maxmin.io