Some Pretty Splendid SVG Links

I’m always running across wonderful SVG stuff. Demos, tutorials, tools, art… some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this!

Some of these are pretty new. Some of them are not, but I found them useful recently or are new-to-me.

SVG Calendar

CJ Gammon wrote about programmatically creating a calendar layout with SVG using Snap.svg.

See the Pen Calendar Generator by CJ Gammon (@cjgammon) on CodePen.

Which he used to make a calendar for his family!

SVGeneration

SVGeneration has “recipes” for a bunch of pretty classy SVG-based patterns. It’s little JavaScript functions that take parameters (which you can adjust) that output the pattern. So you have some control, and can ultimately copy-and-paste the SVG code you want.

SVG Nest

Say you have some shapes you want to cut out of a sheet of paper (or any other material). How can you best arrange them to make the best of use of that material? SVG Nest is for that.

This is a common problem if you use a laser cutter, plasma cutter, CNC machine etc. In computer terms this is called the irregular bin-packing problem.

BrooklynJS SVG Morphing Slides

I gave a very short talk at BrooklynJS the other day about SVG shape morphing. Here’s the slides:

SVG Summit Wrap Up Slides

I also spoke at the SVG Summit, and did the wrap-up talk at the end. Here are the slides:

PostCSS Inline SVG

PostCSS Inline SVG is a plugin for PostCSS that allows you to reference an SVG file then control it’s attributes with CSS syntax.

This:

@svg-load nav url(img/nav.svg) {
    fill: #cfc;
    path:nth-child(2) {
        fill: #ff0;
    }
}
.nav {
    background: svg-inline(nav);
}

Turns to this:

.nav {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E");
}

This is PostCSS at it’s best, if you ask me. It’s a clever and useful idea that invents a new syntax to accomplish the idea (so it doesn’t step on future-toes), yet feels familiar and somewhat like a standard CSS feature.

Generate Beautiful SVG Polygons

A demo by Sten Hougaard that generates randomized blogs of SVG polygons:

See the Pen Generate beautiful SVG polygons by Sten Hougaard (@netsi1964) on CodePen.

logomono

As they say: “Robust, single-color, bare-bones” SVG logos. It’s a big repository of logos, but also the page for the project has some ideas on how SVG logos can be best served. Like how to handle the on-light or on-dark problem in a single logo and how much space around logos is best for rendering.

logomono is a work in progress.

SVG Icons by SPARKK

Ever need to snag some SVG code really quick? I like The Noun Project for that a lot, but even with that (or it’s awesome app) there are a few steps. With SVG Icons you just click on the one you want and copy the code.

Icon Jar

Speaking of The Noun Project app, if you like that, maybe you’ll like Icon Jar even more, which is like your own local, customizeable, more powerful version. But still at it’s heart, drag and drop icons you need out of it.

SVG Animated Drum Kit

Play it! Very cool demo by Josh Ellis.

See the Pen SVG Animated Drum Kit (Play Me!) by Josh (@iamjoshellis) on CodePen.

Newsletter / Podcast

If you love hearing about new SVG stuff all the time, as I do, Jachin Sheehy has a weekly newsletter called SVG Weekly and Rob Levin has a podcast called SVG Immersion.