{"id":357294,"date":"2021-11-24T07:49:08","date_gmt":"2021-11-24T15:49:08","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357294"},"modified":"2021-11-24T07:49:11","modified_gmt":"2021-11-24T15:49:11","slug":"creating-generative-patterns-with-the-css-paint-api","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-generative-patterns-with-the-css-paint-api\/","title":{"rendered":"Creating Generative Patterns with The CSS Paint API"},"content":{"rendered":"\n

The browser has long been a medium for art and design. From Lynn Fisher’s joyful A Single Div<\/a> creations to Diana Smith’s staggeringly detailed CSS paintings<\/a>, wildly creative, highly skilled developers have \u2014 over the years \u2014 continuously pushed web technologies to their limits and crafted innovative, inspiring visuals.<\/p>\n\n\n\n

CSS, however, has never really had an API dedicated to\u2026 well, just<\/em> drawing stuff! As demonstrated by the talented folks above, it certainly can<\/em> render most things, but it’s not always easy, and it’s not always practical for production sites\/applications.<\/p>\n\n\n\n

Recently, though, CSS was gifted an exciting new set of APIs known as Houdini<\/a>, and one of them \u2014 the Paint API<\/a> \u2014 is specifically<\/em> designed for rendering 2D graphics. For us web folk, this is incredibly exciting. For the first time, we have a section of CSS that exists for the sole purpose of programmatically creating images. The doors to a mystical new world are well and truly open!<\/p>\n\n\n\n

In this tutorial, we will be using the Paint API to create three (hopefully!) beautiful, generative patterns that could be used to add a delicious spoonful of character to a range of websites\/applications.<\/p>\n\n\n\n\n\n\n\n

Spellbooks\/text editors at the ready, friends, let’s do some magic!<\/p>\n\n\n

Intended audience<\/h3>\n\n\n

This tutorial is perfect for folks who are comfortable writing HTML, CSS, and JavaScript. A little familiarity with generative art and some knowledge of the Paint API\/HTML canvas will be handy but not essential. We will do a quick overview before we get started. Speaking of which…<\/p>\n\n\n

Before we start<\/h3>\n\n\n

For a comprehensive introduction to both the Paint API and generative art\/design, I recommend popping over to the first entry in this series<\/a>. If you are new to either subject, this will be a great place to start. If you don’t feel like navigating another article, however, here are a couple of key concepts to be familiar with before moving on.<\/p>\n\n\n\n

If you are already familiar with the CSS Paint API and generative art\/design, feel free to skip ahead to the next section<\/a>.<\/p>\n\n\n

What is generative art\/design?<\/h4>\n\n\n

Generative art\/design is any work created with an element of chance. We define some rules and allow a source of randomness to guide us to an outcome. For example, a rule could be “if a random number is greater than 50, render a red square, if it is less than 50, render a blue square<\/em>*,”* and, in the browser, a source of randomness could be Math.random()<\/code>.<\/p>\n\n\n\n

By taking a generative approach to creating patterns, we can generate near-infinite variations of a single idea \u2014 this is both an inspiring addition to the creative process and a fantastic opportunity to delight our users. Instead of showing people the same imagery every time they visit a page, we can display something special and unique for them!<\/p>\n\n\n

What is the CSS Paint API?<\/h4>\n\n\n

The Paint API gives us low-level access to CSS rendering. Through “paint worklets” (JavaScript classes with a special paint()<\/code> function), it allows us to dynamically create images using a syntax almost identical to HTML canvas. Worklets can render an image wherever CSS expects one. For example:<\/p>\n\n\n\n

.worklet-canvas {\n  background-image: paint(workletName);\n}<\/code><\/pre>\n\n\n\n
Paint API worklets are fast, responsive, and play ever so well<\/em> with existing CSS-based design systems. In short, they are the coolest thing ever. The only thing they are lacking right now is widespread browser support. Here’s a table:<\/p>\n\n\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
65<\/span><\/td>No<\/span><\/td>No<\/span><\/td>79<\/span><\/td>No<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
123<\/span><\/td>No<\/span><\/td>123<\/span><\/td>No<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n
A little thin on the ground! That’s OK, though. As the Paint API is almost inherently decorative, we can use it as a progressive enhancement if it’s available and provide a simple, dependable fallback if not.<\/p>\n\n\n
What we are making<\/h3>\n\n\n
In this tutorial, we will be learning how to create three unique generative patterns. These patterns are quite simple, but will act as a wonderful springboard for further experimentation. Here they are in all their glory!<\/p>\n\n\n\n
The demos in this tutorial currently only work in Chrome and Edge.<\/p>\n\n\n
\u201cTiny Specks”<\/h4>\n\n\n