64 lines
1.4 KiB
HTML
64 lines
1.4 KiB
HTML
<style>
|
|
svg {
|
|
font-family: 'Russo One', sans-serif;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
svg text {
|
|
text-transform: uppercase;
|
|
animation: stroke 7s forwards;
|
|
/* Play once and use 'forwards' to retain the final state */
|
|
stroke-width: 2;
|
|
|
|
stroke: #000;
|
|
font-size: 20vw;
|
|
opacity: 1;
|
|
/* Ensure the text is fully visible at the start */
|
|
}
|
|
|
|
@keyframes stroke {
|
|
|
|
0%,
|
|
14.3% {
|
|
fill: #fff;
|
|
stroke: #000;
|
|
stroke-dashoffset: 25%;
|
|
stroke-dasharray: 0 50%;
|
|
stroke-width: 8;
|
|
}
|
|
|
|
64.3%,
|
|
71.5% {
|
|
fill: #fff;
|
|
stroke: #000;
|
|
}
|
|
|
|
85.7%,
|
|
100% {
|
|
fill: #fff;
|
|
stroke: #000;
|
|
stroke-dashoffset: -25%;
|
|
stroke-dasharray: 50% 0;
|
|
stroke-width: 1;
|
|
/* Ensure stroke-width is 0 at the end */
|
|
opacity: 1;
|
|
/* Full opacity until 85.7% of the animation */
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
/* Fade out completely at the very end */
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<svg viewBox="0 0 300 300">
|
|
<text x="50%" y="50%" dy=".35em" text-anchor="middle">
|
|
JADE
|
|
</text>
|
|
</svg> |