Dominikus Baur Interfacery - Data Visualization - How to make fast animated HTML5 visualizations Update: Jeremy Stucki from Interactive Things quickly hacked together an impressive demo of >500 animated, flower-like shapes in SVG - showing that complex animations can also be done using vector graphics. Still, it lacks some of the details (gradients! text labels!) and while working great on a reasonably fast laptop, it's similar in speed to our Canvas-BLI on an iPad 3/iPhone 4S. One thing that people tend to forget in today's HTML5-ed world is how extremely fast Flash actually was and still is. I had to learn the restrictions of HTML5 with the revamp of the OECD's Better Life Index. The OECD Better Life Index (BLI) is an appealing, web-based visualization of various quality-of-life indicators for a set of 36 countries. Every time these settings are changed, the flowers representing the countries adjust by changing their petals' colors and sizes (each petal represents one quality-of-life indicator). Flower animations in the (Flash) Better Life Index (click to see the animation).
Paper.js — About Paper.js — The Swiss Army Knife of Vector Graphics Scripting. Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development. Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users. Paper.js is developed by Jürg Lehni & Jonathan Puckey, and distributed under the permissive MIT License. Getting Started First of all, take a look at some of our examples.Download Paper.js or check out the latest version from our Github Repository.Want to learn Paper.js? Overview Browser Support
Playing with paper.js and background animations | Help I'm trapped in a code factory! After starting my blog, I got a few comments on my @gguuss twitter account about the animated background that I have. So, I figured I would write a short post about it. What is paper.js? I’m sure that its creators will scoff at me for saying this, but in my simple mind, paper.js takes canvas and makes it better. You get new (advanced) path objects, a scene graph, more efficient draw routines, and performant input / interaction. So, how about that background animation… Looks a lot like an example Rather than jump into the paper.js API set and reference, I started with an example. The code does some pretty interesting things considering how concise the code is. Setting my background to canvas After seeing the demo, I decided I wanted… no had to … set this as a background for my blog. All this does is position the div so that the other elements aren’t “moved” by it, moves it to the back (z-index -1) and then fills the canvas to the size of the screen. Changing the shape: Ahhh!
Animate SVG icons with CSS and Snap How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library. Browser support ie Chrome Firefox Safari Opera 9+ Working with SVG files is not an option anymore. With a huge amount of high definition devices out there, it’s not sustainable to export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. We need to rely on vector graphics whenever it’s possible. Today’s resource is a very simple icon, that we imported as inline SVG into our index.html file. If you’re new to SVG, here are some great resources to start with: Creating the SVG The easiest way to create an SVG illustration is to use graphic editors such as Adobe Illustrator or Sketch. Take in mind, though, that the way you organize your layers in your graphic editor is gonna affect the code output. While exporting .svg from AI, default settings work just fine. Some points to take in mind while creating SVGs in a graphic editor: Optimizing SVG code That’s it!
Animating SVG with CSS There isn't just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS. I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we're running here. The finished product is pretty simple. Let's check out how it's done. 1. This might seem like an how to draw an owl moment, but this article is about animation so let's get there as quickly we can. My plan for this ad was to make a super simple Wufoo ad with their classic logo, colors, and general branding. Make the letters kind hop off the page a little. I put all the parts together in Illustrator. Notice how the logo and tagline text are outlines. When I save this out from Illustrator, that will be left as a <text> element. 2. Illustrator can save this directly as SVG: 3.