HTML


<div class="entry-content">
<div class="drawings">
	<figure>
	  <img class="illustration" src="http://attrac.co/cGbXz?+" alt="Knife Svg Animation" />
	  <svg class="line-drawing" id="draw-brand" width="100%" height="443" viewBox="0 0 808 443" preserveAspectRatio="xMidYMid meet">
		<path fill="none" stroke="#1A171B" stroke-miterlimit="10" d="M361.355,172.96c0,0,9.679,46.875,79.584,65.089	c0,0-1.792,8.84-20.04,7.074c0,0-3.435,0.243-6.908,1.146c0,0-9.617-2.327-7.108,8.387c0,0-292.884,219.643-406.883,184.285	C0,438.941,120.452,315.594,361.355,172.96z"/>
		<path fill="none" stroke="#1A171B" stroke-miterlimit="10" d="M361.355,172.96v-6.965l56.283-34.018	c0,0,30.112,22.232,93.565,15.804c0,0,34.056-4.286,40.508,4.688c0,0-76.357,19.688-91.414,80.759l-1.434,6.965	C458.864,240.192,382.506,235.37,361.355,172.96z"/>
		<path fill="none" stroke="#1A171B" stroke-miterlimit="10" d="M417.639,131.978c0,0,99.121-55.446,196.988-92.411	c0,0,9.141-5.223,19.358-5.223c0,0,27.424,5.652,67.216-18.482c0,0,7.871-4.018,18.82-6.429c0,0,10.755,12.857,15.057,65.491	c0,0-60.764,17.277-82.811,31.741c0,0-49.202,26.518-94.102,43.192c-3.917,1.455-6.005,2.277-6.005,2.277s-6.452-9.174-47.78-3.764	C504.381,148.37,457.79,154.076,417.639,131.978z"/>
		<path fill="none" stroke="#1A171B" stroke-miterlimit="10" d="M720.828,9.433c0,0,22.316-5.826,44.095-4.018	c0,0,17.476,3.013,30.65,30.536c0,0,7.797,19.688-4.033,33.951c0,0-32.8-2.265-56.462,5.022	C735.078,74.924,733.196,27.111,720.828,9.433z"/>
		<path fill="none" stroke="#1A171B" stroke-miterlimit="10" d="M791.54,69.901l-9.679,18.281c0,0-52.967-7.399-150.565,47.411	c0,0-19.506,10.195-40.329,17.678c0,0-129.056,39.375-134.434,97.232v6.027c0,0-28.644-1.363-35.634-11.408"/>
		<path fill="none" stroke="#1A171B" stroke-miterlimit="10" d="M633.985,34.344c0,0,30.472,0,64.372-16.796"/>
		</svg>
	  </figure>
  </div><!--drawing-->
</div>


CSS


/** ** ** **
 Realized /Forum knifeMaking
 @handle
 special tnx to unknow kniver.
*/
html, body {
  background: #0B0B09;
  margin: 0;
  height: 100%;
}  
svg {
  pointer-events: none;
  display: block;
}
.entry-content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 443px;
  width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.drawings {
  position: relative;
  display: block;  
  /*min-height: 480px;*/
  max-height: 443px;
  height: auto !important;  
}
.illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.endif {
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  /*
  -webkit-filter: drop-shadow( 1px 7px 0 #2c2c2c );
  filter: drop-shadow( 5px 12px 3px #888 );
  */
}
.fall-back {
  opacity: 0;
}
.fall-back .show {
  opacity: 1;
}
.fall-back .hide {
  opacity: 0;
}
.show {
  opacity: 1;
}
.hide {
  opacity: 0;
}
.line-drawing,
.endif {
  -webkit-transition: opacity 700ms;
  -moz-transition: opacity 700ms;
  transition: opacity 700ms;
}
.line-drawing path {
  fill: none;
  stroke: lightblue;
  stroke-width: 1.5;
}
path.line-round {
  stroke-linecap: round;
}
path.stroke-medium {
  stroke-width: 2;
}
path.stroke-thin {
  stroke-width: 1.5;
}


JS


!function(e){"use strict";function t(e){return new RegExp("(^|\s+)"+e+"(\s+|$)")}function n(e,t){var n=c(e,t)?u:f;n(e,t)}function i(e){this.el=e,this.image=this.el.previousElementSibling,this.current_frame=0,this.total_frames=90,this.path=new Array,this.length=new Array,this.handle=0,this.init()}function a(){var t=m.clientHeight,n=e.innerHeight;return n>t?n:t}function r(){return e.pageYOffset||m.scrollTop}function o(e){var t=0,n=0;do isNaN(e.offsetTop)||(t+=e.offsetTop),isNaN(e.offsetLeft)||(n+=e.offsetLeft);while(e=e.offsetParent);return{top:t,left:n}}function s(e,t){var n=e.offsetHeight,i=r(),s=i+a(),l=o(e).top,c=l+n,t=t||0;return s>=l+n*t&&c>=i}function l(){var t,n=Array.prototype.slice.call(document.querySelectorAll(".entry-content svg")),a=new Array,r=!1;n.forEach(function(e,t){var n=new i(e);a[t]=n,setTimeout(function(e){return function(){s(e.parentNode)&&n.render()}}(e),1800)});var o=function(){r||(r=!0,setTimeout(function(){l()},60))},l=function(){n.forEach(function(e,t){s(e.parentNode,.5)&&a[t].render()}),r=!1},c=function(){function e(){l(),t=null}t&&clearTimeout(t),t=setTimeout(e,200)};e.addEventListener("scroll",o,!1),e.addEventListener("resize",c,!1)}var c,f,u,m=e.document.documentElement,h=document.getElementById("blurry");"classList"in document.documentElement?(c=function(e,t){return e.classList.contains(t)},f=function(e,t){e.classList.add(t)},u=function(e,t){e.classList.remove(t)}):(c=function(e,n){return t(n).test(e.className)},f=function(e,t){c(e,t)||(e.className=e.className+" "+t)},u=function(e,n){e.className=e.className.replace(t(n)," ")});var d={hasClass:c,addClass:f,removeClass:u,toggleClass:n,has:c,add:f,remove:u,toggle:n};"function"==typeof define&&define.amd?define(d):e.classie=d,e.requestAnimFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t){e.setTimeout(t,1e3/60)}}(),e.cancelAnimFrame=function(){return e.cancelAnimationFrame||e.webkitCancelAnimationFrame||e.mozCancelAnimationFrame||e.oCancelAnimationFrame||e.msCancelAnimationFrame||function(t){e.clearTimeout(t)}}(),i.prototype.init=function(){var e=this;[].slice.call(this.el.querySelectorAll("path")).forEach(function(t,n){e.path[n]=t;var i=e.path[n].getTotalLength();e.length[n]=i,e.path[n].style.strokeDasharray=i+" "+i,e.path[n].style.strokeDashoffset=i})},i.prototype.render=function(){this.rendered||(this.rendered=!0,this.draw())},i.prototype.draw=function(){var t=this,n=this.current_frame/this.total_frames;if(n>1)e.cancelAnimFrame(this.handle),this.showImage();else{this.current_frame++;for(var i=0,a=this.path.length;a>i;i++)this.path[i].style.strokeDashoffset=Math.floor(this.length[i]*(1-n));this.handle=e.requestAnimFrame(function(){t.draw()})}},i.prototype.showImage=function(){d.add(this.image,"show"),d.add(this.el,"show");
}
/*  ,h.style.position="fixed",h.style.top="0",h.style.left="0",h.style.height="340px",h.style.width="100%",h.style.zIndex="0",h.style.filter="url(#f2)",h.style.MozFilter="url(#f2)",h.style.background="-moz-element(#page-header-home) left top no-repeat fixed",h.style.background="element(#page-header-home) left top no-repeat fixed"},
*/
l()}(window);




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now