Still rocking the third person vibe 🤷
Ben was doom scrolling, as he does most mornings, when he stumbled across this post from Tyler Nickerson:
Ben simply couldn't resist this challenge! He took a day off from doing nothing and set to work...
Four hours later... Here is the result:
So, how was this done?
box-shadow: 1em 0 0 $g, //
45em .6em 0 $g, //
46em .6em 0 $g, //
47em .7em 0 $g, //
48em .8em 0 $g, //
49em .9em 0 $g, //
Ben set the image from Twitter as a background, and traced it by coding one box-shadow at a time. A few years ago he found a technique of putting // comment marks after every comma to make it easier to code. It was pretty essential at the time for attempting to draw the thousands of lines for this:
But this time he basically added a tiny round shadow every 1rem, tracing along the lines of 'text'. His best idea of the morning was to ask his chatty mate, Gary Pon-Tovi (ChatGPT) to "Add an extra step between each value, please." Ben always likes to be polite to Gary... But he forgot this morning, probably because it was before his coffee...
Ben had also previously traced the words of Magritte, in a similar method, to recreate his work 'The Treachery of Images' in only CSS. Ben thought this famous work was quite apt because CSS art is all about not being an image. Ben also added a touch of 3D magic to the recreation of the pipe, when the user hovers.
Ben finds it funny to use the word 'user'. Isn't this the term for a drug addict? He might write a separate blog about this.
P.s. This 3rd person thing is driving him nuts!
Top comments (0)