background preloader

Paper.js — Tutorials

Paper.js — Tutorials

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!) 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). So, how do you re-create something like that without your comfy Flash tweens and animations? Share:   

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

David White I've been burning the midnight oil on a concept design involving HTML5 and SVG. The idea is to animate a web page background without resorting to Javascript. The concept design can be seen at I think it proves the point nicely about what can be achieved using SVG in this way. The only fly in the ointment is that this particular design is heavy on processing power, especially in Firefox. Chrome manages it much better (making up for it's numerous SVG bugs). NOTE: On Safari and IE9 the background graphic is rendered but he effect doesn't work. How was this done? Create a square and unset it's fill.Clone the square into a single column and move the square to a hidden layer (Inkscape clones use SVG's <uses> tag)Set the colour of the squares in the column and added a colour animation to each, each animation having the same loop time but an offset start time.

How To Create Web Animations With Paper.js Advertisement The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations had boxes around them like YouTube videos. The canvas element makes it possible to integrate drawings and animations with the rest of your page. Animations get more power and need less coding when you combine the canvas tag with higher-level libraries such as Paper.js71. Neat Is Easy, But Messy Is Hard Computers love clean. In the real world, even simple things are messy. For this article, we’ll animate dandelion seeds blowing in the breeze. Dandelions are tricky because we all know what they look like: we’ve touched them and blown their seeds off. (Image: Arnoldius4) Our dandelion animation will never reproduce the complexity of the real thing, and it will work better if we don’t try: make it too close to real and it will feel funny. Paper.js Then add a little JavaScript. Drawing Our Dandelion Drawing The Seeds What About SVG?

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. 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: You can open that SVG file in a code editor and see the SVG code: 3. 4. <aside class="sidebar"><div class="module module-ad"><? 5.

Animated Day-Night Cycle With CSS and SVG Astronomy has been a constant interest of mine, so I try to integrate it into as many pieces of work as I can. In this case, I wanted to represent a basic animated day-night cycle for the background of a web page. SVG For the Daylight Sky SVG gradients are very similar to CSS gradients: indeed, their syntax heavily influenced theWebkit team’s first interpretation of the spec. Most examples of SVG gradients that you will find use hexadecimal colors. I started with the following, representing “midnight”: The linear gradient is displayed vertically, with the zenith at the top, and both points starting with the same color. Both stop points are animated over 24 seconds, representing the hours in a day. While it uses a slightly different syntax from CSS animations, the <animate>element is fairly straightforward: it defines the property that is being changed, a duration, and a list of values to be animated between. An Image For The Night body { margin: 0; position: relative; background-color: #000;

The Simple Intro to SVG Animation This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element that mimics the syntax of a standard HTML element. As a teaser of what we're about to learn, check out these demos that are only possible thanks to SVG: There are three significant benefits to creating graphics in SVG rather than using rendered images (PNG, JPEG, etc.): First, SVG compresses incredibly well; graphics defined in SVG have smaller file sizes than their PNG/JPEG equivalents. To create an SVG graphic, either design it by hand using DOM elements to represent each piece of your graphic, or use your favorite photo editor to draw arbitrary shapes then export the resulting SVG code for copy-pasting into your HTML. SVG Animation SVG Styling (There are other special SVG elements, such as ellipse, line, and text.

The Designer's Guide to Working with SVG - Pt 1 Photo: Andy Field (Field Office) What’s the big deal about SVG, anyway? Don’t you just hit ‘Save as SVG’ in Illustrator, and you’ve got yourself an SVG? Yes and no. Perhaps the question to ask is: Is that SVG file any more useful than an equivalent PNG or JPG? Often the generated SVG files we get from graphics apps are not actually very much use outside the application that made it. The real power of SVG becomes clearer when you’ve got a readable, manipulatable document — and not a dense, arcane document ejected from a graphics app. Today, I want to give you a speed guide on the basics of SVG, and how to get files that you can work with. In the weeks that follow, we’ll cover some more interesting thing you can do with these files. SVG 101: How do you create an SVG? Arguably, the coolest thing about SVG is you don’t need fancy (or expensive) software to make them. In fact, if you’ve never hand-coded SVG before, try this: There you go. We could do something like this. Inkscape Inkscape Not quite.

Animated SVG Icons with Snap.svg Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example. View demo Download source SVG has been one of the most underused technologies when it comes to web development. You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. Please note that we are working with a modern JavaScript library for manipulating our SVGs. The first thing we do is to create some SVG icons using an SVG editor like Inkscape. For each icon we want a special animation to happen. With the help of Modernizr we can define the fallback in our CSS: The PNG icons were generated with the fabulous iconizr tool. If you add the class “si-icon-reverse” to the span, the icon will be initially rendered with the reversed “shape”.

webdesign.tutsplus In this tutorial we're going to introduce Snap.svg, a JavaScript library which assists in animating and manipulating SVG content. To demonstrate some of the features available, we're going to animate an SVG eye. Snap.svg is a JavaScript library which makes it easy to create and manipulate SVG graphics for modern browsers. It is the successor to Dmitry Baranovskiy's Raphaël; the most popular Javascript library for working with SVG. Raphäel.js is a great library. After a while the Raphäel.js community divided in two, one group which relied on it for cross browser compatibility, and other one which used it for creating SVGs. Hence Snap.svg was built, written entirely from scratch by Dmitry Baranovskiy (of the Adobe Web Platform team), in order to work with SVG more easily and using the latest that SVG can offer; features like masking, patterns, gradients, groups, animations and more. Snap.svg will help you generate graphics, but it can also work with existing SVG.

A collection of useful Snap.svg resources Snap.svg is a new SVG library targeting modern browsers. It is an open source project released by Adobe, and created by the same developer that created Raphael.js. Snap.svg does not support some older browsers, which allows it to support newer SVG features like masking, clipping, patterns, full gradients, groups, etc. Below is a collection of resources useful for developing with Snap.svg. Snap.svg project website Getting started tutorial A really straightforward tutorial that will help you get a solid understanding of how Snap.svg is used. API documentation Dig into the documentation here. GitHub repository Star, fork, and contribute to Snap.svg. npm page for Snap.svg Snap.svg is currently on npm, but it is not currently useable within node.js/CommonJS modules. Snap.svg on twitter Get all the tweets from Snap.svg Snap.svg Google Group