June 10, 2015

SVG Weekly #6

This is the 6th edition of SVG Weekly (@SVGWeekly), a curated selection of interesting links to SVG tutorials, tools, experiments and talks. I also keep an eye on the wider world of data visualisation, and share compelling visualisations or projects, even if these aren't directly related to SVG.


Tutorials

The State of SVG Animation

Sara Soueidan reviews the current state of SVG animation options: SMIL, CSS and JavaScript.
 

How To Apply SVG Radial Gradients To A Fill Or Stroke

The latest SVG instalment from Steven Bradley on <radialGradient>.
 

Building SVG Icons with React

Brent Jackson builds a "stand-alone exploratory design tool" using Javascript and React that generates customisable SVG cog icons based on math and user input!
 

Animating SVG with GSAP

A collection of tricks for using Greensock to create SVG animations.
 

Toggling SVG without any scripting

Self-contained SVG buttons with animated state toggles using SMIL by Mike Harris
 

Creating an SVG icon workflow

A Gulp workflow for generating SVG icons and fallback images from Luke Whitehouse.
 

Tools

px2svg

A tool from Eric Meyer converts bitmaps to SVG, pixel by pixel to keep that vintage 8-bit look (but with all the scalable goodness of SVG)!
 

svg2d3

Generate d3.js code from SVG markup
 

SVG Morpheus

JavaScript library from Alex Kaul enabling SVG icons to morph from one to another using transition styles described in the Material Design section on Delightful details.
 

Foundry

A marketplace for vector illustrations and icons; think Github, but for SVG.
 

Glyph

A customisable SVG icon set distributed under a Creative Commons license
 

Experiments

Pencil wiggle by Elliot Geno

Mobile phone evolution

An SVG morphing experiment from Noel Delgado
 

Light bulbs

First, an animated steampunk motif from Sarah Drasner. And from Chris Gannon, an animated SVG lightbulb complete with switch.
 

SVG Pyramids

A lovely, atmospheric illustration from Mahmoud Elmahdi
 

SVG Zip(per) by Chris Gannon

Inspiration

Learning Data Visualization

Nadieh Bremer shares a collection of resources she uses to her data visualization skills and knowledge.
 

Designing Web Tutorials For Kids

Joni Trythall describes the inspiration and process behind Tuts+ Town, a new web design tutorial series for children. Of particular note are the beautiful SVG illustrations. Joni is also the author of the Pocket Guide to Writing SVG
 

Practical Techniques On Designing Animation by Sarah Drasner

Logo Collection '14

The Crazy Ones show off some of their SVG logo design work. There's a great little switch on the page that puts the SVGs through their paces: restyling all the logos in full-color, black & white, and reversed on a dark background.
 

Someone to follow

Sarah Drasner is a Senior UX Engineer at Trulia and an amazing illustrator & animator who does interesting work with SVG. You should follow her on Twitter, CodePen, and her blog. Her animation portfolio is also well worth your time.


That's all for this week. Please send suggestions and links to curator@svgweekly.com or @SVGWeekly.