| 1 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> |
| 2 |
<defs> |
| 3 |
<linearGradient id="calloutGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 4 |
<stop offset="0%" style="stop-color:#9B62FF"/> |
| 5 |
<stop offset="100%" style="stop-color:#5B03FF"/> |
| 6 |
</linearGradient> |
| 7 |
</defs> |
| 8 |
|
| 9 |
<!-- Main callout box --> |
| 10 |
<rect x="15" y="20" width="70" height="50" rx="6" fill="none" stroke="url(#calloutGrad)" stroke-width="2.5"/> |
| 11 |
|
| 12 |
<!-- Callout pointer/arrow --> |
| 13 |
<path d="M35 70 L50 85 L65 70" fill="none" stroke="url(#calloutGrad)" stroke-width="2.5" stroke-linejoin="round"/> |
| 14 |
|
| 15 |
<!-- Icon circle on left --> |
| 16 |
<circle cx="32" cy="45" r="10" fill="url(#calloutGrad)" opacity="0.2"/> |
| 17 |
<circle cx="32" cy="45" r="10" fill="none" stroke="url(#calloutGrad)" stroke-width="1.5"/> |
| 18 |
|
| 19 |
<!-- Exclamation mark inside circle --> |
| 20 |
<rect x="30" y="39" width="4" height="8" rx="1" fill="url(#calloutGrad)"/> |
| 21 |
<circle cx="32" cy="51" r="2" fill="url(#calloutGrad)"/> |
| 22 |
|
| 23 |
<!-- Text lines --> |
| 24 |
<rect x="48" y="32" width="30" height="4" rx="2" fill="url(#calloutGrad)" opacity="0.8"/> |
| 25 |
<rect x="48" y="42" width="25" height="3" rx="1.5" fill="url(#calloutGrad)" opacity="0.5"/> |
| 26 |
<rect x="48" y="50" width="28" height="3" rx="1.5" fill="url(#calloutGrad)" opacity="0.5"/> |
| 27 |
<rect x="48" y="58" width="18" height="3" rx="1.5" fill="url(#calloutGrad)" opacity="0.3"/> |
| 28 |
</svg> |
