HTML


<svg class="star"
   xmlns="http://www.w3.org/2000/svg"
   width="282.25507"
   height="270.0687"
   id="svg">
  <defs
     id="defs" />
  <g
     id="layer"
     transform="translate(-198.8725,-145.6783)">
    <path
       style="fill:#faf26f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.49178,293.92046 L 340.16413,151.39295 L 308.38213,250.34309 L 340.49178,293.92046 z"
       id="path3848" />
    <path
       style="fill:#e6d82f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.16413,152.3759 L 371.61848,250.01544 L 340.49178,293.59282 L 340.16413,152.3759 z"
       id="path3850" />
    <path
       style="fill:#a29910;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.49178,293.26517 L 475.15571,250.01544 L 371.29083,250.01544 L 340.49178,293.26517 z"
       id="path3852" />
    <path
       style="fill:#e6d82f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.49178,292.93752 L 391.93274,310.63059 L 474.82804,250.01544 L 340.49178,292.93752 z"
       id="path3854" />
    <path
       style="fill:#a29910;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 289.05081,310.63059 L 340.81943,293.26517 L 205.17255,250.01544 L 289.05081,310.63059 z"
       id="path3856" />
    <path
       style="fill:#faf26f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.16413,292.93752 L 256.94116,409.90836 L 289.37846,310.63059 L 340.16413,292.93752 z"
       id="path3858" />
    <path
       style="fill:#e6d82f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.49178,292.93752 L 340.49178,348.63793 L 257.26881,409.58072 L 340.49178,292.93752 z"
       id="path3860" />
    <path
       style="fill:#e6d82f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.16413,292.93752 L 391.60509,310.30294 L 423.71474,408.59779 L 340.16413,292.93752 z"
       id="path3862" />
    <path
       style="fill:#a29910;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 340.16413,348.63793 L 423.05944,407.94247 L 339.50883,292.28222 L 340.16413,348.63793 z"
       id="path3864" />
    <path
       style="fill:#d2c308;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 308.0539,250.34251 L 340.49115,293.91974 L 204.84464,250.01487 L 308.0539,250.34251 z"
       id="path3882" />
    <path
       style="fill:#8c823f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.24921601px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 140.84375 6.6875 L 141.5 146.78125 L 140 146.46875 L 139.96875 146.59375 L 139.9375 146.71875 L 139.96875 146.71875 L 141.09375 147 L 140.59375 147.6875 L 140.6875 147.375 L 6.6875 104.46875 L 6.5625 104.84375 L 140.5625 147.78125 L 58.625 264.15625 L 58.8125 264.28125 L 142.03125 147 L 142.0625 146.96875 L 142.0625 146.90625 L 141.09375 6.6875 L 140.84375 6.6875 z M 141.625 118.9375 L 141.8125 146.875 L 141.75 146.96875 L 141.75 146.90625 L 141.625 118.9375 z M 141.40625 147 L 141.59375 147.03125 L 141.6875 147.0625 L 98.375 208.125 L 141.40625 147 z "
       transform="translate(198.8725,145.6783)"
       id="path3866" />
  </g>
</svg>


CSS


html, body {
	height: 100%;
	margin: 0;
	background-color: black;
}
svg.star {
	transform: scale(0.01);
	opacity: 0;
	animation: blink 0.08s 2s steps(3) alternate 3;
}
	
.starr {
  margin: 50px 0;
  position: relative;
  display: block;
  color: white;
  width: 0px;
  height: 0px;
  border-right: 95px solid transparent;
  border-bottom: 70px solid white;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
	transform: scale(0.001);
	opacity: 0;
	/*
	-webkit-animation: fade 1s infinite alternate;
  -moz-animation: fade 3s infinite alternate;
  -o-animation: fade 3s infinite alternate;
	*/
  /*animation: fade 1s infinite alternate;*/
	animation: blink 0.25s 2s steps(3) alternate 1;

	/*animation: 0.17s 2s alternate 2 blink
		, fade 0.17s 2s infinite alternate;*/
}

.starr:before {
  border-bottom: 70px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
.starr:after {
  position: absolute;
  display: block;
  color: white;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid white;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}
@keyframes blink {
  75% {
    opacity: 0.85;
		transform: scale(0.065);
		fill: white;
  }
	/*100% {
	}*/
}
@keyframes fade {
  40% {
    opacity: 0.8;
		/*transform: scale(1);*/
  }
  42% {
    opacity: 0.1;
		/*transform: scale(0.1);*/
  }
  43% {
    opacity: 0.8;
		/*transform: scale(1);*/
  }
  45% {
    opacity: 0.1;
		/*transform: scale(0.1);*/
  }
  46% {
    opacity: 0.8;
		/*transform: scale(1);*/
  }
}



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