Draw Custom Patterns in CSS With CSS-Doodle Web Component

With a name like CSS Doodle you might not know what to expect.

But this is a really cool web component that lets you build some pretty awesome stuff. It works on the shadow DOM and lets you customize different shapes, figures, and patterns with CSS.

This also works with 2D transforms which are very powerful CSS3 properties when used right. This makes CSS Doodle one of the coolest and most aesthetically pleasing web components on the Internet.

To get started you just add the main script into your page’s header. There’s also directions on the CSS Doodle website to help you get up & running.

It has some pretty crazy syntax which you’ll find lower on the main page.

This relies on various custom selectors that are defined inside the JS file. So when you write CSS Doodle code it’s being parsed through JavaScript, although you don’t need to know any JS yourself.

Here’s a sample snippet from the main page showing off a simple CSS Doodle.

<css-doodle>
  :doodle {
    @grid: 11 / 100vmax;
    background: #0a0c27;
  }
  --n: calc(
      @abs(@abs(@row() - 6)
    + @abs(@col() - 6) - 11) / 11
  );
  margin: -10%;
  transform: rotate(45deg);
  border: 1px solid;
  border-color: hsla(
    calc(var(--n) * 360 + 120), 60%, 68%,
    var(--n)
  );
</css-doodle>

You can design your patterns with grids, custom panels inside a grid, or with randomized settings. Plus it has tons of pre-built shapes you can add into your geometric designs.

The whole thing is super easy to edit and it’s really entertaining.

Check out this example from CodePen for just one basic demo:

If you wanna see more there’s an entire collection on CodePen to browse through.

Or you can dig into the main GitHub repo if you’re curious about the different settings, selectors, or animation styles.

Maybe not the most practical web component but it is a fun library to work with.