<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 defining a canvas within a target shape or text, which is then repeated (or tiled) …
Tag Archives: svg
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 → If you like this, you’ll definitely like these too: Skrollr – CSS animations linked to …
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 for graphics in resposive web design! But are they really?! In situations – where you …
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 moving (viz. the roller-coaster its nose points towards the direction it is going, even inside …
Trianglify
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 → Animating SVG With Clipping Masks and CSS (Demos) → Looking for a way to …
Continue reading “Animating SVG With Clipping Masks and CSS”
Snap.svg
Two.js
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl. Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At …
Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices
grunticon takes a folder of SVG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder. Just …