work in progress

2026-05-16 16:08:25 -04:00
commit da90e0da81
9 changed files with 983 additions and 0 deletions
--- a/pixlit.svg
+++ b/pixlit.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1a1a2e"/>
+      <stop offset="100%" stop-color="#16213e"/>
+    </linearGradient>
+    <linearGradient id="arrow-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#4fc3f7"/>
+      <stop offset="100%" stop-color="#7c4dff"/>
+    </linearGradient>
+    <linearGradient id="img-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#263238"/>
+      <stop offset="100%" stop-color="#1c2832"/>
+    </linearGradient>
+    <linearGradient id="sun-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffca28"/>
+      <stop offset="100%" stop-color="#ff8f00"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Dark rounded background -->
+  <rect width="512" height="512" rx="96" ry="96" fill="url(#bg)"/>
+
+  <!-- Subtle grid lines for depth -->
+  <line x1="0" y1="256" x2="512" y2="256" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
+  <line x1="256" y1="0" x2="256" y2="512" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
+
+  <!-- Left image frame (source) -->
+  <rect x="72" y="148" width="148" height="148" rx="16" fill="url(#img-grad)" stroke="#37474f" stroke-width="2"/>
+  <!-- Mountain landscape inside left frame -->
+  <clipPath id="clip-left">
+    <rect x="72" y="148" width="148" height="148" rx="16"/>
+  </clipPath>
+  <g clip-path="url(#clip-left)">
+    <!-- Sky area -->
+    <rect x="72" y="148" width="148" height="90" fill="#1a2744"/>
+    <!-- Mountains -->
+    <polygon points="72,238 112,178 152,238" fill="#2a3f6e"/>
+    <polygon points="110,238 155,168 200,238" fill="#1e3259"/>
+    <polygon points="160,238 190,195 220,238" fill="#2a3f6e"/>
+    <!-- Ground -->
+    <rect x="72" y="238" width="148" height="58" fill="#1b2e1f"/>
+    <!-- HEIC label pill -->
+    <rect x="82" y="268" width="52" height="22" rx="6" fill="#0d1117" fill-opacity="0.85"/>
+    <text x="108" y="283" font-family="monospace" font-size="11" fill="#4fc3f7" text-anchor="middle" font-weight="bold">HEIC</text>
+    <!-- Small sun -->
+    <circle cx="196" cy="168" r="10" fill="url(#sun-grad)" filter="url(#glow)"/>
+  </g>
+  <!-- Frame border glow -->
+  <rect x="72" y="148" width="148" height="148" rx="16" fill="none" stroke="#37474f" stroke-width="2"/>
+
+  <!-- Conversion arrow cluster (center) -->
+  <g filter="url(#glow)" transform="translate(256,222)">
+    <!-- Arrow body -->
+    <rect x="-22" y="-6" width="44" height="12" rx="6" fill="url(#arrow-grad)"/>
+    <!-- Arrowhead -->
+    <polygon points="22,-14 42,0 22,14" fill="url(#arrow-grad)"/>
+    <!-- Small sparkle dots above/below -->
+    <circle cx="0" cy="-22" r="3" fill="#4fc3f7" opacity="0.7"/>
+    <circle cx="10" cy="25" r="2.5" fill="#7c4dff" opacity="0.7"/>
+    <circle cx="-10" cy="26" r="2" fill="#4fc3f7" opacity="0.5"/>
+  </g>
+
+  <!-- Right image frame (output) -->
+  <rect x="292" y="148" width="148" height="148" rx="16" fill="url(#img-grad)" stroke="#37474f" stroke-width="2"/>
+  <clipPath id="clip-right">
+    <rect x="292" y="148" width="148" height="148" rx="16"/>
+  </clipPath>
+  <g clip-path="url(#clip-right)">
+    <!-- Slightly brighter — processed feel -->
+    <rect x="292" y="148" width="148" height="90" fill="#1e2f55"/>
+    <!-- Same landscape, brighter/richer -->
+    <polygon points="292,238 332,178 372,238" fill="#2e4a82"/>
+    <polygon points="330,238 375,168 420,238" fill="#24407a"/>
+    <polygon points="380,238 410,195 440,238" fill="#2e4a82"/>
+    <rect x="292" y="238" width="148" height="58" fill="#1f3624"/>
+    <!-- Sun, brighter -->
+    <circle cx="416" cy="168" r="10" fill="url(#sun-grad)" filter="url(#glow)" opacity="1"/>
+    <!-- Output format label - JPG default -->
+    <rect x="302" y="268" width="48" height="22" rx="6" fill="#0d1117" fill-opacity="0.85"/>
+    <text x="326" y="283" font-family="monospace" font-size="11" fill="#a5d6a7" text-anchor="middle" font-weight="bold">JPG</text>
+  </g>
+  <rect x="292" y="148" width="148" height="148" rx="16" fill="none" stroke="#546e7a" stroke-width="2"/>
+
+  <!-- Bottom label -->
+  <text x="256" y="358" font-family="'Arial Rounded MT Bold', 'Nunito', sans-serif"
+        font-size="38" font-weight="bold" fill="white" text-anchor="middle"
+        letter-spacing="4">PIXLIT</text>
+  <text x="256" y="384" font-family="monospace" font-size="15" fill="#546e7a"
+        text-anchor="middle" letter-spacing="2">IMAGE CONVERTER</text>
+
+  <!-- Corner accent dots -->
+  <circle cx="56" cy="56" r="4" fill="#4fc3f7" opacity="0.3"/>
+  <circle cx="456" cy="56" r="4" fill="#7c4dff" opacity="0.3"/>
+  <circle cx="56" cy="456" r="4" fill="#7c4dff" opacity="0.3"/>
+  <circle cx="456" cy="456" r="4" fill="#4fc3f7" opacity="0.3"/>
+</svg>