HTML


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve"><path fill="#1b2f33" d="M227.417,145.49c1.757-3.104,2.653-6.879,2.664-11.298l0.013-4.396h0.02l0.024-8.404 c0.021-7.152-2.274-12.638-6.819-16.305c-4.482-3.618-11.197-5.463-19.957-5.483l-49.278-0.108 c-8.909-0.02-12.475-1.354-13.891-2.463c-0.224-0.178-0.678-0.675-1.495-2.02h87.896v-8.726l0.014-0.332 c-0.065-0.467-0.046-0.545-0.133-0.918l-0.159-0.621l-0.38-0.941c-7.82-19.355-20.938-35.93-38.104-48.052 c-18.366-12.969-39.996-19.825-62.553-19.825c-28.996,0-56.257,11.292-76.761,31.795s-31.795,47.765-31.795,76.761 c0,28.997,11.292,56.257,31.795,76.761s47.765,31.795,76.761,31.795c24.75,0,48.061-8.114,67.412-23.464 c18.769-14.886,32.86-34.506,39.752-63.672L227.417,145.49z M125.278,36.809c32.533,0,62.343,18.37,77.297,46.666H48.004 C62.659,55.749,91.796,36.809,125.278,36.809z M42.938,95.013h72.045c-0.84,1.29-1.313,1.771-1.559,1.954 c-1.415,1.099-4.943,2.409-13.716,2.409l-49.615-0.109c-3.19,0-6.102,0.25-8.74,0.737C41.839,98.322,42.356,96.653,42.938,95.013z M125.278,211.5c-37.26,0-69.141-23.454-81.667-56.372c2.01,0.254,4.155,0.392,6.448,0.396l49.278,0.109 c8.911,0.019,12.477,1.354,13.891,2.463c0.499,0.396,2.123,2.342,6.426,11.845l0.463,1.021l12.575,0.028l0.479-0.996 c4.547-9.477,6.268-11.417,6.826-11.833c1.413-1.098,4.941-2.408,13.714-2.408l49.616,0.108c1.18,0,2.315-0.04,3.421-0.107 C193.898,189.062,161.813,211.5,125.278,211.5z M212.704,125.75h-0.019l-0.022,8.208c-0.009,3.264-1.61,4.23-3.031,4.692 c-1.347,0.316-4.461,0.685-11.646,0.685l-44.701-0.098c-10.841,0-18.462,1.67-23.267,5.081c-1.219,0.823-2.381,1.935-3.519,3.372 c-5.176-5.662-14.132-8.543-26.676-8.571l-44.317-0.097c-5.829-0.013-9.789-0.258-11.778-0.731 c-1.328-0.473-3.034-1.492-3.025-4.711l0.012-4.2h0.02l0.022-8.208c0.008-3.263,1.61-4.23,3.031-4.693 c1.347-0.315,4.46-0.684,11.646-0.684l44.702,0.097c10.843,0,18.465-1.669,23.268-5.08c1.218-0.822,2.381-1.935,3.518-3.372 c5.177,5.662,14.132,8.542,26.677,8.57l44.315,0.098c5.83,0.012,9.79,0.258,11.779,0.731c1.327,0.473,3.033,1.491,3.023,4.71 L212.704,125.75z M125,0C56.075,0,0,56.075,0,125s56.075,125,125,125c68.925,0,125-56.075,125-125S193.926,0,125,0z M125,240.385 C61.377,240.385,9.615,188.624,9.615,125S61.377,9.615,125,9.615c63.623,0,115.384,51.761,115.384,115.385 S188.623,240.385,125,240.385z"/></svg>
<div class="pulse"></div>


CSS


html, body {
  overflow: hidden;
}
svg {
	height: 100%;
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left:0;
	border-radius: 100%;
}
.pulse {
	width: 100%;
	height: 100%;

	max-width: 300px;
	max-height: 300px;
	position: absolute;
	top: 0;
	left: calc(100% /2 - 150px);

  border: 1px solid black;
  border-radius: 100%;
 
	z-index: -1;

	-webkit-animation: pulse 2s ease-out;
  -moz-animation: pulse 2s ease-out;
  animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
 0% {
   -webkit-transform: scale(0);
   opacity: 0.0;
   border: 1px solid black;
 }
 25% {
   -webkit-transform: scale(0);
   opacity: 0.1;
   border: 1px solid #444;
 }
 50% {
   -webkit-transform: scale(0.5);
   opacity: 0.3;
   border: 1px solid #777;
 }
 75% {
   -webkit-transform: scale(1.01);
   opacity: 0.5;
   border: 1px solid #d1d1d1;
 }
 100% {
   -webkit-transform: scale(1.15);
   opacity: 0.0;
   border: 1px solid black;
 }
}
@-moz-keyframes pulse {
 0% {
   -moz-transform: scale(0);
   opacity: 0.0;
   border: 1px solid black;
 }
 25% {
   -moz-transform: scale(0);
   opacity: 0.1;
   border: 1px solid #444;
 }
 50% {
   -moz-transform: scale(0.5);
   opacity: 0.3;
   border: 1px solid #777;
 }
 75% {
   -moz-transform: scale(1.01);
   opacity: 0.5;
   border: 1px solid #d1d1d1;
 }
 100% {
   -moz-transform: scale(1.15);
   opacity: 0.0;
   border: 1px solid black;
 }
}
@keyframes pulse {
 0% {
   transform: scale(0);
   opacity: 0.0;
   border: 1px solid black;
 }
 25% {
   transform: scale(0);
   opacity: 0.1;
   border: 1px solid #444;
 }
 50% {
   transform: scale(0.5);
   opacity: 0.3;
   border: 1px solid #777;
 }
 75% {
   transform: scale(1.01);
   opacity: 0.5;
   border: 1px solid #d1d1d1;
 }
 100% {
   transform: scale(1.15);
   opacity: 0.0;
   border: 1px solid black;
 }
}


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