HTML


<div class="entry-content">
<div class="drawings">
	<figure>
	  <img class="illustration" src="http://codeplay.it/assets/bAsSiDa.jpg" alt="Ida Nielsen - Bassida" title="Ida Nielsen - Bassida" />
	  <svg class="line-drawing" id="draw-brand" width="100%" height="760" viewBox="0 0 960 960" preserveAspectRatio="xMidYMid meet">
			<path fill="none" stroke="#D9DADB" stroke-miterlimit="10" d="M190.875,849.5C190,847,188,845,186,843c-22-43-29-87.5-4-140
	c16-25,40-45,68-54c41-13,82-18,121-36c25-17,43-40,61-65c5-6,11-11,18-15c17-7,35-12,53-11c7,0,18,0,20,9c1,9-7,13-13,18
	c-21,13-42,30-42,55c0,7,5,15,12,17c82-56,158-109,244-168c4-2,8-5,12-7c20-15,39-27,58-40c4-7,0-14-1-21c-2-11,12-14,21-17
	c4-2,8-4,12-6c29-10,57-22,85-32c17,1,37,17,30,35c-1,2-2,4-3,7c-6,11-21,9-31,5c-2,0-4,0-6,0c-7,3-9,10-14,15c-9,13-18,23-28,35
	c-2,2-4,3-6,3c-11-3-23-10-34-4c-19,11-34,26-52,39c-28,22-53,40-80,62c-70,57-140,106-207,163c1,15,9,29,24,33c12,2,23,0,34-5
	c4-1,9-1,10,4c2,11-0.319,22.744-9,30c-22.333,18.667-38.117,21.893-64.118,28.893c-16.215,4.441-40.549,4.108-57.789,33.681
	c-7.554,12.959-14.985,28.729-23.999,44.998c-8.252,14.896-25.859,36.734-50.762,47.43c-1,1-77.565,37.233-126.667-23.334
	C208.487,874.811,204,870,197,861c-20-26-33-53-42-84c-14-49-22-98-22-148c0-15,3-29,5-44c12-62,27-118,47-177c5-14,9-27,18-39
	c9-10,20-17,31-26c14-10,28.499-14.259,42.5-22.5c0,0,12.75-5.75,17.25-14.75c4.5-9,8.25-14.25,8.5-19.249
	c0.765-15.276-5.024-33.623,12.362-41.775c0.371,3.804-0.047,14.267-4.769,15.919c-5.918,2.071-5.266-9.896-4.449-13.102
	c0.79-3.101,7.563-11.147,11.327-7.376c2.112,2.116-0.394,17.743-5.604,16.203c-2.479-0.733-2.983-8.165-0.531-9.347
	c3.955-1.906,3.457,6.072,6.893,8.073c6.835,3.979,10.814-2.971,8.463-9.058c-3.177-8.225-11.009-1.907-12.541,4.127
	c-0.793,3.125-2.521,15.503,2.504,13.958c4.707-1.447,5.057-16.225,0.311-17.844c-8.857-3.021-7.684,15.435-5.944,19.481
	c3.949,9.188,9.056,4.672,7.709-3.391c-0.834-4.993-4.876-7.811-6.798-1.489c-0.986,3.246-0.5,21.062,6.212,18.127
	c3.252-1.422,4.234-12.058,0.826-13.644c-9.236-4.297-9.835,14.829-9.052,19.063c0.802,4.336,6.035,13.674,9.803,6.315
	c2.418-4.723,0.888-14.04-5.1-15.041c-8.044-1.346-8.835,9.033-8.891,14.499c-0.047,4.639,2.068,14.113,6.568,7.191
	c2.079-3.198,6.411-12.262,1.497-15.118c-8.9-5.172-10.37,13.005-10.098,17.079c0.316,4.73,5.187,18.447,12.402,14.306
	c7.629-4.379,4.287-19.208-1.245-23.586c-6.439-5.097-16.538-1.201-18.818,6.517c-1.873,6.34-0.942,25.546,8.227,27.017
	c7.18,1.152,7.66-11.762,6.815-16.244c-1.059-5.617-9.157-13.029-14.705-7.754c-6.416,6.1,0.088,18.341,6.408,21.335
	c6.473,3.066,9.976-3.01,3.784-6.589c-13.843-8.003-12.745,18.423-3.185,16.527c0.121-0.725,0.202-1.833-0.015-2.534
	c-3.478,1.331-2.699,10.001-2.139,13.041c0.412,2.234,0.709,3.961,3.348,3.596c3.956-0.548,3.507-6.74,3.528-9.358
	c0.019-2.397,0.484-6.261-2.52-7.261c-2.955-0.984-3.6,1.384-4.197,3.909c-1.215,5.135-0.303,11.283-0.303,16.528
	c0,2.81-0.867,7.805,0.32,10.278c3.448-3.398,4.633-10.222,6.283-14.671c1.381-3.724,5.51-14.562,0.002-17.153
	c-10.895-5.125-11.608,32.635-8.277,37.623c2.817,4.217,5.273,0.298,5.996-3.592c0.498-2.681,1.753-17.436-1.229-19.115
	c-7.358-4.144-7.831,21.583-1.129,25.17c6.362-7.375-6.833-27.651-11.938-17.992c-3.049,5.77,0.322,20.968,6.336,24.173
	c6.098,3.25,4.653-6.964,3.333-10.512c-1.255-3.375-4.685-8.15-6.932-2.378c-1.888,4.851-0.637,18.161,3.476,21.902
	c4.191,3.813,8.027-2.286,7.152-6.412c-1.213-5.719-7.485-5.715-10.797-2.071c-5.254,5.78-5.585,19.265-2.852,26.247
	c1.662,4.244,8.037,10.168,11.312,3.958c2.446-4.639-1.122-14.44-7.689-12.245c-5.502,1.839-10.872,10.311-13.035,15.244
	c-3.972,9.057-5.159,25.19-0.196,34.031c6.236,11.108,18.97,18.827,27.422,28.223c3.567,3.965,10.899,10.898,10.731,16.803
	c-2.361-0.368-4.333-3.027-6.022-4.753c-6.713-6.855-13.676-14.161-19.567-21.713c-7.81-10.013-15.487-20.135-20.571-31.854
	c-5.108-11.775-4.275-25.727-3.746-38.336c0.289-6.9,1.257-13.776,1.958-20.639c0.246-2.409,0.41-4.529,1.678-6.543
	c2.645-4.204,7.466-8.146,11.1-11.444c6.884-6.246,12.969-13.216,19.825-19.451c5.919-5.384,12.019-10.814,17.41-16.712
	c4.246-4.645,11.037-7.921,11.944-14.605c0.886-6.527-4.925-10.216-10.152-12.889c-3.099-1.585-14.118-6.7-17.081-2.8
	c-4.107,5.409,9.605,16.869,13.546,9.039c2.077-4.126,0.087-12.036-2.363-15.637c-1.267-1.862-5.136-6.271-7.6-5.031
	c1.291,2.336,4.211,2.213,6.548,2.115c5.485-0.229,8.032-3.696,8.78-9.011c0.779-5.544-1.434-18.499-9.557-17.019
	c-0.521,1.716,0.215,4.085,2.32,4.281c3.476,0.324,3.122-5.802,1.973-7.94c-3.902-7.263-9.647,2.444-2.102,4.885
	c11.182,3.618,15.708-13.771,3.146-15.462c-6.637-0.893-12.252,2.186-15.955,7.803c-2.67,4.05-2.435,8.136-2.468,12.738
	c0,0,0-33.667,10.333-64s49.001-55.667,89.334-43.333s65.212,50.45,68.333,65c3.083,14.375-4.429,33.531-6.667,41.333
	c-1.875,6.542-2.765,4.918-6.232,8.562c-4.144,4.354-3.071,3.954-3.435,8.104c-0.395,4.505,2.333,20.667,3,23.667
	S459,309,450.301,307.231c0,0-1.654-0.772-5.801-1.856c0,0-3.993-0.476-8.833-1.375c0,0-1.667-2.666-3,4.667c0,0,1.334,4-0.333,6
	L430,316c0,0-1.333,6.667-5,9.333c0,0-0.333,6.333-4.333,7c0,0-3.333-2.333-4.667,2.333c0,0,3,19-6.333,18c0,0-4.666,0-9.333-1.333
	l-1,2c0,0,30,16,31.667,26c0,0,11.333,20.333,8.667,30c0,0,11.333,73.667,18.333,83.333c0,0,11,23,12.333,29"/>

		</svg>
	  </figure>
  </div>
</div>


CSS


/* ** ** **
** Ida Nielsen " bassida "
** @webbeloz web _dev.
** Special Shot, What a Shot !!! :D
*/
html, body {
  background-color: black;
  margin: 0;
  height: 100%;
}  
svg {
  pointer-events: none;
  display: block;
}
.entry-content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 760px;
  width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.drawings {
  position: relative;
  display: block;  
  /*min-height: 480px;*/
  max-height: 960px;
  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%);
}
.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=300,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