The five best design links, every weekday

Category: Svg

All Categories

bgjar.com

BGJar

Free svg background generator for your websites, blogs and app.

css-tricks.com

How to Get Handwriting Animation With Irregular SVG Strokes

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen.

pavellaptev.github.io

Warp SVG online

Warp and distort SVG files online

tablericons.com

Tabler Icons

550+ Highly customizable & free SVG icons.

squircley.app

Squircley

Create and export beautiful SVG squircles to use in your designs.

varun.ca

React Icon System

This article will show you how to set up an icon system using SVGR — a tool for transforming SVGs into React components.

blobs.app

Blobs - Generate beautiful blob shapes for web and flutter apps

Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease

patternico.com

Patternico

An online tool to create and export patterns using some font icon libraries

shapedivider.app

Shape Divider App

Generate a beautiful SVG shape divider in a few clicks.

svg-path-visualizer.netlify.app

SVG Path Visualizer

Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands.

paulcpederson.com

Stencil Icons

In the last ten years, developers have been on a quest to find the best way to implement icons in a digital product.

tympanus.net

Morphing Gooey Text Hover Effect

Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.

medium.com

Are you using SVG favicons yet? A guide for modern browsers.

You should be using SVG favicons. They're supported in all modern browsers right now.

svgartista.net

SVG Artista - Little tool that helps you create SVG drawing animations

SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code.

css-tricks.com

SVG, Favicons, and All the Fun Things We Can Do With Them

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you're scanning through your browser's

heredragonsabound.blogspot.com

Creating a Pencil Effect in SVG

Vector graphics have a lot of features (such as lossless zoom) that are nice for maps.

tylergaw.com

Flexible Repeating SVG Masks

This is a technique I used recently to create a flexible, repeating pattern using SVG with CSS mask.

smashingmagazine.com

Accessible SVGs: Inclusiveness Beyond Patterns

If true inclusiveness lies beyond patterns - what other factors should we consider when designing and developing accessible SVGs?

css-tricks.com

How We Created a Static Site That Generates Tartan Patterns in SVG

Tartan is a patterned cloth that's typically associated with Scotland, particularly their fashionable kilts.

tympanus.net

Distorted Link Effects with SVG Filters

A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.