Little tool, written in elm, that converts ASCII to SVG. ASCII to SVG Source (GitHub) →ASCII to SVG Demo →
Tag Archives: svg
SVG Heat Shimmer Effect
CSS vs. SVG Gradient Angle
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 on simplifying her final example: See the Pen Relative Positioning in SVG by Bramus! (@bramus) …
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 use the JavaScript API behind it directly: var gradient = new ConicGradient({ stops: “gold 40%, …
Building better interfaces with SVG
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 CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, …
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 { transform: scale(1); opacity: 1; } } .polyonlion > g polygon { transform: scale(0); transform-origin: …
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> </pattern> </defs> </svg> <svg height="100" width="100" style="float:left" class="pattern-swatch"> <rect style="fill: url(#circles-1) #fff;" x="0" y="0" height="100" …