Copy
SVG Weekly logo

This is edition 52 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

Dynamic duotone SVG images with feColorMatrix and Jade

Dynamic duotone SVG images with feColorMatrix and Jade

Ines Montani explores the duotone effect, how to achieve it using SVGs using feColorMatrix. Lots of detail on how to calculate the matrix values (and automate the calculations by templating the feColorMatrix tag).

Interactive Record Player

Interactive Record Player

Mary Lou whips up an experimental template with an interactive old school record player powered by the Web Audio API ... and good use of SVG throughout!

SVG Masking Examples — Paths, Gradients, And Patterns

SVG Masking Examples — Paths, Gradients, And Patterns

Having given us a thorough introduction to SVG masks in past few weeks, Steven Bradley turns his attention to the possibilities afforded by filling a mask with gradients and/or patterns.

Watch & Listen

Scripting SVG in Animate CC

Scripting SVG in Animate CC

Snap.SVG Animator is a plugin for Animate CC that allows you to design on the timeline and export animated SVG content leveraging the Snap.svg javascript library. The latest version supports scripting! CJ Gammon walks through the functionality in this screencast (Video - 9 minutes)

Tools

react-mt-svg-lines

react-mt-svg-lines

A React.js wrapper component to animate the line stroke in SVGs by using CSS to animate the `stroke-dashoffset` property of each `path` in the SVG.

Experiments

Pull To Launch by Chris Gannon

Pull To Launch by Chris Gannon

Where 'pull to refresh' meets outer space!

Show container height/width using SVG by Sten Hougaard

Show container height/width using SVG by Sten Hougaard

An SVG element which can be embedded and will update info about width and height as its size changes. Interesting use of an embedded script

Sans issue by Bailh

Sans issue by Bailh

Food for thought

Beautiful Programming

Beautiful Programming

An exploration of Aesthetics via Instruction

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