Archive for the ‘svg’ Category

Saving SVG with Space Around It from Illustrator

Posted on: No Comments
Say you have a graphic like this in Adobe Illustrator: Note how the art doesn't touch the edges of the artboard. Say you want that space around it, and you want to save it as SVG for use on the web. Nope: Save for Web THE CLAW! You'll see space around...

Morphing Page Transition

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use...

One Illustration, Three SVG outputs

Posted on: No Comments
Let's say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each application? On the one hand, we might expect each file to be the same because of ou...

Glue Cross-Browser Responsive Irregular Images with Sticky Tape

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many ...

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...