HTML


<div class="entry-content">
<div class="drawings">
	<figure>
	  <img class="illustration" src="https://www.riva-yacht.com/Portals/7/Skins/Riva/images/hp_storia.jpg" alt="Riva - Cantieri Nautici" title="Riva - Cantieri Nautici" />
	  <svg class="line-drawing" id="draw-brand" width="100%" height="760" viewBox="0 0 278.4 51.8" preserveAspectRatio="xMidYMid meet">
		
		<path d="M248.1,40.5c-4,2-8.8,2.6-13.5,2.5c-2-0.3-4.1-0.6-5.8-1.8c-2-1.4-1.2-3.5,0.3-5c1.2-1.2,4.7-2.3,6.4-2.7  c2.6-0.6,6.8-1.1,11.2-0.1c1.6,0.3,4.4,1.2,4.8,2.9C252,38.1,249.4,39.9,248.1,40.5 M32.1,18.4c0.4-0.8,0.9-1.7,1.4-2.5  c0.1-0.1,1.7-0.5,2.3-0.7c3.9-1.2,7.7-2.4,11.7-3.2c4.2-0.9,8.5-1.9,12.9-2.2c4.3-0.3,8.5-0.5,12.7,0.1c8.3,1,15.2,3.8,16.1,6.5  c0.6,1.9-1.3,4.6-3.4,5.8c-9.2,5.6-18.3,6.1-22.3,6.3c-4.2,0.2-15.4,0.4-28.9-2.4c-1.9-0.4-3.8-1.1-5.7-1.6  C30,22.5,31,20.5,32.1,18.4 M278.4,50c-0.1-1.1-0.8-1.8-1.9-1.9c-1.1-0.1-1.4,0-2.6-0.4c-1.2-0.4-2.1-1.2-2.8-2.3  c-2.8-4.4-5.6-8.7-8.4-13.1c-0.5-0.8-1-1.6-1.6-2.5c-0.2-0.4-0.3-0.6-0.7-0.7c-2.2-0.5-4.4-0.9-6.6-1.4c0.2,0.7,0.5,1.4,0.7,2.1  c-6.8-2.4-13.6-2.9-19.3-2.5c-1.9,0.1-3.7,0.7-5.5,0.9c-4.1,0.5-8.1,1-12.3,1c-4.3,0-8.7-0.1-13.1-0.3c-4.1-0.2-8.3-1.1-12.3-2  c-0.9-0.2-1.8-0.4-2.8-0.6c-1.2-0.2-2.5-0.6-3.7-0.2c-2.2,0.8-3.2,3.4-2.1,5.4c0.6,1.1,1.9,1.5,1.5,2.9c-1,4-3.7,7.8-7.8,9  c-0.7,0.2-2,0.3-2.3-0.6c-0.2-0.9,0.1-2,0.3-2.9c0.5-2,1.3-3.9,2.1-5.8c0.8-1.9,1.5-3.7,1.8-5.8c0.2-1.2-0.6-2.4-1.8-2.6  c-1.2-0.2-2.6,0.7-3.8,1.2c-2.7,1.2-5.5,2.3-8.3,3.3c-5.1,1.9-16.7,5.7-25.4,7.9c-1.5,0.4-3,0.7-4.5,1.1c-0.8,0.3-1.4-0.5-1.2-1.3  c1.5-4,3-8.1,4.5-12.1h-10.4c-0.1,0-0.4-0.1-0.5,0c-0.3,0.5-0.6,0.9-0.8,1.4c-0.3,0.6-0.7,1.1-1,1.7c-0.2,0.3-0.7,0.4-1,0.6  c-1,0.5-1.9,1-2.9,1.5c-1.9,0.9-3.8,1.8-5.7,2.6c-3.8,1.6-7.7,3-11.5,4.4c-3.6,1.3-7.4,2.4-11.1,3.3c-4.2,1.1-8.4,2.1-12.8,2.5  c-3.9,0.4-8,0.7-12,0.4c-4.2-0.4-8.2-0.9-12.3-2c-3.8-1-7.7-2.2-11.3-3.9c-1.9-0.9-3.9-1.7-5.7-2.7c-2-1.1-4-2.2-6-3.3  c7.9,2,15.8,3.9,23.9,4.7c4,0.4,8.1,0.3,12.1,0.2c4.3-0.2,8.5-0.9,12.7-2c3.9-1,7.6-2.9,11.2-4.9c2.7-1.5,10.5-7.1,11.5-13.3  c0.4-2.3-0.3-4-1.4-5.9c-2.1-3.7-6.1-5.7-9.8-7.3C86.7,0.9,78.1,0,70.2,0.4c-8.1,0.5-16.3,1.9-24.1,4.3c-8.2,2.5-16,5.6-23.9,9.1  c-3.7,1.7-7.4,3.4-11,5.1C9.1,20,7,21.1,4.9,22.1c-0.2,0.1-0.3,0.3-0.4,0.5c-0.4,1-1.7,3.4-2.2,4.4c3.9-1.4,7.7-2.8,11.6-4.2  c0.5-0.2,1-0.4,1.5-0.6c0.3-0.1-0.1,0.6-0.1,0.5c-0.6,1.2-1.3,2.4-1.9,3.6C8.9,34.6,4.5,42.9,0,51.2C4.5,51.1,9,51,13.6,51  c0.4,0,0.4,0,0.6-0.4c0.4-0.8,0.9-1.6,1.3-2.4c1.4-2.6,2.8-5.2,4.2-7.8l3.2-5.8c0.2-0.4,0.5-0.5,0.9-0.2c1,0.7,2.1,1.4,3.1,2.1  C34,41.3,41.4,45,49.4,47.8c7.8,2.7,16.1,3.7,24.4,3.6c4-0.1,8.1-0.9,12.1-1.7c3.7-0.8,7.5-1.7,11.1-2.8c7.8-2.4,22.1-8,24.1-8.8  c-0.5,0.9-1,1.7-1.5,2.5c-1.3,2.3-3.9,5.3-2.7,8.1c0.5,1.1,1.4,1.9,2.6,2.3c1.3,0.4,2.5,0,3.7-0.3c2.9-0.6,5.8-1.3,8.6-2.1  c11.4-3,22.6-6.9,33.3-11.8c-2,3.4-4.8,8.9-1.8,12.5c1.4,1.7,3.6,2.1,5.7,2.4c6,1,12.6-1.7,16.6-5.8c2.8-3,4.6-6.7,5.7-10.6  c0-0.1,0.4-1.4,0.4-1.4c0.6,0.1,1.2,0.2,1.7,0.3c1.1,0.2,2.1,0.2,3.2,0.3c2,0.2,4,0.3,6,0.4c4.2,0.2,8.3,0.3,12.4,0  c1-0.1,1.9-0.2,2.9-0.3c1.6-0.2,0.2,0.8-0.2,1.4c-1.1,1.6-2.1,3.6-1.9,5.6c0.1,2.3,1,4,2.6,5.5c1.5,1.4,3.4,2.1,5.3,2.8  c7,2.3,17.6,1.8,24-0.8c5.6-2.3,9.5-5.1,11-6.2c0.3,0.9,1.3,3.9,2,6c0.2,0.7,0.7,1.2,1,1.4c1.6,1.4,4.5,0.9,6.4,0.9h10.1  C278.5,51,278.4,50.2,278.4,50 M137.6,20.6c3,0.4,6-1.1,10-5.4c3.2-3.5,6.6-11.8,3.1-14.4c-3.4-2.5-8.8,1.5-12.4,6  c-1.3,1.5-2.6,3.9-3.3,6.2C134,16.4,134.1,20.3,137.6,20.6"/>

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




CSS


/* ** ** **
** Cantieri RIVA " Iseo Lake "
** @webbeloz web _dev.
** Special Shot in memory of Carlo Riva
*/
html, body {
  background-color: black;
  margin: 0;
  height: 100%;
}  
svg {
  pointer-events: none;
  display: block;
}
.entry-content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 720px;
  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;
}
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