css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


Easily changeable pixel size.

UDPATE: I'm glad to see this has spawned a whole series of 'box-shadow' drawings! There have been some incredible examples created. Please keep in mind that this is not suitable for production use!


  1. Nice! Gave up after seeing this one. I was able to save myself from having to draw the yellow squares with box-shadow using :after, rotate and z-index

  2. @Jason Delia Ah, good idea!

  3. You've won Joshua!

  4. Thanks, Azik :p

    Jason, I've made that change. Thanks for the suggestion!

  5. I was considering working on this when I got home after seeing Paul Irish's tweet earlier, but you beat me too it. Great job man!

  6. Thanks, Mike! I was lucky enough to see his tweet as soon as he sent it, so I had a major head start. Not only that, but I recently wrote an article on using box-shadows to draw things, so I knew that it would be a perfect technique for this project!

  7. Doesn't work on my iPhone.

  8. That's weird, Nihad. It works perfectly on my iPhone 5 running iOS 6.

  9. I get the same thing as Nihad on Chrome for mobile. Good job though.

  10. Strange, I can't replicate the problem in mobile Safari. Must be a Chrome specific bug.

  11. Fixed that bug, http://codepen.io/Simonclavey/pen/odbuf Really strange issue of no default colour. You have to set the colour for it to work on Chrome mobile. Ha!

  12. That's just awesome :D

  13. Ahh, thanks, Simon. I was trying to save as many bytes as possible!

  14. This is soooo cool! :D

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.