HTML


<div id="box" class="box-shadow">
  <webbeloz>
	<svg version="1.1" viewBox="0 0 515 515" preserveAspectRatio="xMinYMin meet" class="logo">
	  <filter id="dropin-shadow">
		<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
		<feOffset in="blur" dx="0" dy="4" result="offsetBlur"/>
		<feMerge>
		  <feMergeNode in="offsetBlur"/>
		  <feMergeNode in="SourceGraphic"/>
		</feMerge>
	  </filter>
	  <filter id="dropout-shadow">
		<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
		<feOffset in="blur" dx="0" dy="1" result="offsetBlur"/>
		<feMerge>
		  <feMergeNode in="offsetBlur"/>
		  <feMergeNode in="SourceGraphic"/>
		</feMerge>
	  </filter>
	  <path fill="none" stroke="#1A171B" stroke-width="45" stroke-miterlimit="10" d="M461.966,306.264
	c-22.637,91.549-105.326,159.423-203.869,159.423c-115.98,0-210-94.02-210-210s94.02-210,210-210
	c90.107,0,166.959,56.751,196.764,136.462"/>
	  <line fill="none" stroke="#1A171B" stroke-width="25" stroke-miterlimit="10" x1="75.99" y1="180.479" x2="476.179" y2="180.479"/>
	  <circle fill="none" stroke="#E85D10" stroke-width="35" stroke-miterlimit="10" cx="257.5" cy="257.5" r="240" />
	  <g><g>
		<path fill="#786854" d="M243.661,372.819l-0.994-2.485c-9.25-23.112-12.74-27.845-13.812-28.808c-3.04-2.699-10.703-5.943-29.853-5.991l-105.906-0.264c-18.825-0.047-33.256-4.533-42.892-13.334c-9.765-8.919-14.695-22.262-14.653-39.657l0.05-20.441l37.437,0.093l-0.049,19.964c-0.02,7.83,3.648,10.306,6.5,11.458c4.274,1.148,12.787,1.747,25.313,1.778l95.243,0.237c26.958,0.067,46.206,7.074,57.331,20.845c2.444-3.495,4.941-6.201,7.561-8.202c10.323-8.295,26.704-12.357,50.008-12.357l96.066,0.237c15.441,0,22.131-0.896,25.028-1.664c3.053-1.125,6.494-3.476,6.514-11.413l0.049-19.964l37.436,0.093l-0.05,20.441c-0.041,17.346-5.009,30.639-14.765,39.509c-9.629,8.755-24.006,13.194-42.734,13.195l-106.634-0.264c-18.854,0-26.434,3.186-29.474,5.857c-1.198,1.012-4.898,5.729-14.67,28.78l-1.026,2.421L243.661,372.819z"/>
		<path fill="#786854" d="M268.105,368.88l-21.8-0.054c-7.063-17.65-12.011-27.749-14.851-30.299c-5.203-4.619-16.015-6.95-32.442-6.991l-105.906-0.264c-35.827-0.089-53.705-16.415-53.625-48.981l0.041-16.441l29.578,0.074l-0.04,15.964c-0.019,7.785,3.048,12.875,9.203,15.273c4.578,1.285,13.42,1.939,26.531,1.972l95.244,0.237c28.75,0.072,47.92,8.065,57.516,23.972c3.176-5.551,6.424-9.594,9.742-12.128c9.655-7.757,25.7-11.612,48.129-11.556l94.532,0.235c13.585,0.034,22.666-0.577,27.251-1.839c6.164-2.207,9.256-7.281,9.276-15.227l0.039-15.964l29.577,0.073l-0.039,16.441c-0.081,32.566-18.036,48.803-53.864,48.713l-105.906-0.263c-16.424-0.041-27.252,2.237-32.477,6.83C280.807,341.192,275.571,351.266,268.105,368.88z"/>
		</g>
		<g>
		  <path fill="#145361" d="M442.621,272.604l0.048-19.965c0.02-7.83-3.646-10.306-6.5-11.457c-4.273-1.149-12.787-1.747-25.313-1.778l-95.241-0.237c-26.959-0.067-46.206-7.073-57.332-20.844c-2.444,3.494-4.941,6.2-7.562,8.201c-10.321,8.295-26.702,12.356-50.003,12.356l-96.072-0.237c-15.44,0-22.131,0.896-25.027,1.663c-3.053,1.125-6.494,3.477-6.514,11.414l-0.048,19.964l-37.438-0.093l0.05-20.442c0.042-17.346,5.01-30.638,14.766-39.509c9.629-8.755,24.008-13.195,42.736-13.195l106.627,0.265c18.856,0,26.439-3.186,29.479-5.858c1.199-1.011,4.898-5.729,14.671-28.779l1.026-2.421l27.025,0.067l0.993,2.484c9.251,23.112,12.74,27.845,13.813,28.808c3.039,2.699,10.703,5.943,29.852,5.991l105.906,0.264c18.823,0.047,33.257,4.533,42.892,13.334c9.765,8.919,14.696,22.262,14.653,39.656l-0.051,20.441L442.621,272.604z"/>
		  <path fill="#145361" d="M247.555,165.658l21.798,0.054c7.063,17.65,12.013,27.748,14.852,30.298c5.204,4.618,16.017,6.95,32.443,6.991l105.906,0.264c35.826,0.089,53.705,16.415,53.624,48.98l-0.041,16.441l-29.579-0.073l0.039-15.965c0.02-7.785-3.047-12.875-9.2-15.273c-4.578-1.285-13.42-1.94-26.532-1.973l-95.241-0.237c-28.752-0.071-47.922-8.064-57.519-23.971c-3.174,5.551-6.422,9.593-9.742,12.128c-9.655,7.757-25.699,11.612-48.127,11.556l-94.533-0.235c-13.584-0.034-22.666,0.576-27.25,1.838c-6.165,2.208-9.258,7.282-9.278,15.227l-0.038,15.965l-29.579-0.074 l0.041-16.441c0.079-32.566,18.037-48.802,53.865-48.713l105.906,0.264c16.423,0.041,27.251-2.237,32.476-6.83 C234.854,193.344,240.087,183.272,247.555,165.658z"/>
		</g>
	  </g>
	</svg>
  </webbeloz>
</div>


CSS


/* SVG ( inline ) Responsive Hug mode...
*
* @webbeloz
* *overflow/hidden /head background
*/
* {
  overflow: hidden;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  background: #f7f7f7;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
webbeloz {
  max-width: 300px;
  display: block;
  margin: 0 auto 0;
  padding: 20px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 -12px 25px #000;
  box-shadow: inset 0 -12px 25px #000;
}
svg {
  position: relative;
  z-index: -1;
}
.logo {
  height: 300px;
}
g {
  filter: url(#dropin-shadow)
}
circle {
  filter: url(#dropout-shadow)
}
.box-shadow:after {
  position: relative;
  content: "";
  max-width: 225px;
  height: 14px;
  margin: 0 auto;
  display: block;
  z-index: -1;
  opacity: .68;
  border-radius: 50%;
  background: #3d3d3d;
  background: -moz-radial-gradient(center, ellipse cover,  #3d3d3d 0%, #9e9e9e 25%, transparent 60%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3d3d3d), color-stop(25%,#9e9e9e), color-stop(60%,transparent));
  background: -webkit-radial-gradient(center, ellipse cover,  #3d3d3d 0%,#c9c9c9 25%,transparent 60%);
}


JS




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