docs: add icon and centered readme header

README.md

@@ -1,7 +1,20 @@
-# middleclick-autoscroll
+<p align="center">
+  <img width="200" src="res/middleclick-autoscroll.svg" alt="middleclick-autoscroll">
+</p>
 
-middleclick-autoscroll (what a great name, wow) is a CLI for linux that enables autoscroll in every application that supports it.
+<h1 align="center">middleclick-autoscroll</h1>
+
+<h3 align="center">Middle-click autoscroll in every application that supports it.</h3>
+
+<p align="center">
   Works with browsers, electron apps like discord and spotify, steam, and anything else that runs on chromium.
+</p>
+
+<h5 align="center">
+  <a href="#how-to-use">How to use</a> |
+  <a href="#how-to-install">Install</a> |
+  <a href="https://ko-fi.com/felitendo">Ko-Fi</a>
+</h5>
 
 This tool looks at which of your apps run chromium under the hood and applies the necessary steps to get autoscrolling working (often just a feature flag). One install, one command and autoscroll _✨just works✨_ (like on windows).
 

res/middleclick-autoscroll.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8.7 17.8 437.4 437.4" width="512" height="512">
+  <defs>
+    <linearGradient id="shell" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#dfe7f0"/></linearGradient>
+    <linearGradient id="wheel" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5fd0ff"/><stop offset="1" stop-color="#0c62a0"/></linearGradient>
+    <radialGradient id="glow" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#2aa7e8" stop-opacity=".55"/><stop offset="1" stop-color="#2aa7e8" stop-opacity="0"/></radialGradient>
+    <filter id="soft" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#04213a" flood-opacity=".35"/></filter>
+    <linearGradient id="disc" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#5fd0ff"/><stop offset="1" stop-color="#0c62a0"/></linearGradient>
+  </defs>
+  <g filter="url(#soft)">
+    <circle cx="200" cy="200" r="150" fill="url(#disc)"/>
+    <g fill="#ffffff">
+      <path d="M200 70 L236 118 L164 118 Z"/>
+      <path d="M200 330 L236 282 L164 282 Z"/>
+      <path d="M70 200 L118 164 L118 236 Z" opacity=".6"/>
+      <path d="M330 200 L282 164 L282 236 Z" opacity=".6"/>
+      <circle cx="200" cy="200" r="22"/>
+    </g>
+  </g>
+  <g transform="translate(150 150) scale(.62) rotate(-12 256 266)" filter="url(#soft)">
+    <rect x="166" y="96" width="180" height="340" rx="90" fill="url(#shell)" stroke="#c9d5e3" stroke-width="4"/>
+      <path d="M170 228 C 210 240, 302 240, 342 228" fill="none" stroke="#c9d5e3" stroke-width="5" stroke-linecap="round"/>
+      <path d="M256 100 L256 236" stroke="#c9d5e3" stroke-width="5"/>
+      <circle cx="256" cy="168" r="70" fill="url(#glow)"/>
+      <rect x="236" y="128" width="40" height="80" rx="20" fill="url(#wheel)"/>
+      <g stroke="#ffffff" stroke-opacity=".55" stroke-width="5" stroke-linecap="round"><line x1="246" y1="148" x2="266" y2="148"/><line x1="246" y1="168" x2="266" y2="168"/><line x1="246" y1="188" x2="266" y2="188"/></g>
+  </g>
+</svg>