Chart Animation with SVG and jQuery

SVG is an underrated tool. It seems people are more exited about Canvas because it’s simple. But SVG lets you do a lot of things with way less effort. It’s just scary because it’s so powerful.

Normally when I should do something in SVG I automatically start thinking about which library to use this time. But for most simple stuff (like charts) you don’t even need a library. All the styling can be done in CSS. And you can dynamically manipulate it with jQuery. Sounds familiar? - SVG just works like the DOM you’re used to work with! Look at this nice, animated graph below. Doesn’t it look like normal jQuery code? You can just start using SVG with your existing tools. Don’t be afraid of SVG. Canvas is not always the easier option for grafics.

Choose the right tool for the job.

Sir Sierpinski - PIXI.js Demo


The only really reason you create something with <canvas> is performance (think games). For almost all other 2D graphics you better use SVG. If you want speed WebGL ist even better. Luckily PIXI.js uses WebGL with Canvas fallback so you don’t have to worry about bad browser support and difficult APIs. And it works pretty well. Checkout out this demo. It re-calculates and re-draws this whole graphic every frame and still appears smooth. And as you can see the API is pretty straight forward.

Image Filtering Using a Canvas Element

Normally we don’t need to implement our own filters. Photoshop does a way better job than we could. But someone has to build Photoshop and the camera app on your phone, right?

As a web developer it might also be interesting to know how filtering actually works. It’s always good to understand the tools you work with and filters are part of the web now with the latest SVG and CSS updates.

So here are some basic filters implemented manually with just Javascript and the <canvas> element:

You can test the different filters and look at the code. It might surprise you how little code is neccessary. Feel free to play around and create some nice filters!

powered by Hugo © 2014 Jorin Vogel. All rights reserved.