feat: add animations to logo SVG for enhanced visual appeal

Lemon73-Computing · Lemon73-Computing · commit 51872477ac68 · 2025-02-10T00:47:32.000+09:00
diff --git a/static/images/logo.svg b/static/images/logo.svg
@@ -13,6 +13,28 @@
          stroke: #fcfcfc;
       }
    }
+
+   #lra1 {
+      animation: hand-writing1 1.5s linear forwards;
+      animation-delay: 1s;
+      stroke-dasharray: 500;
+      stroke-dashoffset: 500;
+   }
+   @keyframes hand-writing1 {
+      0% {stroke-dashoffset: 500;}
+      100% {stroke-dashoffset: 0;}
+   }
+
+   #lra2 {
+      animation: hand-writing2 0.5s linear forwards;
+      animation-delay: 3s;
+      stroke-dasharray: 200;
+      stroke-dashoffset: 300;
+   }
+   @keyframes hand-writing2 {
+      0% {stroke-dashoffset: 200;}
+      100% {stroke-dashoffset: 0;}
+   }
    </style>
    <g fill="none" stroke="#e66789" stroke-width="2.0" stroke-linecap="square"
       stroke-linejoin="bevel">
@@ -52,9 +74,9 @@
          d="M0 0C3.26888 1.89575 0.639645 12.0725 5.4898 14.9079" />
       <path transform="translate(313.037058987956, 114.506578927269)"
          d="M0 0C7.83246 0 40.6174 27.0376 18.8191 27.0376" />
-      <path transform="translate(72.0867466884912, 178.683187574583)"
+      <path transform="translate(72.0867466884912, 178.683187574583)" id="lra1"
          d="M24.3909 6.74492C27.5955 -1.55933 25.9649 -1.46566 23.8999 3.08362C16.5665 19.2394 14.9014 38.4968 8.56117 55.2593C6.21174 61.4708 3.81253 67.6618 1.70162 73.9599C0.66501 77.0528 -0.707901 86.7207 0.426629 83.6624C9.39727 59.4806 67.4507 25.4854 91.9699 39.029C98.761 42.7801 72.2116 62.6985 71.1436 63.5058C68.7164 65.3405 60.4621 69.3064 63.2524 68.0932C64.8545 67.3966 120.105 88.8656 126.324 91.2929C135.363 94.8215 143.701 98.9023 152.101 103.731C154.679 105.212 162.285 105.695 160.089 107.7C149.834 117.063 125.04 114.305 111.915 121.417C111.852 121.451 111.719 120.422 111.719 120.269C111.719 110.648 111.998 99.9043 112.848 90.2333C112.859 90.102 113.19 89.3702 113.19 89.529" />
-      <path transform="translate(129.365886110988, 217.958684872818)"
+      <path transform="translate(129.365886110988, 217.958684872818)" id="lra2"
          d="M9.2081 0.0614445C10.4082 -0.749644 7.78425 6.71367 7.49375 8.04523C4.28343 22.7603 3.33676 37.8972 0.289605 52.6786C0.195677 53.1343 -0.281746 54.9515 0.24007 53.693" />
       <path transform="translate(81.7792918173373, 266.675770993493)"
          d="M7.29823 39.9521C7.09969 40.4904 5.06822 40.5581 4.45534 40.6133C-6.39795 41.5913 7.42273 2.55697 20.7761 7.48931C35.6922 12.9989 17.1217 50.3307 1.85797 41.0096C-5.8027 36.3314 12.1667 5.03934 20.5306 10.8426C32.7347 19.3105 15.2332 45.7087 5.09284 38.7159C-2.68398 33.353 12.1684 10.6631 19.0596 13.664C26.1318 16.7436 9.35469 41.5431 4.16244 37.9212C-2.38264 33.3556 11.9261 11.5726 17.8342 16.3561C22.7965 20.374 13.6037 31.4354 10.9746 33.9971C-8.9606 53.4215 29.063 0.958465 19.0101 24.8676C18.1883 26.8221 16.8177 28.5002 15.2863 29.9395C-3.86168 47.9364 13.7344 9.86775 20.382 16.4423C28.051 24.027 0.676643 42.8211 6.36783 30.5124C8.15891 26.6388 19.9955 10.0308 20.186 22.2659C20.2647 27.3186 17.5458 33.3366 12.7385 35.6727C8.01329 37.9689 11.0521 29.4253 11.905 27.9107C22.7366 8.67682 25.1385 34.1531 13.0314 33.6891C9.98651 33.5725 7.32161 31.786 8.47416 28.4836C9.26102 26.229 16.366 15.2607 19.4516 16.929C24.2801 19.5396 15.288 35.411 10.7291 33.2476C8.34958 32.1185 10.6688 27.4596 11.3666 26.1016C28.1766 -6.61242 5.17233 46.5229 17.0997 21.0297C17.7847 19.5657 21.9238 12.6044 20.6771 18.428C17.0415 35.4099 20.4301 -5.59168 26.7548 0.653447C28.6413 2.51626 27.7651 6.19754 26.9013 8.3271C20.7974 23.3748 14.2815 13.8787 21.853 4.97593C37.1005 -12.9525 12.3265 31.1047 19.5507 7.13825C23.8015 -6.9642 25.9575 18.324 17.3927 13.048C3.59819 4.55063 36.4973 3.88171 20.5306 11.1075C20.3536 11.1876 23.4566 5.94089 23.9615 6.96165C28.4021 15.9405 9.77252 35.6736 4.94639 42.2006C-0.634158 49.7478 4.09605 52.7372 9.01258 42.6421C17.3168 25.5911 3.0156 53.9677 4.65133 49.0364" />
