511 logo

dabblet.css

/* 511 logo */
head, body { height:100vh }
body { perspective:21em;
	animation:10s showcase alternate infinite cubic-bezier(.8,0,.1,1);
	background:linear-gradient(to bottom, hsl(205,100%,30%), hsl(205,100%,10%), hsl(205,100%,30%)) }
@keyframes showcase { 
	0% { transform:rotate3d(1,0,0,18deg) }
	38% { transform:rotate3d(0,-1,0,18deg) }
	62% { transform:rotate3d(-1,0,0,18deg) }
	100% { transform:rotate3d(1,1,0,18deg) }}
* { transform-style:preserve-3d }

b { width:8em; height:21em;
	background:repeating-linear-gradient(to bottom, hsla(205,100%,30%,.1), hsl(205,100%,80%), hsla(205,100%,30%,.1) 1%); 
	display:inline-block; position:absolute; top:30%; left:50% }
	
#a, #g { width:5em; height:34em; 
	background:repeating-linear-gradient(to bottom,hsl(13,98%,55%),hsla(13,99%,35%,.1) 2%) }
#a { transform:translate(0,-8em) rotateY(45deg) }
#g { transform:translate(4em,-4em) rotateY(-45deg) }

#b { transform:rotate(54deg) translate(-14.45em) rotateY(90deg) }
#c { transform:rotate(-18deg) translate(-14.45em) rotateY(90deg) }
#d { transform:rotate(54deg) translate(5.5em) rotateY(90deg) scale(1,1.6) }
#e { transform:rotateZ(18deg) translate(14.45em) rotateY(90deg) }
#f { transform:rotateZ(90deg) translate(14.45em,-5.3em) rotateY(90deg) scale(1,.5) }

dabblet.html

<b id=a></b>
<b id=b></b>
<b id=c></b>
<b id=d></b>
<b id=e></b>
<b id=f></b>
<b id=g></b>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}