Tag Archives: svg

CSS vs. SVG Gradient Angle

Nice pen by Ana Tudor in which you can see how the angle set for a CSS Gradient and set for an SVG Gradient differ: . At a 45° angle you can clearly see exactly what the difference between the … Continue reading

Elsewhere , , Leave a comment

Relative Positioning Inside an SVG

Sara Soueidan, who else, has written an extensive article on how to mimic relative positioning in an SVG. The gist: nest your SVGs. Whilst her examples are – as per usual – very extensive and complete, I took the liberty … Continue reading

Elsewhere , , , Leave a comment

CSS conic-gradient() Polyfill

<script src=”https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js”></script> <script src=”conic-gradient.js”></script> Conic gradients are awesome, but browsers haven’t realized yet. This polyfill lets you experiment with them now. By Lea Verou. Automatically creates an SVG which is set as the background. Uses -prefix-free. Alternatively you can also … Continue reading

Elsewhere , , , Leave a comment

Building better interfaces with SVG

Solid presentation by @SaraSoueidan herself. Recently rebuilt a flash site using a SMIL animated SVG logo (embedded below). Presentations like these, packed with code and real examples, are very helpful. Check out this Pen!

Elsewhere , , Leave a comment

SVG and <picture>

<picture> <!–[if IE 9]><video style="display: none;"><![endif]–> <source type="image/svg+xml" srcset="path/to/header–full.svg"> <source type="image/svg+xml" srcset="path/to/header–medium.svg" media="(max-width: 1024px)"> <source type="image/svg+xml" srcset="path/to/header–small.svg" media="(max-width: 640px)"> <!–[if IE 9]></video><![endif]–> <img src="path/to/header-1x.png" srcset="path/to/header-2x.png 2x, path/to/header-3x.png 3x" alt="Header description"> </picture> Besides using an SVG as a background image in … Continue reading

Elsewhere , , , Leave a comment

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