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

Based on an animation by Joseph Ryba: https://www.instagram.com/p/BaFwMjpgu2a/?taken-by=joe_ryba

Works best on Chrome.


  1. Works nicely on my old 2011 mac (without WebGL support) 👍🏽

  2. Great job David, waiting THREE.js version 😊

  3. Well, I made this the other day: https://codepen.io/EricPorter/pen/EoJprr Now I feel like I've been gut punched.

    Amazing, wonderful, work.

  4. Curious: Do you use an animation program of some kind that converts it to CSS? Or just hand write the SCSS?

  5. The shadows are what got me. They're faux cubes. I get it now. Brilliant.

  6. @ericporter all done by hand! I wish there was a program that converted it to CSS!

  7. @davidkpiano Kudos friend, you have a great design eye and some mad SCSS skills.

  8. This is absolutely amazing lol, how did you learn to do that? I didnt know this was even possible with pure html/css. Great job !

  9. Holy crap. That's slick. Tripple like

  10. This is so well done - great work @davidkpiano

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

You must be logged in to comment.