about

Declaratively generate Vera Molnár inspired images using the CSS Paint API.

setup

Download from GitHub directly:

# Add to package.json
npm install thewhodidthis/cell

usage

Load JS first:

// Load worklet
if ("paintWorklet" in CSS) {
  CSS.paintWorklet
    .addModule("https://thewhodidthis.github.io/cell/cell.js")
    .catch(console.log)
}

Then in CSS:

@supports (background: paint(_)) {
  :host {
    background: whitesmoke;
    border: 0.20625rem solid transparent;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }
  div {
    --cell-fill-style: transparent;

    background-image:
      paint(quad),
      paint(quad),
      paint(quad),
      paint(quad),
      paint(quad),
      paint(quad);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%, 88%, 76%, 64%, 52%, 40%;
    margin: -0.4125rem;
  }
  div:nth-child(2n + 1) {
    background-size: 100%, 88%, 64%, 52%, 24%, 12%;
  }
  div:nth-child(3n + 2) {
    background-size: 100%, 88%, 76%, 0, 52%, 40%;
  }
  div:nth-child(5n + 3) {
    background-size: 100%, 88%, 76%, 64%, 40%, 12%;
  }
}

see also

• Pattern making with CSS Paint
• Quick sketches →