Lemme show off some cool SVG-related things this week. Gotta love SVG. It’s this graphics language built right into the web platform that has a ton of capability and is always right there waiting for us when we need it. Thanks the web!

Portability is a cool SVG feature. You can copy and paste a bit of SVG right into HTML and that’s not only functional but actually, a pretty good way to do it. That way you can style it freely and no additional network request is made.

Ya know… that’s how our icons feature works here on CodePen.

The Assets panel on CodePen offers one-click SVG icons from Font Awesome.

And it’s a decently common way to deliver UX on a set of SVG icons generally. For example, check out Monika Michalczyk’s Shapes project, where you can just click any of them and get all the code right on your clipboard. They paste into Pens really nicely, of course.

I like how weird they all are. Nothing practical in here, just lovely interesting shapes. I bet they would morph into each other in fun ways.

Or here’s Robb Knight’s Mac 30th Anniversary Icons which are super cool minimalist representations of Macs over the last many decades.

No click-to-copy here, but the downloaded versions you can drag-and-drop into the CodePen editor if you want to play with them there.

You can learn the SVG syntax. I guess that’s kinda obvious but maybe not to everybody as SVG is often the output of tools. You can export SVG from Figma and Illustrator and stuff and you didn’t have to learn the syntax, you just use the output.

Just SVG paths alone are fairly complicated and something of a sub-syntax. I wouldn’t say I know it super duper well, but I know enough that I wrote a guide a while back.

Some of the other attributes of SVG elements are a bit more straightforward like circle essentially has a central point at an X, Y coordinate and then a radius. Sébastien Noël has a new guide on fffuel that helps understand a lot of these syntaxes:

I just love interactive code examples like this.

But leave it to yuanchuan (creator of css-doodle) to Experimenting [with] A New Syntax To Write SVG. It’s centered around the idea that the stylistic SVG attributes can be moved to a CSS-like syntax, which doesn’t just select and style SVG, but creates it.

Check out how easy it is to play with on CodePen.

OK I saved the best for last for you: Draw SVG rope using JavaScript (and it’s not just because there is an excellent CodePen demo) from Stanko Tadić. And not just rope like a line that maybe has some basic physics, but real-looking twisted rope, like the kind that might be holding a large ship to dock. The journey, which is excellently documented, involves really digging into the SVG APIs, doing interesting math, and knowing about fancy algorithms and stuff (see “Chaikin’s method” for rounding). I like it when you can tell someone is clearly captivated by an idea, gets it all figured out, then documents it so well the output and the explanation are equally interesting.