Archive for the ‘svg’ Category

Simple Patterns for Separation (Better Than Color Alone)

Posted on: No Comments
Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned)...

Discover The Fatwigoo

Posted on: No Comments
When you use a bit of inline <svg> and you don't set height and width, but you do set a viewBox, that's a fitwigoo. I love the name. The problem with fatwigoo's is that the <svg> will size itself like a block-level element, rendering enormo...

Dynamic Shape Overlays with SVG

Posted on: No Comments
Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the seve...

Organic SVG Shape Morph Ideas

Posted on: No Comments
Today we’d like to share some more animated organic SVG shapes with you. The idea is to integrate some flowy, natural looking shapes into a web page as decorative elements, sometimes with an interaction, i.e. a background of menu that changes on ...

When Design Becomes Part of the Code Workflow

Posted on: No Comments
I recently did an experiment where I created the same vector illustration in three different applications, exported the illustration as SVG in each application, then wrote a post comparing the exported code. While I loved the banter and insights that c...

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