<div class="site-container">
<svg width="400" height="120" id="wavy-text">
<g>
<text y="50%" class="char">
H
</text>
<text y="50%" x="20%" class="char">
e
</text>
<text y="50%" x="40%" class="char">
l
</text>
<text y="50%" x="60%" class="char">
l
</text>
<text y="50%" x="80%" class="char">
o
</text>
</g>
</svg>
</div>
@import "https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap";
:root {
--wavy-text-body-bg-color: #c44569;
--wavy-text-body-color: #fff;
--wavy-text-font-family: "Fascinate Inline", sans-serif;
--wavy-text-animation-speed: 1s;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font: 1em/160% sans-serif;
margin: 0;
background-color: var(--wavy-text-body-bg-color);
color: var(--wavy-text-body-color);
}
svg {
fill: currentColor;
max-width: 100%;
vertical-align: baseline;
}
.site-container {
padding: 2em;
min-height: 100vh;
display: grid;
place-items: center;
}
#wavy-text {
font-family: var(--wavy-text-font-family);
font-size: 72px;
}
#wavy-text .char {
transform: translateY(0);
transform-origin: center;
animation: wavyText var(--wavy-text-animation-speed) ease-in-out infinite;
}
#wavy-text .char:nth-child(1) {
animation-delay: 100ms;
}
#wavy-text .char:nth-child(2) {
animation-delay: 200ms;
}
#wavy-text .char:nth-child(3) {
animation-delay: 300ms;
}
#wavy-text .char:nth-child(4) {
animation-delay: 400ms;
}
#wavy-text .char:nth-child(5) {
animation-delay: 500ms;
}
@keyframes wavyText {
0%,
100% {
transform: translateY(0);
}
25%,
50% {
transform: translateY(10%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.