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

A modernised/improved version.

It's been a couple of years since I made the original tearable cloth, and since then both me and Javascript have improved. I thought it deserved an update.

It should be more efficient, wall collisions are greatly improved, and it has a slightly more stretchy, cloth-like texture. The code is better, a bit smaller and now in ES2015. That was the main point.


  1. Will it reach 3M views too ? :-D

  2. This is amazing! I hope one day I become as good as you kind sir!

  3. @mistic100 only 2,998,961 to go!

    @athoug I don't doubt you will be, if you aren't already.

  4. I thought the coolest thing about the original was how little code it needed. And now it's even less code. Gotta love the new JS stuff!

  5. You still haven't fixed the mouseUp event outside of canvas... it afterwards do weird things...

  6. 👏 Tiny script, huge magic! Thanks for sharing

  7. Awesome work!

    I hope, some day we can also leave the requestAnimationFrame polyfill behind :)

  8. I like how it tears.

  9. DAMN!!!!!!! You're the real G man

  10. wooo! I am just setting here playing with it for hours, this is so cool!

  11. Awesome

  12. So awesome @dissimulate! It would be wonderful if we could somehow add a background of a flag/banner image and transparent the cloth so it would be like a real flag moving in the wind.

  13. Thats awesome sir..

  14. Its so awesome I changed the program and added more options like wind, pattern, strength, etc. You can even change it to USA flag! (to show respect you can't rip it) Tearable cloth with more options!

  15. There's a little glitch that I think you should fix that @Akxe was talking about. If the mouse button is down and it is dragged off the canvas and is released, the code still counts as though it is down. Fix it by changing "canvas" on lines 215 and 223 to "window".

  16. Adapted this to work with a PIXI.js Plane Mesh, allow you to make a cloth image! http://codepen.io/shshaw/pen/JbrQrW?editors=1010

  17. 可怕!awesome!

  18. Amazing work! Would you please share some suggestions/tips on how you became so good? Did you learn alone, in university etc. (I am sorry if my English is poor)

  19. This is awesome

  20. super!

  21. I hate to be the one to tell you this, but this project of yours, it's... tearable.

    ba dum tsss

  22. Is it ever gonna contain a reset button?

  23. Do you want to use pure JS? Otherwise use jQuery for selectors. It works almost the same.

  24. @BCP05 It's silly to load a whole library to replace document.getElementById with $, especially for one instance. You could do that in one line of vanilla JS if you really wanted to.

  25. Touch support (through my own drag-tracker), and a reset button! https://codepen.io/Sphinxxxx/pen/PEqOYg

  26. Holy shit! This is mind-blowingly amazing!

  27. Very cool! The new version has the statement "Updated version here" which takes me to the updated version which has.... It's got me loopy! It's fun to rip a skull face into the cloth. Can the cloth contain a simple image like a big yellow happy face? That would be awesome! Thanks..

  28. How can I change it so it only rips with right mouse button? It's fun to fling the cloth quickly with left button but I would like it to not rip that way. Also, how to add code to use device tilt to swing or shake cloth? Thanks :O)

  29. This blows my tiny mind. Would there be a way to overlay an image over the mesh that tears as well?

  30. WOOOOOOW!! This is awesome !! Just one small bug... when you left-click and drag outside the box, release click and enter the box again, then it is still registered as a click.... but still super cool :)

  31. if you hold your mouse and move it REALLY fast over the cloth from left to right or vice versa, most of the cloth will be suck through the wall. It may takes a few tries to do that, it works better in Zero G.

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

You must be logged in to comment.