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

Javascript cloth simulation.


  1. This blows my mind! Amazing job!

  2. I could do this all day!


  4. Cutting is such a great fun! (no emo)

  5. This is one of the most awesome physics demos I've seen! :)

  6. wow!! sick dude

  7. Looks a bit like cloth from http://soulwire.co.uk/experiments/coffee-physics/ - but this is even better =) cutting is awesome!

  8. I still cannot believe, it's just awesome. Бля буду...

  9. can we just put a naughty dancing girl behind the curtain :)

  10. This is amazing! I'll have to think of a cool way to use this on one of my sites. Can you apply an image to the face of the cloth instead of a grid of boxes?

  11. It's possible, I don't know how to distort the image to match the cloth though. I expect it would be quite slow.

  12. shit I feel like a stupid noob now

  13. This is ridiculous.

  14. My favorite part is putting the settings at ridiculous numbers and watching the physics break... seriously though, really cool! I think I played with this for an hour in one go.

  15. Amazing, well done!

  16. This is awesome!

  17. that's awesome

  18. amazing!!! Good job

  19. Ахуенно!

  20. I wasn't expecting a reaction like this, 350k views and 470 hearts! Thanks guys.

  21. Legen----- wait for it ----dary

  22. Very impressive.

  23. Epic. Thanks for demo!

  24. Clearly some kind of sorcery.

  25. Это просто звездец. Thanks Adam!

  26. Бляя... как так???

  27. афигительно!!

  28. Awesome! Тряпки на джаваскрипте!

  29. Охуеть!

  30. n how about parent-based dependences? // feet behav. -> depending leg.behav. -> depending body.behav. -> depending gravity.beheav (or other)

  31. awesome :) love it

  32. I can't believe I have been playing with this for 30 minutes now

  33. Very cool and runs smoothly for me. Now to hook it up to Kinect! https://vimeo.com/20964926

  34. @soulwire Oh wow, that's really cool. I didn't even know there was a Kinect library readily available. Thanks for the link.

  35. realllly awesomeee !!

  36. Нихуясибе!

  37. Can you do a screen cast on how you did this?

  38. OMG this is incredible! :o

  39. great job, man.. :)

  40. Freaking Amazing.

  41. O JavaScript, how Awesome thou hath become!!

  42. I changed the gravity from 900 to 10000, amazing

  43. Wow, 1000 hearts! Thanks everyone!

  44. 牛逼!!!

  45. it'd be nice to make a pair of nice bouncy boobs covered with tearable cloth...

  46. Over a million views. Yeehaw!

  47. Gratz on >million views and >1000 hearts! :)

  48. This is awesome.

  49. brilliant!!

  50. i feel like a 5yr old playing with a new toy...nyc one

  51. This is awesome. (felt like I had to be the 1000th person to let you know)

  52. Awesome. I wish someday I'd be able to create smth. similar.

  53. Cool stuff you got here!

  54. oh itis very very very .

  55. This is awesome man Nice work

  56. WOW... played way too long, thanks for the inspiration

  57. 1.8 million views...

  58. great Work****

  59. Congrats on No. 1 of 2013. This is great work, I can't help but keep messing with the cloth :)

  60. Dude this is just.. brilliant. It performs flawlessly.

  61. very awesome :)

  62. Incredible work. I love it. :)

  63. awesomeeee

  64. Estoy interesado en utilizarlo. Cual es el precio? I am interested in using it. What is the price?

  65. Noah @Noah-Muhammad on

    You sir. Are a genius.

    If it hasn't already been said.

    If it has then know that, you sir, are a genius.

  66. woooooooooooow!!!! it's not possible !!! how he do that!!!

  67. blew my mind.... cant stop messing with it.... Damn you suffick!!! (nicely done, sir.)

  68. That's really awesome!

  69. Pretty sweet, although the right click still shows the context menu for me (Firefox 33.1, Windows 7)

  70. You are a wizard.

  71. Wo0o0oW , you are very special

  72. so cool! thanks!

  73. diao bao le! Perfect!!!

  74. This is fucking insane. Good job man.

  75. Amazing! Great job! :)

  76. > amazing!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1!!!!!!!!!!!!!!!!

  77. How would you go about putting an image on the cloth? Would that slow things down too much? Would it be possible to put these physics onto a styled div in order to put animation to that div?

  78. Pretty amazing work there. Good job.

  79. this is just cool as @!#$%^!

  80. Share this on reddit!

  81. Its too damn awesome... can't stop playing it.....

  82. OMG Very Awesome I can't believe it made just with CSS&Java Script.

  83. Amazing work man! So cool!!!! :D

  84. Amazing job! Relatively not too much code for what it does, kind of blown away this was only done with HTML, CSS and JS. CANT STOP PLAYING.

  85. you freaking kidding me...marvelous

  86. lol, this has been "popular" for like two years straight

  87. never ceases to amazer me <3_<3

  88. awesome job!! love it <3

  89. Looked to see what libraries you were using and found none. Just 300 lines of vanilla JS. mind=blown;

  90. Incredible work bro! Congrats!

  91. This would be even better with the html5 accelerometer api, Stunning work by the way!

  92. This is one of my all time favorite demos.

  93. ça déchire ^^

  94. This is amazing. Great work!

  95. This is amazing!! So realistic. It has been 3 weeks that I tear the cloth every few days, Fantastic work!!

  96. This Really cool! I've seen so man around codepen thou...

  97. This is so cool it makes me feel amateurish at JavaScript (I actually am)

  98. Amazing work dude !

  99. Unbelievable! I can't even.

  100. В клочья

  101. This is so good, it deserves a second comment from me! I have a suggestion, how about making the cloth fall when it's hanging by only one thread? Stellar work, anyway!

  102. Fucking cool shit.

  103. Eternal @EternalLocket on

    That's amazing!

  104. Great Job!!! Very Nice!

  105. insane wd

  106. Really This Is Amazing

  107. This pen is first and best comments on the pen ever!!!

  108. oh my god. I don't believe. That's amazing

  109. This is really awesome! Now just do it with a texture on the cloth! (the same image, just with a different background-position stretched across all those little polygons one-by-one) I'd love to tear into that... literally.

  110. This is so incredible!! I feel so inspired to make cool stuff!!!!

  111. Now a really important video about this pen http://bit.ly/2paM7lR

  112. This is incredible. Such realism.

  113. well... i just learned how to change font color, so i'll be doing this sort of thing in no time!! haha really cool work, super inspiring, keep it up!

  114. Really clever and really satisfying!

  115. Oh O.O

    That ist very cool. Thank you. I love it <3 (°oo°)

  116. Cooooooool stuff. Nice work !!!

  117. Aweeesomeeeeeeee


  119. Amazing !! Amazing !! Amazing !!

  120. Hats off - it's simply fantastic. I wish you'd put it all together in a tutorial, supposing you got the time and inclination.

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

You must be logged in to comment.