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 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.
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 ‘
+ Math.round(fs / 3) + ‘vmin 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
