La Luzerne

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.