The five best design links, every weekday

Category: Svg

All Categories

web.dev

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

cloudfour.com

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.

yuanchuan.dev

Flip, Invert, and Reverse

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

samuelkraft.com

Fractional SVG stars with CSS

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

fffuel.co

llline: Smooth SVG Line/Stroke Generator

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

fffuel.co

Ssshape: SVG Blob/Organic Shape Generator

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

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.