The five best design links, every weekday

Category: Svg

All Categories

Tool.Graphics: Geometric Art

Geometric abstraction is a form of abstract art based on the use of geometric forms.

Basic Pattern Repository

A collection of hand-coded SVG ’s, ready to be used in inline SVG or however you like.

Grainy Gradients

Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise.


SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

The Story Behind TryShape, a showcase for the CSS clip-path property

I love shapes, especially colorful ones!

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

Let's see what the SVG feDisplacementMap filter primitive is, with a good number of examples to demonstrate the concept of animated displacement maps.

Vector? Raster? Why Not Both!

This week I ran into an interesting class of problem that—in hindsight—could use a much better workflow.


A fun SVG blob generator with a satisfying "bloop" sound when hitting the random button.

SVG Gobbler

SVG Gobbler is a browser extension that finds vector content and gives you the option to download, view the code, or export it as an image.

Thinking About The Cut-Out Effect: CSS or SVG?

A look at how CSS and SVG can be used to implement the cut-out effect.

SVG Glitter Text

I have glitter text! I made it myself in SVG. And I can make you one too.

SVG Favicons in Action

Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have.

SVG animations made easySponsored

Loaf is a tool that makes SVG animations easy. Hundreds of premium animations packaged in a beautiful app for Windows and macOS. Get started for free!

Random SVG avatar generator based on user names

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.


Create single line SVG illustrations from your pictures.

Not Your Typical Horizontal Rules

Like other HTML elements, horizontal rules can be styled using CSS. This means that they don’t have to look like boring, plain horizontal lines.

Kumiko Generator

Kumiko is an ancient Japanese woodworking technique, which involves slotting together many tiny pieces into a lattice.

Glob Editor

A globs-based vector editor.

Swipey Image Grids

SVG isn’t just useful for illustrative animation. It’s hella handy for UI too.

SVG Generators

A complete guide to SVG generators — for everything from SVG shapes and cropping tools to SVG filters, color matrix mixer and SVG to JSX generators.