initial commit

public/images/blog/cover-role-hotspot.svg

@@ -0,0 +1,39 @@
+<svg width="960" height="520" viewBox="0 0 960 520" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0d0d1a"/>
+      <stop offset="1" stop-color="#12121f"/>
+    </linearGradient>
+    <radialGradient id="glowA" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#3b82f6" stop-opacity="0.5"/>
+      <stop offset="1" stop-color="#3b82f6" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glowB" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#8b5cf6" stop-opacity="0.5"/>
+      <stop offset="1" stop-color="#8b5cf6" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="icon" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#8b5cf6"/>
+      <stop offset="1" stop-color="#3b82f6"/>
+    </linearGradient>
+    <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="45"/>
+    </filter>
+  </defs>
+
+  <rect width="960" height="520" fill="url(#bg)"/>
+  <circle cx="810" cy="440" r="220" fill="url(#glowA)" filter="url(#blur)"/>
+  <circle cx="160" cy="100" r="200" fill="url(#glowB)" filter="url(#blur)"/>
+
+  <!-- mesh / hotspot network -->
+  <line x1="480" y1="260" x2="340" y2="170" stroke="url(#icon)" stroke-width="6" opacity="0.8"/>
+  <line x1="480" y1="260" x2="620" y2="170" stroke="url(#icon)" stroke-width="6" opacity="0.8"/>
+  <line x1="480" y1="260" x2="340" y2="350" stroke="url(#icon)" stroke-width="6" opacity="0.8"/>
+  <line x1="480" y1="260" x2="620" y2="350" stroke="url(#icon)" stroke-width="6" opacity="0.8"/>
+
+  <circle cx="480" cy="260" r="34" fill="url(#icon)"/>
+  <circle cx="340" cy="170" r="18" fill="url(#icon)"/>
+  <circle cx="620" cy="170" r="18" fill="url(#icon)"/>
+  <circle cx="340" cy="350" r="18" fill="url(#icon)"/>
+  <circle cx="620" cy="350" r="18" fill="url(#icon)"/>
+</svg>