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

Articles Tagged
stroke

6 Articles
{
,

}
Direct link to the article Stroke Text CSS: The Definitive Guide
stroke SVG

Stroke Text CSS: The Definitive Guide

Whenever I think of stroked text on the web I think: nope.

There is -webkit-text-stroke in CSS for it, but it places that stroke in the middle of the vector outline of the characters, absolutely ensuring that the character …

Avatar of Chris Coyier
Chris Coyier on Sep 3, 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 iconsvg.xyz
icon system stroke SVG

iconsvg.xyz

There is a lot to like about Gaddafi Rusli’s ICONSVG.

  1. It provides inline <svg>, which is the most generically useful way to deliver them, and probably how they should be used anyway. Each icon is a tiny
…
Avatar of Chris Coyier
Chris Coyier on Feb 25, 2019
Direct link to the article Sketch Now Replicates Inside & Outside Stroke Alignment
sketch stroke SVG

Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week:

And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.

There still …

Avatar of Chris Coyier
Chris Coyier on Apr 13, 2017
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