Tearable Cloth

×


– Tear the cloth with your mouse

– Right click and drag to cut


GitHub 

* { margin: 0; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } body { background: #F2F2F2; } #c { display: block; margin: 20px auto 0; } #info { position: absolute; left: -1px; top: -1px; width: auto; max-width: 420px; height: auto; background: #f8f8f8; border-bottom-right-radius: 10px; border:1px solid #ccc; } #top { background: #fff; width: 100%; height: auto; position: relative; border-bottom: 1px solid #eee; } p { font-family: Arial, sans-serif; color: #666; text-align: justify; font-size: 16px; margin: 0px 16px; } #github, #twitter { color:#3377ee; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; text-align: center; text-decoration:none; } .center { text-align: center; } #net { text-align:center; white-space:nowrap; font-size:19px; background:rgba(0,0,0,0.1); padding:8px 12px; border-radius:8px; display:block; color:#888; } #net > span { color:#3377ee; font-family: Helvetica, Arial, sans-serif; font-size: 14px; display: block; margin: 0 auto; text-align: center; text-decoration:none; } a { font-family: sans-serif; color: #444; text-decoration: none; font-size: 20px; } #site { float: left; margin: 10px; color: #ff9900; border-bottom: 1px dashed #ccc; padding-bottom:3px } #site:hover { color: #ffaa11; } #close { float: right; margin: 10px; } #p { font-family: Verdana, sans-serif; position: absolute; right: 10px; bottom: 10px; color: #4099ff; border: 1px dashed #4099ff; padding: 4px 8px; } #new { width: 100%; text-align: center; font-size: 18px; font-family: Helvetica; margin-top: 12px; } #new a { font-size: 20px; color: #4099ff; } .bull { opacity: 0.3; margin: 0 6px; font-size: 14px; }