Archive for the ‘svg’ Category

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use thes...

Snap Animation States

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With e...

The Many Tools for Shape Morphing

Posted on: No Comments
To no one's surprise, I'm sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that...

Sketch Now Replicates Inside & Outside Stroke Alignment

Posted on: No Comments
I was just bemoaning strokes the other week: And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful. Th...

Papercons

Posted on: No Comments
Bobby Grace, on the Dropbox Paper team: On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for i...

Pong with SVG.js

Posted on: No Comments
Everybody loves the vintage game Pong, right? We sure do. What's more fun? Building it yourself! That's why we decided to create one with SVG.js - to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as...

Book Release: SVG Animations

Posted on: No Comments
Our own Sarah Drasner has published a book! You can grab it from the O'Reilly website or Amazon. If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O'Reilly site. ...

Randomizing SVG Shapes

Posted on: No Comments
SVG shapes are all built from numbers. Obvious, perhaps, but also, I'm not sure we take as much advantage of that as we could with inline <svg>. For example, it's pretty easy to generate a new pseudo-random number in JavaScript: function getRando...

Tools to Visualize and Edit SVG Paths (Kinda!)

Posted on: No Comments
It was brought up at the SVG Summit the other day, wouldn't it be nice when working with SVG to be able to work with it both ways at once? See and edit the code, and see the results visually See and edit the visual shapes, and see the code change The...

Websites to Generate SVG Patterns

Posted on: No Comments
These aren't particularly hard to web search for, but just in case you didn't know they existed I figured I'd drop them here. I've used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in S...