Adding patterns and designs to your pages without using Scalable Vector Graphics.

As Front-end web developers, pixels can be both our friends and worst enemies. Making everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty way to go about handling patterns and designs on web pages — Css-doodle.
CSS-doodle is a library of tools that create art using CSS. CSS-doodle is a web component, just like any other HTML tag css-doodle. The component will generate a grid of divs by the CSS rules inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph on your web pages. CSS-doodle can be use to create some awesome repeated patterns.

How to use CSS-doodle:

First, you need to download the latest version or include it directly from a CDN src="https://unpkg.com/css-doodle@0.7.7/css-doodle.min.js">. Alternatively, you can also install CSS-doodle from npm and import the module in JavaScript npm install css-doodle.
Secondly, We don’t actually need to write any JavaScript, or any CSS for that matter, everything we do will take place in the HTML. In the body section of your HTML you add the syntax css-doodle. This element is targeted by the library and the contents we add will determine the pattern generated which can also be wrap within a

element.
The syntax of css-doodle is based on CSS and provided several extra utility functions and shorthand properties for:

1. Grid
2. Selectors
3. Properties
4. Functions
5. JS API.

Using the CSS Grid layout, the number of rows and columns in the grid is defined by the grid attribute on the element, ranged from 1 to 32. It's default to be 1x1 when no value or 0 is given.
The CSS-doodle component accepts any valid CSS rules. There are special selectors, properties and functions that that you can use to create pretty much any pattern imaginable.
To get started with CSS Doodle head over to https://css-doodle.com There you’ll find code examples and inspiring demos of things you can create with it.

Have fun playing with Css-doodle.