Landing page Geass Password

gp-logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <defs>
+    <linearGradient id="blade" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#f0f0f5"/>
+      <stop offset="50%" stop-color="#8b9cf2"/>
+      <stop offset="100%" stop-color="#3a3f6e"/>
+    </linearGradient>
+    <linearGradient id="wingL" x1="1" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#c8d0f0"/>
+      <stop offset="100%" stop-color="#4a50a0"/>
+    </linearGradient>
+    <linearGradient id="wingR" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#c8d0f0"/>
+      <stop offset="100%" stop-color="#4a50a0"/>
+    </linearGradient>
+    <linearGradient id="prongL" x1="0" y1="0" x2="0.5" y2="1">
+      <stop offset="0%" stop-color="#7080c0"/>
+      <stop offset="100%" stop-color="#2a2e58"/>
+    </linearGradient>
+    <linearGradient id="prongR" x1="1" y1="0" x2="0.5" y2="1">
+      <stop offset="0%" stop-color="#7080c0"/>
+      <stop offset="100%" stop-color="#2a2e58"/>
+    </linearGradient>
+    <linearGradient id="gem" x1="0.5" y1="0" x2="0.5" y2="1">
+      <stop offset="0%" stop-color="#a8b8ff"/>
+      <stop offset="50%" stop-color="#5865f2"/>
+      <stop offset="100%" stop-color="#2a2e58"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="flashGlow">
+      <feGaussianBlur stdDeviation="8"/>
+    </filter>
+  </defs>
+
+  <g stroke-width="0.5" stroke-linejoin="miter">
+    <!-- Central spike — drops straight down -->
+    <g>
+      <animateTransform attributeName="transform" type="translate" values="0,-100;0,-100;0,0;0,0;0,-100" keyTimes="0;0.06;0.15;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.25 0.1 0.25 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+      <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.06;0.09;0.875;1" dur="5s" repeatCount="indefinite"/>
+      <polygon points="100,8 104,92 100,192 96,92" fill="url(#blade)" stroke="#6070b0"/>
+    </g>
+
+    <!-- Left upper prong — flies in + slashes -->
+    <g>
+      <animateTransform attributeName="transform" type="translate" values="-90,-60;-90,-60;0,0;0,0;-90,-60" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+      <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.09;0.12;0.875;1" dur="5s" repeatCount="indefinite"/>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" values="40,97,87;40,97,87;0,97,87;0,97,87;40,97,87" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+        <polygon points="98,80 15,34 96,94" fill="url(#wingL)" stroke="#6070b0"/>
+      </g>
+    </g>
+
+    <!-- Right upper prong — flies in + slashes -->
+    <g>
+      <animateTransform attributeName="transform" type="translate" values="90,-60;90,-60;0,0;0,0;90,-60" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+      <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.09;0.12;0.875;1" dur="5s" repeatCount="indefinite"/>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" values="-40,103,87;-40,103,87;0,103,87;0,103,87;-40,103,87" keyTimes="0;0.09;0.19;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+        <polygon points="102,80 185,34 104,94" fill="url(#wingR)" stroke="#6070b0"/>
+      </g>
+    </g>
+
+    <!-- Left lower prong — flies in + slashes up -->
+    <g>
+      <animateTransform attributeName="transform" type="translate" values="-80,70;-80,70;0,0;0,0;-80,70" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+      <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.12;0.15;0.875;1" dur="5s" repeatCount="indefinite"/>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" values="-40,97,109;-40,97,109;0,97,109;0,97,109;-40,97,109" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+        <polygon points="96,102 35,170 98,116" fill="url(#prongL)" stroke="#4a5090"/>
+      </g>
+    </g>
+
+    <!-- Right lower prong — flies in + slashes up -->
+    <g>
+      <animateTransform attributeName="transform" type="translate" values="80,70;80,70;0,0;0,0;80,70" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.15 0 0.15 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+      <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.12;0.15;0.875;1" dur="5s" repeatCount="indefinite"/>
+      <g>
+        <animateTransform attributeName="transform" type="rotate" values="40,103,109;40,103,109;0,103,109;0,103,109;40,103,109" keyTimes="0;0.12;0.22;0.875;1" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.1 0 0.2 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
+        <polygon points="104,102 165,170 102,116" fill="url(#prongR)" stroke="#4a5090"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Center diamond — on top -->
+  <polygon points="100,78 110,98 100,118 90,98" fill="url(#gem)" stroke="#8090d0" stroke-width="0.5" filter="url(#glow)"/>
+
+  <!-- Flash on impact -->
+  <circle cx="100" cy="98" r="0" fill="#8b9cf2" opacity="0" filter="url(#flashGlow)">
+    <animate attributeName="r" values="0;0;35;0;0" keyTimes="0;0.18;0.21;0.24;1" dur="5s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.5;0;0" keyTimes="0;0.18;0.21;0.24;1" dur="5s" repeatCount="indefinite"/>
+  </circle>
+</svg>