Hot Cross Buns

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Easter is a time for Hot Cross Buns

Demo

(Note that codepen is quite slow in displaying this image)

OK, here's the thing. While I consider myself competent at CSS, my artistic skill is close to zero. So I cheated.

While the image created in the codepen above is formed in CSS, the text-shadow was not hand written. I photographed some real hot cross buns, loaded it in a canvas

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const image = new Image();
image.src = "...";
image.addEventListener("load", () => {
  ctx.drawImage(image, 0, 0, 100, 100);

  const imageData = ctx.getImageData(0, 0, 100, 100);
  ...;
});

I then looped over the image data pixel by pixel, and wrote it back out as a text-shadow.

  const data = imageData.data;
  let fs = 1;
  let d = 0;
  let ts = [];
  for (let y = 0; y < imageData.height; y++) {
    for (let x = 0; x < imageData.width; x++, d+=4) {
      ts.push((x * fs - 50) + 'vmin ' + (y * fs - 50) + 'vmin ' 
         + '0vmin rgba('
         + data[d] + ', ' 
         + data[d + 1] + ', ' 
         + data[d + 2] + ', ' 
         + data[d + 3] / 255 + ')');
    }
  }
  console.log(ts.join());

The text-shadow is of a single character - the Unicode Character 'BLACK SQUARE' “■” (U+25A0) with a transparent colour.

Licence: CC-BY

Blog

Nicholas Stimpson

Inspiration

Demo

Join Our Newsletter. No Spam, Only the good stuff.

Related