If you ever visited a website with a pattern, you'll know this. Patterns like this-
Now this requires nothing more than adding a class...with patches
You can make everything-
- Squares
- Rhombuses
- Triangles
- Pentagon
- Hexagon
- Heptagon
- Octagon
- Nonagon
- Decagon
- Circles
- Stars
...and much more
This is the true essence of PATCHES.
First note it is not only to create goodies. It was created to make WONDERFUL grid designs with cool animations
Step 2: Download and link the CSS file you can find HERE
<div class="grid"></div>
Inside it, write the emmet code
(.squares)*64
Now you'll have a square grid like this-
In the div of class of grid, add the class circ
to make it a circle
In the CSS in :root
change the colors like this-
:root {
--background-color: #c9a52c;
--rows: 8;
--columns: 8;
--width: 15rem;
--height: 15rem;
--gap: 4%;
--color: none;
--gradient-color: linear-gradient(to right bottom, #d2691e, #a52a2a);
}
We can also make it rotate, shape it like a triangle, everything you can IMAGINE.