logo and stuff

antimoloch007 · antimoloch007 · commit 3a3f4ae62b96 · 2025-05-12T23:56:40.000-07:00
diff --git a/assets/favicon.svg b/assets/favicon.svg
@@ -1,19 +1,11 @@
 <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background circle with subtle gradient -->
-  <circle cx="256" cy="256" r="256" fill="url(#bg-gradient)"/>
+  <!-- Background -->
+  <rect width="512" height="512" rx="128" fill="#4a7bca"/>
   
-  <!-- Stylized "A" shape -->
-  <path d="M256 120L144 392H184L208 328H304L328 392H368L256 120ZM226 288L256 208L286 288H226Z" 
-        fill="#FFFFFF" stroke="#FFFFFF" stroke-width="8" stroke-linejoin="round"/>
-        
-  <!-- Ink dot -->
-  <circle cx="368" cy="392" r="32" fill="#333333"/>
+  <!-- Simple "A" -->
+  <path d="M256 128L160 384H208L224 336H288L304 384H352L256 128ZM240 288L256 240L272 288H240Z" 
+        fill="white" stroke="white" stroke-width="8" stroke-linejoin="round"/>
   
-  <!-- Gradient definitions -->
-  <defs>
-    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#4a7bca"/>
-      <stop offset="100%" stop-color="#3a6abd"/>
-    </linearGradient>
-  </defs>
+  <!-- Simple dot -->
+  <circle cx="352" cy="384" r="24" fill="white"/>
 </svg>
diff --git a/assets/img/logo.svg b/assets/img/logo.svg
@@ -17,10 +17,17 @@
       <feComposite in="SourceGraphic" in2="blur" operator="over" />
     </filter>
     
-    <!-- Clip path for the verification checkmark -->
-    <clipPath id="check-clip">
-      <circle cx="368" cy="392" r="32" />
-    </clipPath>
+    <!-- Filter for subtle shadow -->
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.3" />
+    </filter>
+    
+    <!-- Animated border dash pattern -->
+    <pattern id="dashPattern" width="20" height="20" patternUnits="userSpaceOnUse">
+      <rect width="10" height="20" fill="#ffffff" opacity="0.8">
+        <animate attributeName="x" values="0;20" dur="2s" repeatCount="indefinite" />
+      </rect>
+    </pattern>
   </defs>
   
   <!-- Background circle -->
@@ -30,14 +37,6 @@
   
   <!-- Blockchain pattern in background (hexagon mesh) -->
   <g opacity="0.15">
-    <path d="M128 128 L176 100 L224 128 L224 184 L176 212 L128 184 Z" fill="#ffffff" />
-    <path d="M224 128 L272 100 L320 128 L320 184 L272 212 L224 184 Z" fill="#ffffff" />
-    <path d="M320 128 L368 100 L416 128 L416 184 L368 212 L320 184 Z" fill="#ffffff" />
-    <path d="M176 212 L224 184 L272 212 L272 268 L224 296 L176 268 Z" fill="#ffffff" />
-    <path d="M272 212 L320 184 L368 212 L368 268 L320 296 L272 268 Z" fill="#ffffff" />
-    <path d="M128 268 L176 240 L224 268 L224 324 L176 352 L128 324 Z" fill="#ffffff" />
-    <path d="M224 268 L272 240 L320 268 L320 324 L272 352 L224 324 Z" fill="#ffffff" />
-    <path d="M320 268 L368 240 L416 268 L416 324 L368 352 L320 324 Z" fill="#ffffff" />
     
     <!-- Animated data flow through blockchain -->
     <circle cx="176" cy="100" r="4" fill="#ffffff">
@@ -66,77 +65,80 @@
     </circle>
   </g>
   
-  <!-- Stylized "A" shape with digital/blockchain style -->
-  <g filter="url(#glow-effect)">
-    <!-- Main A shape -->
-    <path d="M256 120L144 392H184L208 328H304L328 392H368L256 120Z" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linejoin="round">
-      <animate attributeName="stroke-width" values="4;5;4" dur="3s" repeatCount="indefinite" />
-    </path>
-    
-    <!-- Digital accents on the A -->
-    <path d="M256 120L220 192M256 120L292 192M220 192L200 235M292 192L312 235M200 235L184 270M312 235L328 270M184 270L174 292M328 270L338 292M174 292L164 316M338 292L348 316" 
-          stroke="#FFFFFF" stroke-width="1.5" stroke-dasharray="6,3" opacity="0.7">
-      <animate attributeName="stroke-dashoffset" values="0;18" dur="3s" repeatCount="indefinite" />
-    </path>
-    
-    <!-- Inner bar of A -->
-    <path d="M226 288L286 288" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round">
-      <animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite" />
-    </path>
+  <!-- Animated border with interesting effects -->
+  <g opacity="0.7">
+    <!-- Outer border with flowing animation -->
+    <circle cx="256" cy="256" r="240" fill="none" stroke="url(#dashPattern)" stroke-width="4">
+      <animate attributeName="stroke-dashoffset" values="0;100" dur="20s" repeatCount="indefinite" />
+      <animate attributeName="r" values="240;242;240" dur="8s" repeatCount="indefinite" />
+    </circle>
     
-    <!-- Data points moving through the "A" -->
-    <circle cx="256" cy="120" r="4" fill="#FFFFFF">
-      <animate attributeName="opacity" values="0;1;0" dur="5s" begin="0s" repeatCount="indefinite" />
+    <!-- Corner accents -->
+    <circle cx="70" cy="70" r="12" fill="none" stroke="#ffffff" stroke-width="2">
+      <animate attributeName="r" values="12;14;12" dur="3s" repeatCount="indefinite" />
     </circle>
-    <circle cx="220" cy="192" r="3" fill="#FFFFFF">
-      <animate attributeName="opacity" values="0;1;0" dur="5s" begin="0.5s" repeatCount="indefinite" />
+    <circle cx="442" cy="70" r="12" fill="none" stroke="#ffffff" stroke-width="2">
+      <animate attributeName="r" values="12;14;12" dur="3s" begin="0.75s" repeatCount="indefinite" />
     </circle>
-    <circle cx="292" cy="192" r="3" fill="#FFFFFF">
-      <animate attributeName="opacity" values="0;1;0" dur="5s" begin="1s" repeatCount="indefinite" />
+    <circle cx="70" cy="442" r="12" fill="none" stroke="#ffffff" stroke-width="2">
+      <animate attributeName="r" values="12;14;12" dur="3s" begin="1.5s" repeatCount="indefinite" />
     </circle>
-    <circle cx="256" cy="288" r="4" fill="#FFFFFF">
-      <animate attributeName="opacity" values="0;1;0" dur="5s" begin="1.5s" repeatCount="indefinite" />
+    <circle cx="442" cy="442" r="12" fill="none" stroke="#ffffff" stroke-width="2">
+      <animate attributeName="r" values="12;14;12" dur="3s" begin="2.25s" repeatCount="indefinite" />
     </circle>
-    <circle cx="184" cy="392" r="3" fill="#FFFFFF">
-      <animate attributeName="opacity" values="0;1;0" dur="5s" begin="2s" repeatCount="indefinite" />
+    
+    <!-- Pulsing dots along border -->
+    <circle cx="256" cy="16" r="6" fill="#ffffff">
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" repeatCount="indefinite" />
     </circle>
-    <circle cx="368" cy="392" r="3" fill="#FFFFFF">
-      <animate attributeName="opacity" values="0;1;0" dur="5s" begin="2.5s" repeatCount="indefinite" />
+    <circle cx="496" cy="256" r="6" fill="#ffffff">
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" begin="1s" repeatCount="indefinite" />
+    </circle>
+    <circle cx="256" cy="496" r="6" fill="#ffffff">
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" begin="2s" repeatCount="indefinite" />
+    </circle>
+    <circle cx="16" cy="256" r="6" fill="#ffffff">
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="4s" begin="3s" repeatCount="indefinite" />
     </circle>
   </g>
   
-  <!-- Digital identity verification element -->
-  <g transform="translate(368, 392)">
+  <!-- Large Digital identity verification checkmark element -->
+  <g transform="translate(256, 240)" filter="url(#shadow)">
     <!-- Pulsing verification circle -->
-    <circle cx="0" cy="0" r="32" fill="#00cc66">
-      <animate attributeName="r" values="32;34;32" dur="3s" repeatCount="indefinite" />
+    <circle cx="0" cy="0" r="100" fill="#00cc66">
+      <animate attributeName="r" values="100;104;100" dur="3s" repeatCount="indefinite" />
       <animate attributeName="opacity" values="0.9;1;0.9" dur="3s" repeatCount="indefinite" />
     </circle>
     
     <!-- Animated checkmark -->
-    <path d="M-16,0 L-5,12 L16,-12" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
-      <animate attributeName="stroke-dasharray" values="0,100;50,50;50,0" dur="1.5s" fill="freeze" />
+    <path d="M-45,0 L-15,35 L45,-35" fill="none" stroke="#FFFFFF" stroke-width="16" stroke-linecap="round" stroke-linejoin="round">
+      <animate attributeName="stroke-dasharray" values="0,200;100,100;200,0" dur="1.5s" fill="freeze" />
     </path>
     
     <!-- Scanning/verification effect -->
-    <rect x="-32" y="-32" width="64" height="4" fill="#ffffff" opacity="0.7">
-      <animate attributeName="y" values="-32;32;-32" dur="3s" repeatCount="indefinite" />
+    <rect x="-100" y="-100" width="200" height="8" fill="#ffffff" opacity="0.7">
+      <animate attributeName="y" values="-100;100;-100" dur="3s" repeatCount="indefinite" />
       <animate attributeName="opacity" values="0.7;0.9;0.7" dur="3s" repeatCount="indefinite" />
     </rect>
+    
+    <!-- Pulse rings from verification mark -->
+    <circle cx="0" cy="0" r="120" fill="none" stroke="#ffffff" stroke-width="4" opacity="0.6">
+      <animate attributeName="r" values="100;160" dur="3s" repeatCount="indefinite" />
+      <animate attributeName="opacity" values="0.6;0" dur="3s" repeatCount="indefinite" />
+    </circle>
+    <circle cx="0" cy="0" r="100" fill="none" stroke="#ffffff" stroke-width="3" opacity="0.4">
+      <animate attributeName="r" values="100;180" dur="4s" begin="0.5s" repeatCount="indefinite" />
+      <animate attributeName="opacity" values="0.4;0" dur="4s" begin="0.5s" repeatCount="indefinite" />
+    </circle>
+    <circle cx="0" cy="0" r="100" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.3">
+      <animate attributeName="r" values="100;200" dur="5s" begin="1s" repeatCount="indefinite" />
+      <animate attributeName="opacity" values="0.3;0" dur="5s" begin="1s" repeatCount="indefinite" />
+    </circle>
   </g>
   
-  <!-- Digital connection lines between A and verification mark -->
-  <path d="M328,392 C340,380 350,386 368,392" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-dasharray="4,3">
-    <animate attributeName="stroke-dashoffset" values="0;14" dur="2s" repeatCount="indefinite" />
-  </path>
-  
   <!-- "attest.ink" text with glow effect -->
-  <g filter="url(#glow-effect)" opacity="0.9">
-    <text x="256" y="450" font-family="Arial, sans-serif" font-size="32" fill="#FFFFFF" text-anchor="middle" font-weight="bold">attest.ink</text>
+  <g filter="url(#glow-effect)" opacity="0.95">
+    <text x="256" y="400" font-family="Arial, sans-serif" font-size="90" fill="#FFFFFF" text-anchor="middle" font-weight="bold">attest.ink</text>
   </g>
-  
-  <!-- Loading/intro animation -->
-  <rect x="0" y="0" width="512" height="512" fill="#4a7bca">
-    <animate attributeName="width" values="512;0" dur="1s" fill="freeze" />
-  </rect>
+
 </svg>
diff --git a/css/styles.css b/css/styles.css
@@ -247,8 +247,8 @@ header {
 }
 
 .logo-image {
-    width: 120px;
-    height: 120px;
+    width: 220px;
+    height: 220px;
     margin-bottom: var(--space-md);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -247,8 +247,8 @@ header {`
`247`	`247`	`}`
`248`	`248`
`249`	`249`	`.logo-image {`
`250`		`- width: 120px;`
`251`		`- height: 120px;`
	`250`	`+ width: 220px;`
	`251`	`+ height: 220px;`
`252`	`252`	`margin-bottom: var(--space-md);`
`253`	`253`	`}`
`254`	`254`