Archive for the ‘svg’ Category

Using CSS Clip Path to Create Interactive Effects

Posted on: No Comments
Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how...

Using SVG to Create a Duotone Effect on Images

Posted on: No Comments
Anything is possible with SVG, right?! After a year of collaborating with some great designers and experimenting to achieve some pretty cool visual effects, it is beginning to feel like it is. A quick search of "SVG" on CodePen will attest to this. Fr...

Creative SVG Strokes Animation

Posted on: No Comments
SVG stroke animations are nothing new, but when using a more complex drawing that is basically made of strokes, then we can create a very original looking effect. Using many different colors and adding some other element animations, we can bring a very...

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