The five best design links, every weekday

Category: Svg

All Categories

tool.graphics

Tool.Graphics: Geometric Art

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

patterns.helloyes.dev

Basic Pattern Repository

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

css-tricks.com

Grainy Gradients

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

jakearchibald.github.io

SVGOMG - SVGO’s Missing GUI

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

css-tricks.com

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

I love shapes, especially colorful ones!

smashingmagazine.com

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.

zachleat.com

Vector? Raster? Why Not Both!

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

blobbb.fun

Blobbb

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

css-tricks.com

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.

ishadeed.com

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.

wh0.github.io

SVG Glitter Text

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

css-tricks.com

SVG Favicons in Action

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

getloaf.io

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!

boringavatars.com

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.

javier.xyz

PINTR

Create single line SVG illustrations from your pictures.

sarasoueidan.com

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

Kumiko Generator

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

globs.design

Glob Editor

A globs-based vector editor.

cassie.codes

Swipey Image Grids

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

smashingmagazine.com

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.