41 lines
1.8 KiB
Vue
41 lines
1.8 KiB
Vue
<template>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
|
|
<defs>
|
|
<linearGradient id="body-gradient" x1="0" y1="100" x2="100" y2="0" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#FFEC00" /> <!-- Yellow -->
|
|
<stop offset="100%" stop-color="#009EE0" /> <!-- Blue -->
|
|
</linearGradient>
|
|
<linearGradient id="head-gradient" x1="20" y1="20" x2="80" y2="80" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#E30613" /> <!-- Red -->
|
|
<stop offset="100%" stop-color="#B91C1C" /> <!-- Dark Red -->
|
|
</linearGradient>
|
|
|
|
<!-- Glow filter for modern feel -->
|
|
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="2" result="blur" />
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Modern Abstract Onboarding Icon -->
|
|
|
|
<!-- The "Receptacle" / Organization / Structure (U-shape) -->
|
|
<!-- Stylized as a smooth, continuous curve representing support/integration -->
|
|
<path
|
|
d="M 20 55 C 20 85, 80 85, 80 55"
|
|
stroke="url(#body-gradient)"
|
|
stroke-width="12"
|
|
stroke-linecap="round"
|
|
fill="none"
|
|
/>
|
|
|
|
<!-- The "User" / Agent (Floating Sphere) -->
|
|
<!-- Poised to enter or rising up, representing energy/new arrival -->
|
|
<circle cx="50" cy="35" r="14" fill="url(#head-gradient)" />
|
|
|
|
<!-- Dynamic "Connection" Dot (Success/Active status) -->
|
|
<circle cx="82" cy="35" r="6" fill="#009EE0" stroke="white" stroke-width="2" />
|
|
|
|
</svg>
|
|
</template>
|