Add Cloudflare Access logo SVG file

2026-08-14 13:01:23 +08:00 · 2026-03-04 20:26:23 +08:00
parent 7e4d9dee01
commit b101b09a33
1 changed files with 97 additions and 0 deletions
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 1024 1024" role="img" aria-label="Cloudflare Access badge">
+  <defs>
+    <linearGradient id="cfOrange" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FF6A00"/>
+      <stop offset="1" stop-color="#FFB000"/>
+    </linearGradient>
+    <linearGradient id="cfGold" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FFD36A"/>
+      <stop offset="1" stop-color="#FFB000"/>
+    </linearGradient>
+    <radialGradient id="bg" cx="50%" cy="35%" r="80%">
+      <stop offset="0" stop-color="#F5F7FA"/>
+      <stop offset="1" stop-color="#E9EDF2"/>
+    </radialGradient>
+    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#000000" flood-opacity="0.18"/>
+    </filter>
+  </defs>
+
+  <!-- background -->
+  <rect x="0" y="0" width="1024" height="1024" fill="url(#bg)"/>
+
+  <!-- badge group -->
+  <g filter="url(#softShadow)" transform="translate(0,0)">
+    <!-- shield -->
+    <path d="M512 132
+             C612 196 712 224 812 240
+             V510
+             C812 682 692 820 512 900
+             C332 820 212 682 212 510
+             V240
+             C312 224 412 196 512 132 Z"
+          fill="url(#cfOrange)"/>
+
+    <!-- inner highlight -->
+    <path d="M512 174
+             C600 228 688 252 776 266
+             V505
+             C776 650 676 770 512 842
+             C348 770 248 650 248 505
+             V266
+             C336 252 424 228 512 174 Z"
+          fill="rgba(255,255,255,0.12)"/>
+
+    <!-- checkmark -->
+    <path d="M412 520
+             L474 582
+             L622 434"
+          fill="none" stroke="#FFFFFF" stroke-width="56" stroke-linecap="round" stroke-linejoin="round"/>
+
+    <!-- cloud icon (left/top) -->
+    <g transform="translate(290,300)">
+      <path d="M180 190
+               C180 144 216 108 262 108
+               C291 108 317 123 332 146
+               C340 143 349 142 358 142
+               C399 142 432 175 432 216
+               C432 220 432 224 431 228
+               C466 237 492 269 492 307
+               C492 352 456 388 411 388
+               H170
+               C124 388 88 352 88 307
+               C88 266 118 232 157 226
+               C157 214 158 202 162 191
+               C167 190 173 190 180 190 Z"
+            fill="#FFFFFF" opacity="0.92"/>
+    </g>
+
+    <!-- key icon (right/bottom) -->
+    <g transform="translate(610,585)">
+      <!-- key head -->
+      <circle cx="96" cy="96" r="70" fill="url(#cfGold)"/>
+      <circle cx="96" cy="96" r="28" fill="#FFFFFF" opacity="0.9"/>
+      <!-- shaft -->
+      <path d="M150 96 H320
+               C350 96 374 120 374 150
+               V166
+               H330
+               V146
+               H286
+               V186
+               H242
+               V146
+               H150 Z"
+            fill="url(#cfGold)"/>
+    </g>
+  </g>
+
+  <!-- title text -->
+  <g transform="translate(0,0)">
+    <text x="512" y="980" text-anchor="middle"
+          font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,'Noto Sans',sans-serif"
+          font-size="56" font-weight="700" fill="#111827">
+      Cloudflare Access
+    </text>
+  </g>
+</svg>