“New” star v. 2

dabblet.css

/**
 * “New” star v. 2
 */

@import url(http://fonts.googleapis.com/css?family=Fredoka+One);

body {
	background: rgb(234, 234, 234);
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEXn5+fo6Ojp6enk5OTy8vLx8fHr6+vl5eXv7+/j4+Pu7u7w8PDm5ubs7Ozq6urt7e3i4uLz8/PoUfk0AAAEvElEQVR4XpWWW6pgNwwE9X7L9tn/ZgP5yBBIhrk7kERVtyAYq1mDQppBgWBYHpjooYCv9jvjdUCVmL+pPUCEg+bfs7zC6Xkqbl28PQuKtMOS/W325e6NBGAGp/W4iF9RF6uBCR4x7IGkc/SWyOd6o4EvAviDatBbTd18ga97CiI8lQt+roBQE39bsObYBGBnIOdYh6DDfn4TaoDZAigVWsbz4CbX0UFKmINoFliorsKb/s37ZPkGwrEEjvMQ4X7T72YmQDyU3Wfgl9joYI2J2ErhQZKQpL6HobarN6YSPpHnSVpRx0FuUlbd+K677frf04A+dxH75oUS1NWE07f56zi2387Vjx/jHJpvsAfPh/f2mE5BJXh+RpcEZQJolskTCtrH0eUl4fGe8ezDKA2M0Op0Y72ONFwojnvrdsYK6Rx+kJNxYVVylOc1oOcNo+EXijdJT/uVR50mR3YYuJBiygq4F67D+d5WMVbN8fedW2J2BZkq6RtUGN+IsD5jBhcX8jy3HN3cKwLSmljVWXSU5I7XVWkDjMJxDlmA5c+a4aadnLW0g3WOnwjiszEe9gh0p1BURhEMsHN40t5s6D3Pj/EAN908G9WpmsYn3IeaxeBDNoaX5HlI32fHL0wDoHHMWyX5dPlAdG7kXIBfvKVODBOPcManbcoFDybKVHt6nqshLYjjHIaawg8CbPhQaNmFDM4EQ8+qfXQ89s5DBeRmvcPkCFXuSggTg5V9YylPzWb4XMhKBPwu2DyBk/bwI8lT9xW9yzHHPoGJRNtBNsm8UqOb8APqzyouF4Bq0L11V5La4u57H9zWCuUAMDhsdrv6TdT6FuAHw8dU/DIV3YdYojr/TwW0Ijn9hAFQT0JKO2L3Ll+DrCFJaKLSGbxaezfj7MdaSAr0TnyCIIKbq7BG/npTgMqE28sB90s9QtdnKOGJvZFspE3LgdOCkIi2QiSuk30Plp08kTtHAn7d+wmtp3qesNQW5SN+DXs/OOfXzvCdVF0TqiIA2GCc6E7Is0lzDe5FsqKg+S4gPYCFU1TzpaSBepyAb8ARxT2kt98t4Ve6qE6iCOFSmCp1jleQs5QQwJEutcFzOcUrb+csyGsvkJUnAPVej4X4F8QGERc8Pr6qlKN13kKi1NUECAzpRlZ4afQSg2x9rsb1dg1ofyqRjZxnojbh6OXbMEwZcZB8zR9mE+AtBtI1E8OqtC+h8CNQ613V8JEvJ7ZpnWBQghBkdt2U05+W6umFlJ/FcaXDgf8MRPbARvjGjJgPCb76B0boJYK+xAIzpHg6/cb045g+wJmXhR9fBkMnnweoF88Qy3lU39PDD+rT1QfhMdGMJ5n0fKyLhKDwfmwyAPsuqhmKfin3cgH+vtmxn6MgP3t1jl+QChr2bxEWjir0jBcYhURPksO/hNMSL9R024AwODowZjtPT9QgDckBO5qIvG1lcRFoLQJQk0eMSbCl+6ASInvhOkItHfy2972w6/LsuQUlOD43KRR1zUNThwy/4AZ3zlZhR3FfvnpbArBTovNCkatyG0dr+r3kH1xkc8tuPdVPWYFf9YrFWWZjarbLKpF+9PCmQno47QnqJ0io9hVT/05vqLf2isDlQMSfPEF/AXZNTAEejRwFAAAAAElFTkSuQmCC);
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px;
}


@-webkit-keyframes rotate {
	0%   { -webkit-transform: rotate(0deg); }
	15% { -webkit-transform: rotate(180deg); }
	30% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes rotate {
	0%   { -moz-transform: rotate(0deg); }
	15% { -moz-transform: rotate(180deg); }
	30% { -moz-transform: rotate(0deg); }
}

@-o-keyframes rotate {
	0%   { -o-transform: rotate(0deg); }
	15% { -o-transform: rotate(180deg); }
	30% { -o-transform: rotate(0deg); }
}

@-ms-keyframes rotate {
	0%   { -ms-transform: rotate(0deg); }
	15% { -ms-transform: rotate(180deg); }
	30% { -ms-transform: rotate(0deg); }
}

@keyframes rotate {
	0%   { transform: rotate(0deg); }
	15% { transform: rotate(180deg); }
	30% { transform: rotate(0deg); }
}

.star {
	-webkit-animation: rotate 6s 1s infinite;
	-moz-animation: rotate 6s 1s infinite;
	-o-animation: rotate 6s 1s infinite;
	-ms-animation: rotate 6s 1s infinite;
	animation: rotate 6s 1s infinite;
}

.container {
	position: relative;
	margin: 100px 50%;
}

.star-text {
	font-size: 230%;
	color: rgb(255, 220, 208);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	font-family: 'Fredoka One';
	text-align: center;
	line-height: 250%;	
	width: 100%;
}
.star, .star-text, .star:after, .star:before, .star-text:before {
	position: absolute;
}

.star, .star:after, .star:before, .star-text:before {
	display: block;
	width: 100px;
	height: 100px;
}

.star, .star:after, .star:before, .star-text:before  {
	background-color: rgb(255, 66, 149);
}

.star:after, .star:before, .star-text:before {
	content: "";
	z-index: -1;
}

.star:after {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.star:before {
	-moz-transform: rotate(70deg);
	-webkit-transform: rotate(70deg);
	-o-transform: rotate(70deg);
	-ms-transform: rotate(70deg);
	transform: rotate(70deg);
}

.star-text:before {
	-moz-transform: rotate(290deg);
	-webkit-transform: rotate(290deg);
	-o-transform: rotate(290deg);
	-ms-transform: rotate(290deg);
	transform: rotate(290deg);
}

dabblet.html

<div class="container">
	<div class="star"><span class="star-text">New</span></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"","page":"all"}