<h1>Jello</h1>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#8481c0, #4a468b);
}
@font-palette-values --color {
font-family: "Honk";
base-palette: 4;
}
h1 {
font-family: "Honk", system-ui;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "MORF" 25, "SHLN" 0;
font-palette: --color;
font-size: calc(14vw + 0.5rem);
letter-spacing: 0.4ch;
animation: morph 5s ease alternate infinite;
}
@keyframes morph {
0% {
font-variation-settings: "MORF" 25, "SHLN" 0;
}
100% {
font-variation-settings: "MORF" 45, "SHLN" 100;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.