Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
stroke-dasharray

6 Articles
{
,

}
Direct link to the article How stroke-dasharray Patterns Work
patterns stroke-dasharray SVG

How stroke-dasharray Patterns Work

Say you have a line in SVG:

<svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svg

You can use the stroke-dasharray property in CSS to make dashes:

line {
  stroke-dasharray: 5;
}

That 5 value is a relative unit based …

Avatar of Geoff Graham
Geoff Graham on Jul 15, 2022
Direct link to the article How to Get Handwriting Animation With Irregular SVG Strokes
stroke-dasharray SVG animation

How to Get Handwriting Animation With Irregular SVG Strokes

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms …

Avatar of Trapti Rahangdale
Trapti Rahangdale on Sep 11, 2020 (Updated on Sep 14, 2020)
Direct link to the article Line-Animated Hamburger Menu
hamburger stroke-dasharray SVG animation

Line-Animated Hamburger Menu

This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and …

Avatar of Chris Coyier
Chris Coyier on Jun 26, 2020
Direct link to the article A Trick That Makes Drawing SVG Lines Way Easier
path stroke stroke-dasharray SVG

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 …

Avatar of Chris Coyier
Chris Coyier on Jan 14, 2020 (Updated on Feb 28, 2020)
Direct link to the article stroke-dasharray
stroke stroke-dasharray SVG

stroke-dasharray

The stroke-dasharray property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating dashes and the gaps between them.…

Avatar of Geoff Graham
Geoff Graham on Jan 18, 2016 (Updated on Jul 13, 2022)
Direct link to the article Scroll Drawing
pathLength stroke stroke-dasharray SVG

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 …

Avatar of Chris Coyier
Chris Coyier on Aug 10, 2015 (Updated on Jan 27, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top