title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>A prototype</title> <link href='css/main.css' rel='stylesheet'> <script src='js/main.js' defer></script> </head> <body> <div class="circle"> </div> </body> </html>
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