Heart

dabblet.css

/* Heart */
@keyframes rotate { to { transform:rotate3d(0,0,1,360deg) } }
nav { border:solid; text-align:center;
  -animation:rotate 3.81s infinite alternate cubic-bezier(.5522847498,0,1,.44771525) }

@keyframes triangle { to { width:0; height:0;
  border-width:0 .5em 1.618033em;
  transform:none; border-radius:0;
  border-color:hsla(0,100%,50%,.6) hsla(225,61%,38%,.06);
transform-origin:50% 47% } }
  
a { animation:triangle .6s infinite alternate cubic-bezier(.5522847498,0,1,.44771525);
width:1em; height:1em; border-radius:1em;
position:absolute; border:solid hsla(330,50%,50%,.6)  }

/* pentagonal symmetry */
a:nth-child(1) { transform:rotate3d(0,0,1,144deg) }
a:nth-child(2) { transform:rotate(-144deg) }
a:nth-child(3) { transform:rotate(72deg) }
a:nth-child(4) { transform:rotate(-72deg) }

body { font:26em/1 monospace; background:black  }
* { transform-style:preserve-3d }

dabblet.html

<nav>
 <a href=a_promise></a>
 <a href=achronal></a>
 <a href=akashic></a>
 <a href=asynchronous></a>
 <a href=aspect_oriented></a>
</nav>

settings.json

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