gradients

src/pages/style.ts

@@ -73,7 +73,8 @@ export const StartLabel = styled.label`
     border-radius: 50%;
     background: #b25244;
     /* background: linear-gradient(#f7f2f6, #b2ac9e); */
-    background: linear-gradient(#b52a2a, #e10ff1);
+    /* background: linear-gradient(#b52a2a, #e10ff1); */
+    background: linear-gradient(rgb(255 251 251), rgb(140 219 35));
     position: relative;
     color: #a5a39d;
     font-size: 70px;
@@ -143,7 +144,7 @@ export const StartI = styled.i`
     height: 70%;
     left: 50%;
     top: 50%;
-    z-index: -1;
+    z-index: 1;
     color: white;
     margin: -35% 0 0 -35%;
     border-radius: 50%;
@@ -216,6 +217,41 @@ const LineHideAnimation = keyframes`
     }
 `;
 
+export const Svg = styled.svg`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -50%);
+    /* stroke-dasharray: 600; */
+`;
+
+export const CircleDiv = styled.div`
+    width: 700px;
+    height: 700px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -50%) rotate(270deg);
+    border-radius: 50%;
+    background: radial-gradient(
+        farthest-side at bottom center,
+        rgba(35, 235, 4, 0.709), 
+        transparent 65%
+    ),
+    radial-gradient(
+        farthest-corner at bottom left,
+        rgba(244, 244, 8, 0.9), 
+        transparent 40%
+    ),
+    radial-gradient(
+        farthest-side at bottom right,
+        rgba(0, 195, 255, 0.648), 
+        transparent 65%
+    );
+`;
+
 export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
     animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
     animation-delay: -${({ delay }) => delay}s;
@@ -223,7 +259,7 @@ export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; rever
     top: 50%;
     left: 50%;
     transform-origin: 50% 50%;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -50%);
 `;
 
 export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`