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
Optimiser les SVG
Résumé à connaître pour utiliser du SVG pour le web.