better design and working setting cells

2026-02-13 11:31:32 +01:00
parent 8e99bbca0e
commit a8879da715
17 changed files with 198 additions and 11 deletions
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+  </defs>
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+</svg>
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0055cc"/>
+      <stop offset="50%" stop-color="#003d99"/>
+      <stop offset="100%" stop-color="#002d73"/>
+    </linearGradient>
+  </defs>
+  <!-- Blaues Feld mit Gradient und Loch -->
+  <rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
+  <!-- Dunklerer Rand um das Loch -->
+  <circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
+  <!-- Äußerer Rand des Feldes -->
+  <rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
+</svg>
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <radialGradient id="chip-gradient" cx="40%" cy="38%" r="50%">
+      <stop offset="0%" stop-color="#ff4444"/>
+      <stop offset="70%" stop-color="#dd0000"/>
+      <stop offset="100%" stop-color="#aa0000"/>
+    </radialGradient>
+    <radialGradient id="shine" cx="35%" cy="30%" r="40%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <!-- Blaues Feld mit Loch -->
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+  <!-- Spielstein -->
+  <circle cx="375" cy="375" r="290" fill="url(#chip-gradient)"/>
+  <circle cx="375" cy="375" r="290" fill="url(#shine)"/>
+  <!-- Dunklere Outline -->
+  <circle cx="375" cy="375" r="288" fill="none" stroke="#8b0000" stroke-width="6"/>
+  <!-- Innerer Ring für Realismus -->
+  <circle cx="375" cy="375" r="250" fill="none" stroke="#aa0000" stroke-width="3" opacity="0.5"/>
+</svg>
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <radialGradient id="chip-gradient" cx="40%" cy="38%" r="50%">
+      <stop offset="0%" stop-color="#ffee55"/>
+      <stop offset="70%" stop-color="#ffcc00"/>
+      <stop offset="100%" stop-color="#ccaa00"/>
+    </radialGradient>
+    <radialGradient id="shine" cx="35%" cy="30%" r="40%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.45"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <!-- Blaues Feld mit Loch -->
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+  <!-- Spielstein -->
+  <circle cx="375" cy="375" r="290" fill="url(#chip-gradient)"/>
+  <circle cx="375" cy="375" r="290" fill="url(#shine)"/>
+  <!-- Dunklere Outline -->
+  <circle cx="375" cy="375" r="288" fill="none" stroke="#997700" stroke-width="6"/>
+  <!-- Innerer Ring für Realismus -->
+  <circle cx="375" cy="375" r="250" fill="none" stroke="#bbaa00" stroke-width="3" opacity="0.5"/>
+</svg>
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+  </defs>
+  <circle cx="375" cy="375" r="300" fill="#dd0000"/>
+  <circle cx="375" cy="375" r="286" fill="none" stroke="#8b0000" stroke-width="12"/>
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+</svg>
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+  </defs>
+  <circle cx="375" cy="375" r="300" fill="#ffcc00"/>
+  <circle cx="375" cy="375" r="286" fill="none" stroke="#997700" stroke-width="12"/>
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+</svg>