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”

Video

#172: Hand SVGing a Curved Line

I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG code. Hey, I’ve even got a book about all that.

But once in a while, it’s appropriate, and maybe even a little bit fun. In this case, I wanted to draw a pretty specific line with a couple of … Read article “#172: Hand SVGing a Curved Line”

Article

An Initial Implementation of clip-path: path();

One thing that has long surprised (and saddened) me is that the clip-path property, as awesome as it is, only takes a few values. The circle() and ellipse() functions are nice, but hiding overflows and rounding with border-radius generally helps there already. Perhaps the most useful value is polygon() because it allows us to draw a shape out of straight lines at arbitrary points. … Read article “An Initial Implementation of clip-path: path();”

Article

Basic Shapes & Path… Never the Twain Shall Meet?

There are some values available in CSS that allow shapes to be drawn. For example, there is a circle() function that is a valid value for a couple of CSS properties. “Drawn” might not be the right word, though. It’s not like in SVG where you can create a <circle></circle> element and it will literally draw a circle. … Read article “Basic Shapes & Path… Never the Twain Shall Meet?”

Article

The SVG `path` Syntax: An Illustrated Guide

The <path></path> element in SVG is the ultimate drawing element. It can draw anything! I’ve heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It’s a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason … Read article “The SVG `path` Syntax: An Illustrated Guide”