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>
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.
With some creative layering and masking, you can confine the scalloped edge to the inside or outside of your path.
Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud.
Morphing is fun
Morphing shapes with a circle border creates some cool results.
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.
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’.