This is a submission for Frontend Challenge v24.04.17, CSS Art: June.
Inspiration
"La Luzerne — Saint-Denis" by Georges Seurat:
This is a great example of pointillism, for which I wanted to create a pure CSS interpretation, not a 1:1 replica.
Demo
Journey
The CSS for this contains a bunch of custom properties, that are all set with a bit of randomness in JavaScript. Thus, you get a fresh, unique version of the painting everytime you refresh!
.luzerne {
background-color: rgb(243, 221, 44);
border: clamp(0.375rem, 0.0575rem + 1.5873vw, 1rem) ridge rgb(121, 85, 72, .9);
container-type: inline-size;
display: flex;
filter: url('#grain');
flex-wrap: wrap;
margin-inline: auto;
max-width: 950px;
gap: 0px;
overflow: visible;
b {
aspect-ratio: 1 / .95;
background: var(--c, #0000);
border-radius: var(--a, 0);
filter: brightness(var(--b, 1)) opacity(var(--o, 1));
rotate: var(--r, 0deg);
scale: var(--s, 1);
width: 2cqi;
}
}
I wrote a small JavaScript to render the random properties:
const colors = [array-of-colors];
const R = (min, max) => Math.random() * (max - min) + min;
app.innerHTML = new Array(1150).fill().map(() => {
const c = colors[Math.floor(Math.random() * colors.length)];
const s = R(1, 1.5).toFixed(5);
const r = R(-10, 10).toFixed(2) + 'deg';
const a = R(5, 20).toFixed(2) + '%';
const b = R(1, 1.3).toFixed(2);
const o = R(0.75, 1).toFixed(2);
return `<b style="--c:${c};--s:${s};--r:${r};--a:${a};--b:${b};--o:${o}"></b>`;
}).join('');
Grainy texture
The old and worn, grainy look, is an SVG-filter (see the demo above). The wooden frame is simply a border-type: ridge.
Top comments (0)