Skip to main content
CSS is fun and cool and I like it.
Article

A Trick That Makes Drawing SVG Lines Way Easier

When drawing lines with SVG, you often have a <path></path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that the entire stroked path appears hidden initially. Then you animate the stroke-offset back to 0 so you can watch it “draw” the shape.

Figuring out the length of the path is the trick, which fortunately you can do in JavaScript by selecting the … Read article “A Trick That Makes Drawing SVG Lines Way Easier”

Link

iconsvg.xyz

Link

Sketch Now Replicates Inside & Outside Stroke Alignment

Almanac

stroke-dasharray

The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.

.module {
  stroke-dasharray: 5;
}

Remember:

  • This will override a presentation attribute <path stroke-dasharray="5" ... />
  • This will not override an inline style e.g. <path style="stroke-dasharray: 5;" ... />
Values

The stroke-dasharray property can accept any length, including unitless values:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Unitless values are … Read article “stroke-dasharray”

Article

Scroll Drawing

We’ve taken an in-depth look at how SVG line drawing works before. It’s a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you can move it such that it covers the entire path again, which makes it appear as if it’s drawing itself.

Using a bit of JavaScript, we can get a little fancier, drawing the shape to completion as page is scrolled … Read article “Scroll Drawing”