Try SVG

Author: OEvgeny

ACHIEVEMENTS.md

@@ -43,6 +43,29 @@ A curated list of major achievements by the Web Chat team. This document celebra
 
 ---
 
+<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto">
+  <defs>
+    <radialGradient id="glow-circle" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#C7DFFF" />
+      <stop offset="100%" stop-color="#5A91DD" />
+    </radialGradient>
+    <filter id="fluent-shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.15" />
+    </filter>
+    <clipPath id="squircle">
+      <path d="M50,0 H350 Q400,0 400,50 V350 Q400,400 350,400 H50 Q0,400 0,350 V50 Q0,0 50,0 Z" />
+    </clipPath>
+  </defs>
+
+  <g filter="url(#fluent-shadow)">
+    <rect x="0" y="0" width="400" height="400" rx="80" ry="80" fill="#fff" />
+    <image href="https://raw.githubusercontent.com/microsoft/BotFramework-WebChat/refs/heads/main/__tests__/html2/fluentTheme/carousel.html.snap-2.png" x="0" y="0" width="400" height="400" clip-path="url(#squircle)" preserveAspectRatio="xMidYMid slice" />
+  </g>
+
+  <circle cx="30" cy="30" r="16" fill="url(#glow-circle)" />
+  <circle cx="370" cy="370" r="12" fill="url(#glow-circle)" />
+</svg>
+
 ## 🎨 UI & Theming
 
 ### ✨ Fluent Theme Overhaul