How to Draw Patterns with CSS Using CSS Doodle

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:

1	https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js

There are a couple of other options which you might prefer, but this is the route we’ll take during this tutorial.

We don’t actually need to write any JavaScript, or any CSS for that matter, everything we do will take place in the HTML.

Demo #1

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.

1	<css-doodle>
2	:doodle {}
3	</css-doodle>

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:

1	<css-doodle grid="5">
2	:doodle {}
3	</css-doodle>

<css-doodle>
    :doodle {
        @grid: 5x5;
    }
</css-doodle>

Let’s stick with the latter. Notice the @ notation for doodle-specific syntax. Now we need to add some other values, such as a total size, and a grid-gap:

<css-doodle>
    :doodle {
        @grid: 5x5;
        @size: 10rem;
        grid-gap: 1px;
    }
    background-color: tomato;
</css-doodle>

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:

1	transform: scale(@rand(.1,.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:

random translate3d
random border-radius
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:

1	.doodle {
2	position: fixed;
3	z-index: -1;
4	}

This is such a great way to create random, unique background graphics for a website hero. Try it!

Demo #2

Let’s start again and make ourselves another pattern. We’ll start by defining the grid and giving the whole thing a background color:

<css-doodle>
    :doodle {
        @grid: 10 / 100vmax;
        grid-gap: 4vmax;
        background: #B2DFDB;
    }
</css-doodle>

We’ll then apply a random color to each cell, a random scale transform, and a random translate3d to alter the position of each cell.

<css-doodle class="doodle">
    :doodle {
        @grid: 10 / 100vmax;
        grid-gap: 4vmax;
        background: #B2DFDB;
    }
	
    transform: scale(@rand(.1, 1.9)) translate3d(@r(150px), @r(200px), 0) rotate(@r(360deg));
    background: hsla(@r(100), 85%, @r(90%, 100%), @r(.9));
</css-doodle>

Apply a Basic Shape

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:

1	@shape: clover 5;

Here’s the end result!

Demo #3

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:

1	background: @pick(#29B6F6, #FDD835, #5E35B1, #FFCCBC, #E8EAF6, #B2DFDB, #1B5E20, #2979FF);

Then we’ll apply a “vanilla” CSS clip-path, with random coordinates for each three-sided polygon:

1	clip-path: polygon(
2	@rand(50%) 0, 50% @rand(70%), 0 @rand(100%)
3	);

Lastly, we’ll use some CSS keyframe animation, again with some random values scattered in for good measure! These rules will give a perpetual motion effect.

animation: test infinite @r(100s, 150s) linear;
    
	@keyframes test {
		0% {
			transform: translate3d(0, 0, 0);
		}
		50% {
			transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);
		}
		100% {
			transform: translate3d(0, 0, 0);
		}

Check out the final result! More details about how this was created can be found in the video version at the 15:47 mark.

Demo #4

Our last demo uses very little code, but begins with a basic grid just as before.

<css-doodle>
     :doodle {
		@grid: 25 / 100vmax;
 	}
</css-doodle>     

We then define a CSS variable called --hue, the value of which will change depending on the grid cell’s position in the grid:

1	--hue: calc(100 + .5 * @row() * @col());

This variable is then used in the background property, to dictate the hue:

1	background: hsla(var(--hue), 50%, 70%, @r(.1, .9));

With one final touch in the form of a clip-path we get the following:

For details of exactly how our final demo works, take a look at the video tutorial from the 19:46 mark.

Conclusion

You know the phrase “the sky’s the limit”? In this case “CSS is the limit”! Whatever you can do with CSS you can apply to CSS Doodle. Have fun playing with it–I can’t wait to see what you create!