dino_landing_page/public/arrow.svg
2025-08-20 22:12:25 +05:30

113 lines
2.7 KiB
XML

<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
<!-- Top to Right Arrow -->
<path
d="M 40 160 Q 160 40 280 160"
stroke="url(#gradient1)"
stroke-width="16"
fill="none"
stroke-linecap="round"
marker-end="url(#arrowhead1)"
/>
<!-- Right to Bottom Arrow -->
<path
d="M 160 40 Q 280 160 160 280"
stroke="url(#gradient2)"
stroke-width="16"
fill="none"
stroke-linecap="round"
marker-end="url(#arrowhead2)"
/>
<!-- Bottom to Left Arrow -->
<path
d="M 280 160 Q 160 280 40 160"
stroke="url(#gradient3)"
stroke-width="16"
fill="none"
stroke-linecap="round"
marker-end="url(#arrowhead3)"
/>
<!-- Left to Top Arrow -->
<path
d="M 160 280 Q 40 160 160 40"
stroke="url(#gradient4)"
stroke-width="16"
fill="none"
stroke-linecap="round"
marker-end="url(#arrowhead4)"
/>
<defs>
<!-- Blue to Purple Gradient -->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#3B82F6" />
<stop offset="100%" stop-color="#8B5CF6" />
</linearGradient>
<!-- Purple to Red Gradient -->
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#8B5CF6" />
<stop offset="100%" stop-color="#EF4444" />
</linearGradient>
<!-- Red to Orange Gradient -->
<linearGradient id="gradient3" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#EF4444" />
<stop offset="100%" stop-color="#F97316" />
</linearGradient>
<!-- Orange to Blue Gradient -->
<linearGradient id="gradient4" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#F97316" />
<stop offset="100%" stop-color="#3B82F6" />
</linearGradient>
<!-- Arrowhead Markers -->
<marker
id="arrowhead1"
markerWidth="20"
markerHeight="16"
refX="18"
refY="8"
orient="auto"
>
<polygon points="0 0, 20 8, 0 16" fill="#8B5CF6" />
</marker>
<marker
id="arrowhead2"
markerWidth="20"
markerHeight="16"
refX="18"
refY="8"
orient="auto"
>
<polygon points="0 0, 20 8, 0 16" fill="#EF4444" />
</marker>
<marker
id="arrowhead3"
markerWidth="20"
markerHeight="16"
refX="18"
refY="8"
orient="auto"
>
<polygon points="0 0, 20 8, 0 16" fill="#F97316" />
</marker>
<marker
id="arrowhead4"
markerWidth="20"
markerHeight="16"
refX="18"
refY="8"
orient="auto"
>
<polygon points="0 0, 20 8, 0 16" fill="#3B82F6" />
</marker>
</defs>
</svg>