Copy
SVG Weekly logo

This is edition 50 of SVG Weekly, a selection of interesting links to SVG tutorials, tools, experiments and talks curated by Jachin Sheehy. 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.

View this email in your browser

Tutorials

Creating data based SVG gradients with D3 - Visual Cinnamon

Creating data based SVG gradients with D3 - Visual Cinnamon

Nadieh Bremer continues her SVGs beyond mere shapes series with this tutorial on creating gradients based on data in D3.

Make an Advanced Adaptive Branding Module with SVG & JavaScript

Make an Advanced Adaptive Branding Module with SVG & JavaScript

Dudley Storey extends his previous efforts to make an adaptive SVG branding module: having conquered different sizes, he turns his attention to adapting the aspect ratio!

SVG Masking

SVG Masking

SVG masking offers a way to show and hide parts of a graphic element. The mask controls how much of the graphic is opaque or transparent. Steven Bradley continues his series on clipping and masking with SVG.

Radial SVG Slider

Radial SVG Slider

A simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements from Claudia Romano

English is not Chinese

English is not Chinese

Dave Landry investigates SVG text wrapping for languages that don’t use spaces and talks about his fix for the text-wrapping module in D3plus.

Creating a small 8-bit responsive drum machine using Web Audio, SVG & multi-touches

Creating a small 8-bit responsive drum machine using Web Audio, SVG & multi-touches

David Rousset goes retro with a small 8-bit drum machine with 8-bit sounds ... but the methodology is anything but retro: this beast is responsive, uses SVG where image maps fail, dives deep into the Web Audio API, and for good measure throws in an introduction to the Pointer Events API.

Watch & Listen

Supercharged Q&A: May 2016

Supercharged Q&A: May 2016

Paul Lewis and Alexander Surma talk about SVG rendering in Chrome. (Video - 5 minutes)

Tools

seen.js

seen.js

Render 3D scenes into SVG or HTML5 Canvas. Some incredibly clever ideas: like the ability to use SVG masks and filters in a scene for depth-of-field effects.

SVG Crowbar

SVG Crowbar

A useful bookmarklet (sadly for Chrome only) that extracts inline SVG nodes and their applied styles from an HTML document and downloads them as an SVG file: an editable, reusable file!

svgo-compressor plugin for Sketch

svgo-compressor plugin for Sketch

Optimise and compress SVG exports from Sketch, within Sketch (v3.8)!

Read the Spec

Proposal: Promote SVG Viewbox to a CSS property, extend to all transformable elements

Proposal: Promote SVG Viewbox to a CSS property, extend to all transformable elements

Okay, so this is not part of the spec yet, but ... it's a cracking idea. Imagine all the interesting responsive treatments that would be possible if all transformable elements had a viewbox approach their contents!

Food for Thought

How the Toronto Symphony Orchestra uses graphic design to guide its audiences though its music

How the Toronto Symphony Orchestra uses graphic design to guide its audiences though its music

A thought-provoking interview with Hannah Chan-Hartley of the Toronto Symphony Orchestra on the data visualisations they use in their printed concer programmes to guide audiences though the music.

13 Animals Made From 13 Circles

13 Animals Made From 13 Circles

From Dorota Pankowska, 13 animals made entirely from 13 circles; inspired by the constraints of the Twitter logo.

wrk - French Creative Web Studio

wrk - French Creative Web Studio

Just look at all that SVG!

Wandering Lines - Move Until a Collision

Wandering Lines - Move Until a Collision

Greg Tatum has created some clever, beautiful algorithmic art around line growth. Not SVG, but...

Nerding Out With Bézier Curves

Nerding Out With Bézier Curves

Nash Vail takes a deep dive into the math behind Bézier curves. It's certainly not a prerequisite for working with SVG but if you're ever in the business of generating graphics programatically, it helps to understand this.

That's all for this week. Please send suggestions and links to curator@svgweekly.com or @SVGWeekly.
Copyright © 2016 SVG Weekly, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by MailChimp