HTML


<div class="entry-content">
<div class="drawings">
	<figure>
	  <img class="illustration" src="http://codeplay.it/assets/sTiczzrt.png" alt="Sticazzers" title="Sticazzers" />
	  <svg class="line-drawing" id="draw-brand" width="100%" height="800" viewBox="0 0 802 802" preserveAspectRatio="xMidYMid meet">
		
		<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M608.73,161.751h-43.362l86.726-91.654
			l-69.11-69.766L490.838,89.25L401.402,0.332l-161.257,161.42h-43.363l88.081-91.654l-71.82-69.766l-88.082,90.286l-77.24-72.501
			v238.025h707.359V18.116L608.73,161.751z M200.848,505.11H47.722c12.196,64.295,51.493,128.383,51.493,128.383
			c25.747-46.717,112.473-73.665,112.473-73.665C202.203,531.102,200.848,505.11,200.848,505.11z M249.631,552.988
			c0,0,104.342-20.519,269.665,62.927c0,0,79.95,54.719,138.219,54.719c0,0,47.565,1.368,93.639-165.523H240.145
			C240.145,505.11,241.5,532.47,249.631,552.988z M223.884,595.396c0,0-60.979,10.943-104.342,65.662
			c0,0,109.291,147.739,282.302,138.164C401.844,799.223,244.21,697.993,223.884,595.396z M260.692,587.873
			c51.714,151.158,216.595,201.773,216.595,201.773c100.277-20.519,162.611-84.813,162.611-84.813
			c-56.915-4.104-166.676-71.34-166.676-71.34C332.293,577.201,260.692,587.873,260.692,587.873z M58.907,419.183
			c2.745,0.439,5.489,0.722,8.243,0.842c2.749,0.119,5.208,0.18,7.38,0.18c1.301,0,3.292-0.041,5.981-0.119
			c2.684-0.082,5.542-0.303,8.573-0.662c3.026-0.36,5.999-0.901,8.914-1.623c2.91-0.722,5.367-1.683,7.37-2.884
			c0.329-0.32,0.744-0.723,1.241-1.203c0.302-0.399,0.68-0.919,1.123-1.562c0.445-0.641,0.713-1.482,0.815-2.524l3.564-16.226
			c0.502-2.482-0.033-4.808-1.594-6.972c-1.566-2.164-4.758-4.327-9.573-6.491c-1.533-0.721-3.687-1.501-6.448-2.344
			c-2.768-0.841-5.462-1.803-8.088-2.884c-2.626-1.081-4.908-2.263-6.835-3.545c-1.933-1.281-2.723-2.723-2.37-4.328l3.875-20.312
			c0.567-1.603,1.647-2.624,3.243-3.065c1.592-0.439,3.474-0.661,5.646-0.661c5.206,0,7.754,0.842,7.646,2.524l-4.293,21.034
			c-0.206,0.722,0.562,1.082,2.3,1.082h21.803l4.689-22.836c0.033-0.56-0.01-1.041-0.139-1.442c-0.128-0.4-0.257-0.8-0.387-1.202
			c-0.103-0.319-0.331-0.68-0.673-1.082c-1.063-1.281-2.756-2.324-5.073-3.125c-2.322-0.801-4.844-1.402-7.577-1.804
			c-2.732-0.399-5.481-0.68-8.243-0.841c-2.767-0.16-5.233-0.241-7.399-0.241c-1.302,0-3.353,0.042-6.144,0.12
			c-2.796,0.081-5.709,0.301-8.736,0.662c-3.031,0.36-6.004,0.902-8.914,1.623c-2.916,0.721-5.251,1.724-7.005,3.005l-0.612,0.12
			c0.051,0.162-0.337,0.642-1.163,1.442c-0.83,0.802-1.419,2.004-1.768,3.606l-4.573,23.198c-0.38,1.522,0.084,2.965,1.392,4.327
			c1.303,1.363,3.018,2.645,5.144,3.846c2.12,1.202,4.666,2.365,7.629,3.486c2.965,1.123,6.023,2.205,9.18,3.245
			c4.421,1.604,7.578,3.326,9.473,5.168c1.896,1.845,2.604,4.047,2.128,6.611c-0.231,0.642-0.484,1.704-0.765,3.185
			c-0.285,1.483-0.615,2.986-0.99,4.507c-0.302,1.763-0.659,3.687-1.071,5.77c-0.354,1.604-1.382,2.625-3.082,3.064
			c-1.704,0.442-3.641,0.661-5.807,0.661c-5.425,0-7.867-0.842-7.32-2.524l3.82-19.471c0.2-0.721-0.673-1.082-2.626-1.082H49.332
			l-4.255,21.154c-0.264,1.203-0.199,2.086,0.2,2.645c0.129,0.402,0.46,0.763,0.999,1.082c1.063,1.282,2.745,2.305,5.054,3.065
			C53.635,418.143,56.162,418.742,58.907,419.183z M138.845,335.948l-1.452,6.611c-0.206,0.721,0.673,1.082,2.626,1.082h22.453
			l-15.653,75.722h24.406l15.327-75.722h22.453c2.166,0,3.138-0.361,2.906-1.082l1.452-6.611H138.845z M245.59,335.948h-21.476
			l-17.082,83.415h21.477c1.733,0,2.714-0.319,2.944-0.962l16.438-81.371C248.091,336.309,247.324,335.948,245.59,335.948z
			 M294.615,365.636c-0.23,0.643,0.523,0.962,2.262,0.962h20.5l4.085-20.674c0.348-1.601,0.399-2.804,0.141-3.605
			c-0.258-0.801-0.722-1.563-1.386-2.284c-0.566-0.4-1.378-0.902-2.437-1.503c-1.062-0.601-2.607-1.182-4.628-1.743
			c-2.026-0.56-4.728-1.041-8.111-1.442c-3.383-0.4-7.464-0.601-12.234-0.601c-6.945,0-12.474,0.341-16.591,1.021
			c-4.123,0.681-6.958,1.303-8.512,1.863c-5.316,1.683-8.25,4.368-8.797,8.053l-13.261,63.943c-0.315,2.403,0.253,4.168,1.702,5.289
			c1.444,1.122,3.136,2.003,5.081,2.644c3.397,1.124,7.152,1.842,11.272,2.163c4.114,0.319,7.909,0.481,11.381,0.481
			c3.687,0,7.809-0.162,12.373-0.481c4.56-0.321,8.789-1.161,12.692-2.522c3.326-1.122,5.474-2.363,6.448-3.728
			c0.97-1.36,1.589-2.644,1.853-3.846l4.053-18.75c-0.207-0.641-1.072-0.963-2.587-0.963h-20.175l-3.595,18.15
			c-0.206,0.722-0.474,1.402-0.807,2.043c-0.337,0.643-1.309,1.163-2.915,1.563c-1.197,0.32-2.391,0.501-3.567,0.542
			c-1.182,0.04-1.882,0.06-2.096,0.06c-3.691,0-5.96-0.319-6.818-0.961c-0.779-0.401-1.166-0.921-1.154-1.563
			c0.007-0.641,0.033-1.242,0.07-1.803l12.64-60.818c0.175-0.8,0.431-1.522,0.769-2.164c0.333-0.64,1.403-1.202,3.2-1.683
			c0.98-0.319,2.006-0.5,3.081-0.541c1.07-0.04,1.933-0.061,2.583-0.061c2.384,0,4.014,0.181,4.892,0.541
			c0.874,0.361,1.472,0.703,1.792,1.021c0.587,0.481,0.804,1.484,0.643,3.005L294.615,365.636z M346.778,418.521l5.227-11.059
			h16.597l0.575,11.899h21.477c1.952,0,3.026-0.36,3.231-1.082l-5.023-82.333h-24.73c-1.302,0-2.286,0.321-2.944,0.961
			l-39.194,82.453h21.803C345.529,419.362,346.522,419.083,346.778,418.521z M371.809,353.736l-2.128,44.954h-13.992
			L371.809,353.736z M451.504,419.362l1.417-6.716c-0.208-0.649-1.076-0.977-2.592-0.977h-21.151l41.685-75.722h-49.786
			l-1.126,6.611c-0.206,0.721,0.562,1.082,2.3,1.082h24.731l-44.939,75.722H451.504z M509.748,419.362l1.417-6.716
			c-0.209-0.649-1.077-0.977-2.592-0.977h-21.151l41.686-75.722H479.32l-1.126,6.611c-0.206,0.721,0.561,1.082,2.301,1.082h24.73
			l-44.939,75.722H509.748z M525.364,419.362h46.857c1.734,0,2.713-0.325,2.94-0.976l1.417-6.717h-25.381l6.708-31.731h18.873
			c1.734,0,2.713-0.324,2.941-0.976l1.091-6.716h-21.476l5.761-28.605h20.825c1.952,0,3.025-0.361,3.232-1.082l1.125-6.611h-47.834
			L525.364,419.362z M660.045,377.716c1.125-1.563,1.942-3.225,2.463-4.988l5.179-25.361c0.271-1.842,0.161-3.546-0.343-5.109
			c-0.503-1.562-2.794-2.944-6.865-4.146c-3.615-1.121-7.514-1.762-11.684-1.922c-4.176-0.161-8.538-0.241-13.094-0.241h-31.239
			l-17.08,83.415h20.825c1.733,0,2.715-0.319,2.945-0.962l7.483-34.375h7.158h0.325l7.851,34.496
			c0.18,0.562,1.027,0.841,2.547,0.841h21.152l-9.196-36.659c1.198-0.319,2.203-0.559,3.021-0.721
			C656.069,380.702,658.923,379.279,660.045,377.716z M643.095,348.809l-4.479,22.477c-0.232,0.642-0.409,1.103-0.531,1.382
			c-0.129,0.282-0.344,0.622-0.647,1.021c-1.302,1.363-3.265,2.164-5.897,2.405c-2.639,0.24-5.472,0.36-8.507,0.36h-2.931
			l6.688-32.813h2.928c3.035,0,5.777,0.102,8.232,0.301c2.448,0.2,4.108,0.981,4.983,2.343c0.13,0.401,0.239,0.743,0.329,1.021
			C643.352,347.588,643.294,348.087,643.095,348.809z M697.532,390.516c0.201-0.721-0.673-1.082-2.626-1.082H673.43l-4.255,21.154
			c-0.264,1.203-0.198,2.086,0.2,2.645c0.13,0.402,0.459,0.763,0.999,1.082c1.063,1.282,2.745,2.305,5.054,3.065
			c2.306,0.763,4.833,1.362,7.576,1.803c2.746,0.439,5.49,0.722,8.244,0.842c2.748,0.119,5.208,0.18,7.38,0.18
			c1.301,0,3.292-0.041,5.981-0.119c2.683-0.082,5.542-0.303,8.572-0.662c3.027-0.36,5.999-0.901,8.915-1.623
			c2.909-0.722,5.366-1.683,7.369-2.884c0.33-0.32,0.743-0.723,1.24-1.203c0.303-0.399,0.681-0.919,1.124-1.562
			c0.444-0.641,0.712-1.482,0.814-2.524l3.563-16.226c0.503-2.482-0.032-4.808-1.594-6.972c-1.565-2.164-4.758-4.327-9.572-6.491
			c-1.533-0.721-3.687-1.501-6.449-2.344c-2.767-0.841-5.462-1.803-8.088-2.884c-2.625-1.081-4.907-2.263-6.837-3.545
			c-1.931-1.281-2.721-2.723-2.367-4.328l3.875-20.312c0.567-1.603,1.647-2.624,3.243-3.065c1.593-0.439,3.474-0.661,5.646-0.661
			c5.206,0,7.755,0.842,7.645,2.524l-4.293,21.034c-0.205,0.722,0.562,1.082,2.301,1.082h21.803l4.689-22.836
			c0.033-0.56-0.01-1.041-0.139-1.442c-0.13-0.4-0.258-0.8-0.388-1.202c-0.103-0.319-0.33-0.68-0.673-1.082
			c-1.063-1.281-2.757-2.324-5.074-3.125c-2.321-0.801-4.844-1.402-7.576-1.804c-2.731-0.399-5.48-0.68-8.244-0.841
			c-2.766-0.16-5.232-0.241-7.398-0.241c-1.302,0-3.354,0.042-6.143,0.12c-2.797,0.081-5.712,0.301-8.737,0.662
			c-3.031,0.36-6.003,0.902-8.915,1.623c-2.914,0.721-5.25,1.724-7.004,3.005l-0.612,0.12c0.052,0.162-0.337,0.642-1.163,1.442
			c-0.829,0.802-1.419,2.004-1.768,3.606l-4.573,23.198c-0.38,1.522,0.084,2.965,1.392,4.327c1.304,1.363,3.018,2.645,5.143,3.846
			c2.121,1.202,4.667,2.365,7.632,3.486c2.964,1.123,6.021,2.205,9.179,3.245c4.422,1.604,7.579,3.326,9.473,5.168
			c1.896,1.845,2.604,4.047,2.129,6.611c-0.23,0.642-0.484,1.704-0.766,3.185c-0.284,1.483-0.615,2.986-0.989,4.507
			c-0.303,1.763-0.659,3.687-1.071,5.77c-0.354,1.604-1.383,2.625-3.082,3.064c-1.702,0.442-3.641,0.661-5.808,0.661
			c-5.424,0-7.865-0.842-7.32-2.524L697.532,390.516z"/>
		
		</svg>
	  </figure>
  </div>
</div>



CSS


/*  _____ _______ _____ _____           __________________ _____   _____ 
 / ____|__   __|_   _/ ____|   /\    |___  /___  /  ____|  __ \ / ____|
| (___    | |    | || |       /  \      / /   / /| |__  | |__) | (___  
 \___ \   | |    | || |      / /\ \    / /   / / |  __| |  _  / \___ \ 
 ____) |  | |   _| || |____ / ____ \  / /__ / /__| |____| | \ \ ____) |
|_____/   |_|  |_____\_____/_/    \_\/_____/_____|______|_|  \_\_____/ 

    The New Juventus Style 
    stay tuned!
*/
html, body {
  background-color: black;
  margin: 0;
  height: 100%;
}  
svg {
  pointer-events: none;
  display: block;
}
.entry-content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 800px;
  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=800,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");
};
			 
			 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