Tag Archives: svg

Polylion: SVG polygon animation

Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>. // SCSS @keyframes polyonlion-animation { to … Continue reading

Elsewhere , , , Leave a comment

Using SVG Patterns as Fills

Define a <pattern>, give it an id, and then use it as a fill on an other SVG element using said id: <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image> … Continue reading

Elsewhere , , , Leave a comment

Landline – Simple SVG maps that work everywhere.

Landline is a JavaScript library that creates SVG maps from GeoJSON. It comes with Stateline, which makes creating responsive U.S. state and county maps easy. Also perfectly possible to load in your own GeoJSON file, packed with MultiPolygons. Landline Source … Continue reading

Elsewhere , , , , , Leave a comment

How to Use SVG Patterns

<svg> <defs> <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="20" cy="20" r="20” fill= "#64bee3" /> </pattern> </defs> <rect x="10" y="10" width="200" height="200" stroke= "#333333" stroke-width="2" fill="url(#basicPattern)" /> </svg> SVG patterns provide for very unique design opportunities. We are essentially … Continue reading

Elsewhere , , Leave a comment

Icons changing colors on scroll

Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto. Icons Filling Effect → Icons Filling Effect Demo → … Continue reading

Elsewhere , , , , Leave a comment

VLEX – Vector Layout Expressions

<html> <head> <script src="path/to/vlex.js"></script> </head> <body> <div id="vlexContainer" style="width:100%; height:100%;"> <svg id="vlex" width="100%" height="100%" onload="VLEX(vlex)"> <!– call VLEX inline –> <circle r="100" vlex="cx:{$cX};cy:{$cY}"></circle> <!– use vlex attribute –> </svg> </div> </body> </html> SVG is deemed to be the holy grail … Continue reading

Elsewhere , , , Leave a comment

Advanced Animation Path with SVG

Neat animation of a roller-coaster following the tracks underneath. Uses an SVG as the animation path. The animated object itself is animated using tween.js. Also contains some cleverness to actually make the animated object point into the direction it is … Continue reading

Elsewhere , , , Leave a comment


Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds. Quite like these computer generated patterns 🙂 Trianglify →

Elsewhere , , , Leave a comment

Animating SVG With Clipping Masks and CSS

Unfortunately, we can’t animate SVG fills the same way [we do with paths] with only CSS. However I’ve thought of way of giving the impression they’re being ‘painted’ by animating SVG clipping masks. Animating SVG With Clipping Masks and CSS … Continue reading

Elsewhere , , , 1 Comment


SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Snap.svg … Continue reading

Elsewhere , , Leave a comment