The five best design links, every weekday

Category: Svg

All Categories

SVGcode: a PWA to convert raster images to SVG vector graphics

Convert color or monochrome bitmap images (PNG, JPG, JPEG, WEBP, AVIF, GIF,…) to color or monochrome vector images (SVG).

Which SVG technique performs best for way too many icons?

When I started giving talks about SVG back in 2016, I’d occasionally hear a question I never had a great answer for.

Flip, Invert, and Reverse

In this article, I’m going to introduce 3 kinds of transformations for the SVG path commands.

Fractional SVG stars with CSS

Create a rating component with SVG stars that support fractional values.

llline: Smooth SVG Line/Stroke Generator

SVG generator that makes it easy to create lines & strokes that look and feel organic.

Ssshape: SVG Blob/Organic Shape Generator

Simple organic/blob shape generator that allows you to control the final shape.

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.