Updated err handleing

2024-05-27 17:59:05 +02:00
parent 8e3714028d
commit 9574d3b031
13 changed files with 223 additions and 39 deletions
@@ -0,0 +1,64 @@
+<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>