get your pixels movin'
The logo does tricks:

SVG stroke-dasharray experiment

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="" 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" />

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’.

If you found this information useful, please help me get the word out to the interwebs. I appreciate it. You're awesome!

Published: June 14, 2020 Last Updated: July 13, 2020

You might dig these articles too

No algorithm. Just hand chosen artisanal links.