title
A prototype
body { display: flex; height: 90vh; width: 100%; justify-content: center; align-items: center; } .circle { display: block; width: 100px; height: 100px; animation-duration: 10s; animation-iteration-count: infinite; animation-name: expand, morph; transform-origin: center center; border:4px solid pink; } @keyframes morph{ 0%{ border-radius: 100% 100% 90% 100% / 100% 100% 100% 90%; } 50%{ border-radius: 80% 100% 90% 80% / 100% 70% 100% 90%; } 100%{ border-radius: 100% 80% 70% 100% / 100% 90% 80% 100%; } } @keyframes expand { 0% { transform: scale(1) rotate(0deg); opacity:1; } 80% { opacity:1; } 100% { transform: scale(2) rotate(180deg); opacity:0; } }
snap
save
new
fork
download
html
css
js
output
config
➚ link to output
➚ stem gallery
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code