This commit is contained in:
2024-05-31 20:41:22 +02:00
parent 79e4639666
commit f8bb7ffc84
9 changed files with 99 additions and 117 deletions
-64
View File
@@ -1,64 +0,0 @@
<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>