docs: new icon and screenshots of the new animation

res/plasma-face-unlock.svg

@@ -1,15 +1,56 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
   <defs>
-    <linearGradient id="disc" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#5fd0ff"/><stop offset="1" stop-color="#0c62a0"/></linearGradient>
-    <radialGradient id="glow" cx=".35" cy=".25" r=".7"><stop offset="0" stop-color="#ffffff" stop-opacity=".28"/><stop offset="1" stop-color="#ffffff" 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>
+    <!-- the lock screen: the wallpaper from the screenshots -->
+    <linearGradient id="wall" x1="0.15" y1="0" x2="0.85" y2="1">
+      <stop offset="0" stop-color="#1b2a66"/>
+      <stop offset="0.55" stop-color="#4a2a7a"/>
+      <stop offset="1" stop-color="#b8456f"/>
+    </linearGradient>
+    <radialGradient id="blue" cx="0.85" cy="0.1" r="0.6">
+      <stop offset="0" stop-color="#4f86ff" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#4f86ff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="pink" cx="0.08" cy="0.95" r="0.62">
+      <stop offset="0" stop-color="#ff6a95" stop-opacity="0.7"/>
+      <stop offset="1" stop-color="#ff6a95" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="sheen" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffffff" stop-opacity="0.16"/>
+      <stop offset="0.5" stop-color="#ffffff" stop-opacity="0"/>
+    </linearGradient>
+    <!-- the island -->
+    <linearGradient id="island" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#15161a"/>
+      <stop offset="1" stop-color="#000000"/>
+    </linearGradient>
+    <linearGradient id="glyph" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#dbe6f5"/>
+    </linearGradient>
+    <clipPath id="tile"><rect x="24" y="24" width="464" height="464" rx="112"/></clipPath>
+    <filter id="tileShadow" x="-10%" y="-10%" width="120%" height="125%">
+      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#0b0f2a" flood-opacity="0.35"/>
+    </filter>
+    <filter id="islandShadow" x="-25%" y="-25%" width="150%" height="160%">
+      <feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#000000" flood-opacity="0.45"/>
+    </filter>
   </defs>
-  <g filter="url(#soft)">
-    <circle cx="256" cy="246" r="200" fill="url(#disc)"/>
-    <circle cx="256" cy="246" r="200" fill="url(#glow)"/>
+
+  <!-- the tile -->
+  <g filter="url(#tileShadow)">
+    <rect x="24" y="24" width="464" height="464" rx="112" fill="url(#wall)"/>
   </g>
-  <!-- the face from the bubble: four brackets, two eyes, a nose, a smile -->
-  <g transform="translate(136 126) scale(2.4)" fill="none" stroke="#ffffff" stroke-width="5.8" stroke-linecap="round" stroke-linejoin="round">
+  <g clip-path="url(#tile)">
+    <rect x="24" y="24" width="464" height="464" fill="url(#blue)"/>
+    <rect x="24" y="24" width="464" height="464" fill="url(#pink)"/>
+    <rect x="24" y="24" width="464" height="464" fill="url(#sheen)"/>
+  </g>
+  <rect x="25" y="25" width="462" height="462" rx="111" fill="none" stroke="#ffffff" stroke-opacity="0.14" stroke-width="2"/>
+
+  <!-- the bubble, and the face in it -->
+  <rect x="98" y="92" width="316" height="316" rx="92" fill="url(#island)" filter="url(#islandShadow)"/>
+  <rect x="99" y="93" width="314" height="314" rx="91" fill="none" stroke="#ffffff" stroke-opacity="0.07" stroke-width="2"/>
+  <g transform="translate(155 149) scale(2.02)" fill="none" stroke="url(#glyph)" stroke-width="6.4" stroke-linecap="round" stroke-linejoin="round">
     <path d="M6 30 V19 Q6 6 19 6 H30"/>
     <path d="M70 6 H81 Q94 6 94 19 V30"/>
     <path d="M94 70 V81 Q94 94 81 94 H70"/>