Also available as font, svg or react component.
Sizes are 16, 24 and 32 px with a stroke of 1, 1.5 or 2.

a browser extension that finds the vector content on the page you're viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.

What is possible with SVGs?

• Generative SVG Grids
• Generative Landscape Rolls
• SVG Paths With Masks
• Grainy Gradients
• Adding Texture And Depth
• Cut-Out Effects With CSS And SVG
• Fractional SVG Stars
• Generative Mountain Ridge Dividers
• Flexible Repeating SVG Masks
• Swipey Image Grids
• Raster Image To SVG Converter
• Scaling SVGs Made Simple

Using clip-path to define custom shapes inside a container!
Percentages units has the benefit of keeping things responsive
There is many clip-path functions: inset, circle, ellipse, polygon and... path for maximum flexibility

clip-path: inset(x x x x) is useful for clipping blocks of an element and using it as a "controlled" overflow.
This clip-path value represents a thunderbolt: polygon(100% 0, 20% 50%, 35% 50%, 0% 100%, 70% 50%, 50% 50%)

We can transition or animate clip-path. There's one condition. The path must have a consistent structure. For example, if we transition a polygon, that polygon must have a consistent number of points.

Skewing effect: https://codepen.io/enbee81/pen/yLyrmyg

and cyberpunk buttons in CSS: https://jhey.dev/writing/css-cyberpunk-2077-buttons-taking-your-css-to-night-city/

Creating patterns for imgs

This size matches the dimensions of our SVG exports. This is important. This is the one drawback of using clip-path: path(). It's not responsive. The path definition is relative to the dimensions of your element.

Changing the shape:

.portrait {
  transition: clip-path 0.2s, transform 0.2s;
  transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
  clip-path: path(var(--clip, var(--splat)));
}
.portrait:hover {
  --scale: 1.15;
  --rotate: 30deg;
  --clip: var(--splattier);
}
.portrait:active {
  --scale: 0.85;
  --rotate: -10deg;
  --clip: var(--splatted);
}

I am using this trick to animate checkboxes, but I have to check it out for master it !

Icons, Illustrations, Elements, Emojis

A collection of funky vectorized scribbbles to spice up your design projects.

100% vector
Customizable colors

Haikei is a web app to generate unique SVG shapes, backgrounds, and patterns – ready to use with your design tools and workflow.

Create blob svgs 👍

provided with a search engine

Convert ASCII into SVG

avec la "doc": http://api.warriordudimanche.net/iconeleon/?help

Reusable svg shapes