The five best design links, every weekday

Category: Svg

All Categories

svgfm.chriskirknielsen.com

SVG Filter Maker

SVGFM, a node graph builder for SVG filters.

garden.bradwoods.io

Draw on Scroll

An interesting effect that looks like lines are being drawn down the page as the user scrolls.

12daysofweb.dev

Responsive SVGs

Stretch your knowledge of working with SVGs for scalable, responsive experiences.

daniel.do

Making noisy SVGs

Adding noise texture with only code

svg-tutorial.com

SVG Tutorial - Learn how to code images in HTML with SVG

Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity.

evilmartians.com

Figma plugin magic tricks: mixing colors with SVG and Canvas API

We overcame a tough color blending roadblock by ditching the iterative method and shifting into a "declarative" approach with SVG and the Canvas API.

fffuel.co

Making SVG Loading Spinners

Learn to create cool SVG loading spinners with this interactive guide.

kirupa.com

Changing Colors in an SVG Element Using CSS and JavaScript

Almost everything inside an inline SVG image is up for modification using CSS and JavaScript. Let’s find out how by changing some colors!

fffuel.co

iiisometric

A canvas for drawing with isometric cubes.

yuanchuan.dev

Fun with stroke-dasharray

The stroke-dasharray attribute in SVG is more flexible compared to the dashed style in CSS.

iconbundler.com

Iconbundler

Convert and optimize SVG icons to React, Vue, and Svelte components

cloudfour.com

Let’s Make a Rubber Button With HTML, CSS and SVG

While I wasn’t looking, an elastic hover/active effect I shared on CodePen was viewed more than 11,000 times. Here’s how it works!

flourish.studio

From static to interactive: turn SVGs into exciting experiences

Bring static content to life. Turn static SVGs into clickable, rich experiences that reveal in-depth insights.

blog.richardekwonye.com

Bézier Curves - and the logic behind them

The logic behind Bézier Curves used in CSS animations and visual elements.

browserlondon.com

SVG Gradients: Solving Curved Challenges

In the world of programming, seemingly straightforward tasks can unravel into complex challenges.

cloudfour.com

Coding Randomized Zelda Patterns

The new Zelda game uses repeated patterns to build a cohesive world. Let’s write code to generate these patterns.

antfu.me

Animated SVG Logo

I recently replaced the logo on the top left corner with an animated SVG.

nan.fyi

A Deep Dive Into SVG Path Commands

An interactive guide to understanding SVG paths and path commands.

svghub.vercel.app

svghub

A library of over 70 custom-color elements ready to paste into your project.

flowbite.com

Flowbite Icons: Open-source SVG icons

Get started with a collection of free and open-source collection of SVG icons compatible with Flowbite and Tailwind CSS.