HTML


<h1>JUVENTUS</h1>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="232.112px" height="356.017px" viewBox="0 0 232.112 356.017" enable-background="new 0 0 232.112 356.017"
	 xml:space="preserve">
	<path class="stroke" fill="none" stroke-miterlimit="10" d="M0.5,0.5h231v213c0,0,8,93-111,142c0,0-91-15-120-144V0.5z"/>
<path class="stroke-black" stroke-miterlimit="10" d="M0.5,0.5h231v213c0,0,8,93-111,142c0,0-91-15-120-144V0.5z"/>
<path fill="#FFFFFF" d="M12.5,11.5h128v173c0,0,6,58-52,91l-43,21c0,0-9.953-10.538-22-34l46-24c0,0,31-14,28-56v-135h-85V11.5z"/>
<path fill="#FFFFFF" d="M182.5,11.5h43v204c0,0,3,89-105,133c0,0-36.405-13-43.703-22c0,0,108.203-37,105.703-128V11.5z"/>
</svg>




CSS


/* Juventus Inline Code SVG + CSS + JavaScript
** animated Shield / without original fonts.
** @webbeloz > #forzajuve
*/
html, body {
	height: 100%;
  	margin: 0;
	background-color: black;
}
h1 {
	position: relative;
	display: inline-block;
	top: 12%;
	width: calc(100vw - 20px);
	margin-left: 20px;
	font-size: 6vh;
	font-family: "sans-serif", sans-serif;
	text-align: center;
	color: white;
}
svg {
	position: absolute;
	display: block;
	left: 0;
	top: 25%;
	width: 100%;
	height: 60%;
	transform: scale(1);
}
path.stroke {
  stroke: white;
  fill: none;
  stroke-dasharray: 0,0; 
  stroke-width: 1;
}
path.stroke-black {
  stroke: black;
  fill: none;
  stroke-dasharray: 5,15;
  stroke-width: 1;
}



JS


var Juve = function(event) {
	var path = document.querySelector('.stroke');
	var length = path.getTotalLength();
	path.style.transition = path.style.WebkitTransition = 'none';
	path.style.strokeDasharray = length + ' ' + length;
	path.style.strokeDashoffset = '';
	path.getBoundingClientRect();
	path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
	path.style.strokeDashoffset = length;
}
window.onload = setTimeout(function() { Juve(); }, 2500);
window.onclick = Juve;





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