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.

10 CSS3 Animation Tools You Should Bookmark

10 CSS3 Animation Tools You Should Bookmark

As people tend to more easily perceive things that move, smartly used animations can enhance the user experience... Read more

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.

CSS Doodle webapp

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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail