Set your stroke dash length to 0 and your linecap to round. This gets you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000"> <circle id="outline" r="360" fill="none" cx="500" cy="500" stroke="#00bfff" stroke-width="10" stroke-dasharray="0,10" stroke-linecap="round" /> </svg>
See the Pen Dotted circle stroke (GSAP 3) by Craig Roblewsky (@PointC) on CodePen.
Gap less than stroke-width
If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame.
See the Pen Scalloped edges on circle (GSAP 3) by Craig Roblewsky (@PointC) on CodePen.
Creative layering
With some creative layering and masking, you can confine the scalloped edge to the inside or outside of your path.
See the Pen Scalloped edges with stroke-dasharray by Craig Roblewsky (@PointC) on CodePen.
Multiple strokes
Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud.
See the Pen Clouds with stroke-dasharray (GSAP 3) by Craig Roblewsky (@PointC) on CodePen.
Morphing is fun
Morphing shapes with a circle border creates some cool results.
See the Pen Morph with dotted circle stroke (GSAP 3) by Craig Roblewsky (@PointC) on CodePen.
Can we make them move?
Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size brings them into position in an interesting manner.
See the Pen Animate strokeDasharray Gap (GSAP 3) by Craig Roblewsky (@PointC) on CodePen.
Final thoughts
It has its limits but produces some fun results. The main thing to remember is to set your stroke dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Have fun and keep those pixels movin’.
