CSS helps us get creative in all kinds of ways, and today we’re going to take our CSS creativity to the next level. We’re going to use a tool called CSS Doodle to create some awesome repeated patterns.
CSS Doodle is a web component, you use it just like any other HTML tag (for example <css-doodle>). We’ll begin with the basics, learn how to install and use it, then we’ll create four unique patterns. Check out the video tutorial, or scroll down to read the written version and see what we’re building.
Patterns with CSS Doodle
How to Install CSS Doodle
To get started with CSS Doodle head over to css-doodle.com. There you’ll find code examples and inspiring demos of things you can create with it.
Under the Getting Started section of the page you’ll see a link to the CDN version of the library which we’ll grab and slot straight into CodePen to use:
There are a couple of other options which you might prefer, but this is the route we’ll take during this tutorial.
As we build out our first demo we’ll cover the basic setup requirements.
Begin by creating a custom <css-doodle> element. This element is targeted by the library and the contents we add will determine the pattern generated. Then we add the :doodle selector, into which we can add various properties.
Define a Grid
The next step is to define a grid. We can do this either within the selector or as a data-attribute on the <css-doodle> tag. So our options are one of the following:
Our 5x5 grid has a grid-gap of 1px, is a total width and height of 10rem, and has a background of tomato.
Play with the values to see what you get. For example, let’s change the number of cells, and use a different unit of measurement (vmax) on the size to help us fill the whole screen (1vmax is equal to one one hundredth of either the viewport width, or viewport height, depending on which is larger):
Controlling CSS Doodle
Everything we declare within the :doodle selector impacts the doodle as a whole. Everything we declare outside of the :doodle selector influences each individual cell.
For example, I can use a transform property with a random scale function, so each cell is scaled randomly between the values .1 and .9:
Here’s what that gives us:
Using random functions in this way is really useful and can allow us to generate all kinds of cool patterns. Let’s apply the same thinking to HSL format colors, using random figures for the hue, saturation, lightness, and alpha values (note the use of @r() which is a shorthand version of @rand() but does exactly the same):
Why not add even more chaos, by applying:
Altering the grid-gap
Fixing the Pattern as a Background
One final touch we’ll make is applying some styles to fix the pattern so we can use it as a background behind other elements, such as in a hero block. To do this, we add an extra class name to the <css-doodle> element and apply the following CSS:
This is such a great way to create random, unique background graphics for a website hero. Try it!
Let’s start again and make ourselves another pattern. We’ll start by defining the grid and giving the whole thing a background color:
Now, here’s the cool part. CSS Doodle gives us access to a collection of basic shapes, all of which can be found on the CSS Doodle web page. We’ll add the following rule before the closing </css-doodle> tag:
@shape: clover 5;
Here’s the end result!
For our third demo we’re going to add some new toys into the mix. We’ll determine the color of each cell by using the @pick function to pick from a lists of values: