background preloader

Vivus.js - svg animation

Vivus.js - svg animation
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub How it works To get this effect, the script uses the CSS property strokeDashoffset. This property manages the stroke offset on every line of the SVG. The code is inspired from other repositories. How to use it As I said, there are no dependencies here. The library is also available via Bower: bower install vivus or via jsDelivr CDN: //cdn.jsdelivr.net/vivus/0.1.2/vivus.min.js The Vivus constructor asks for 3 parameters : The ID of the SVG to animate (or the DOM element) Options object (described in the following) Callback to call at the end of the animation (optional) The options object must respect the following structure : type string duration integer animation duration, in frames start string

http://maxwellito.github.io/vivus/

Related:  SVGJavascriptSVG Xchange

8 JavaScript Libraries to Animate SVG SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can also makes SVG come alive with some animation effects. Tutorial - Creating an Interactive SVG map - Blog - Parallax Level: Beginner - Intermediate Over the past few years there's been an increasing demand from our clients for interactive maps, whether it be for shopping centres, housing developments or just geographical maps. Most recently, I was tasked with creating a masterplan (architectural, not the evil villain kind) for Little Kelham, a property development at Kelham Island in Sheffield built by Citu. They needed two versions of the masterplan: a map to highlight the residential properties they have available, and a map for their commercial properties. Each plot needed to have its own well defined shape and have a hover state & click events.

Using SVG stroke Attributes Using SVG inline provides total access to the graphic for complete customization and control over its output. This is especially handy when creating shapes by hand in the browser, or making edits to an existing graphic. There are a number of stroke related attributes within SVG that allow us to control the details of our strokes, just as we do in vector graphic software. jQuery effects, 150+ best for web developers and designers Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”. You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web applications in a very easy way.

rawson.js - a camera raw previewer in javascript Will rawson.js run on Internet Explorer? The rawson.js viewer application will not run on current versions of Internet Explorer (IE 9 or less), because IE doesn't support the W3C File API for local file access. This might change in IE 10. Can I edit my camera raw photos in rawson.js like I do in Lightroom or RawTherapee? Not yet. How SVG Line Animation Works I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples.

Code Monster from Crunchzilla <h2>Code Monster use Javascript. Please enable Javascript if you want the play with the Code Monster. Otherwise, Code Monster will not be able to play with you. </h2> I'm Code Monster! Animating Vectors with SVG It is almost 2014 and fifteen years ago the W3C started to develop a web-based scalable vector graphics (SVG) format. As web technologies go, this one is pretty old and well entrenched. Embed not working on your device? Try direct. Unlike rasterized images, SVG files will stay crisp and sharp at any resolution.

Useful UX & UI Tools and Resources Before you take on your next web or app design project asking yourself the following questions might help enhance your productivity and make your work more cost-efficient: Am I using the right tools and resources for the project that I’m working at? Is there a better way I could approach this project? Are the tools and resources that I’m using the best available on the market? There are new tools and resources constantly appearing on the market, some of which could make your work easier and your results more professional looking. You may find this listing of UX and UI tools and resources quite useful. Most of these tools feature rapid prototyping capabilities together with powerful team collaboration and information sharing capabilities.

evanw.github.com/csg.js/ Source code: Documentation: Introduction Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm.

Related: