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 you that it's initially hidden. 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 path and … Read article

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