background preloader

Canvas, html, svg and js illustrations

Facebook Twitter

Math 300: Mathematical Computing. SVG Visual Cheat Sheet. 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. It's still early in the project's life, and we'll keep adding to this list as new tutorials and other resources are created, and as new versions of Snap.svg are released.

Snap.svg project website snapsvg.io Getting started tutorial snapsvg.io/start A really straightforward tutorial that will help you get a solid understanding of how Snap.svg is used. API documentation snapsvg.io/docs Dig into the documentation here. GitHub repository github.com/adobe-webplatform/Snap.svg Star, fork, and contribute to Snap.svg. Npm page for Snap.svg Snap.svg on twitter twitter.com/snapsvg Videos. 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. Released in 2008, its biggest win was its support for browsers from IE 5.5 onwards.

However, supporting so many browsers was limiting and meant that it couldn't implement the latest developments, instead relying on a common subset of SVG features. 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. Snap.svg will help you generate graphics, but it can also work with existing SVG. Firstly, you'll need to download Snap.svg. SVG. 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. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. 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: Snap.svg - Home. 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. While it’s technically true, by the same logic, every MS Word user is technically a web developer. 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. There you go. Inkscape Inkscape. Velocity.js. VelocityJS demo. 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. SVG elements have unique tags, attributes, and behaviors that allow them to define arbitrary shapes -- essentially providing the ability to create an image directly within the DOM, and thereby benefit from the JavaScript- and CSS-based manipulation that DOM elements can be subjected to. 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.

SVG Animation SVG Styling Positional Attributes vs. 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. The SVG version retains one significant advantage: it can be animated. 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. .sun { Wufoo SVG Ad. 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. 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. After having optimized the svg code, we tried to push it one step further by animating the icon using CSS and Snap.svg, which is a javascript SVG library created by the Adobe team. 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. While exporting .svg from AI, default settings work just fine. Optimizing SVG code Animating the SVG. 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 www.netriver.co.uk/demo/animated-svg-background.html. 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.

Unfortunately IE9 gets the size wrong as well but that could be fixed via CSS. 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. Index of /knickknacks. 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. 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!) And while working great on a reasonably fast laptop, it's similar in speed to our Canvas-BLI on an iPad 3/iPhone 4S. So, yes, SVG lets you do a lot, but I would still argue that the low-level Canvas is a tad faster. 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. Flower animations in the (Flash) Better Life Index (click to see the animation). In the same vein, we initially used Paper.js for drawing.

Share:    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. HTML5 canvas changes everything about Web animation. 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.