Declaratively generate Vera Molnár inspired images using the CSS Paint API.
Download from GitHub directly:
# Add to package.json
npm install thewhodidthis/cell
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%;
}
}