114 lines
4.3 KiB
XML
114 lines
4.3 KiB
XML
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
|
|
<defs>
|
|
<linearGradient id="bar1" x1="0%" y1="100%" x2="0%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#5dade2;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="bar2" x1="0%" y1="100%" x2="0%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#2ecc71;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#58d68d;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="bar3" x1="0%" y1="100%" x2="0%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#f39c12;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#f5b041;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="bar4" x1="0%" y1="100%" x2="0%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#e74c3c;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#ec7063;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.3" />
|
|
<stop offset="50%" style="stop-color:#2ecc71;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#3498db;stop-opacity:0.3" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<style>
|
|
@keyframes barGrow1 {
|
|
0%, 100% { transform: scaleY(0.4); }
|
|
25% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.6); }
|
|
75% { transform: scaleY(0.8); }
|
|
}
|
|
@keyframes barGrow2 {
|
|
0%, 100% { transform: scaleY(0.7); }
|
|
25% { transform: scaleY(0.5); }
|
|
50% { transform: scaleY(1); }
|
|
75% { transform: scaleY(0.6); }
|
|
}
|
|
@keyframes barGrow3 {
|
|
0%, 100% { transform: scaleY(0.5); }
|
|
25% { transform: scaleY(0.8); }
|
|
50% { transform: scaleY(0.6); }
|
|
75% { transform: scaleY(1); }
|
|
}
|
|
@keyframes barGrow4 {
|
|
0%, 100% { transform: scaleY(0.8); }
|
|
25% { transform: scaleY(0.6); }
|
|
50% { transform: scaleY(0.7); }
|
|
75% { transform: scaleY(0.9); }
|
|
}
|
|
@keyframes lineDraw {
|
|
0% { stroke-dashoffset: 200; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
@keyframes fadeInOut {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.bar1 {
|
|
animation: barGrow1 1.5s ease-in-out infinite;
|
|
transform-origin: bottom;
|
|
}
|
|
.bar2 {
|
|
animation: barGrow2 1.5s ease-in-out infinite;
|
|
transform-origin: bottom;
|
|
}
|
|
.bar3 {
|
|
animation: barGrow3 1.5s ease-in-out infinite;
|
|
transform-origin: bottom;
|
|
}
|
|
.bar4 {
|
|
animation: barGrow4 1.5s ease-in-out infinite;
|
|
transform-origin: bottom;
|
|
}
|
|
.trend-line {
|
|
animation: lineDraw 2s ease-in-out infinite, fadeInOut 2s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
|
|
<!-- Background -->
|
|
<rect x="10" y="10" width="100" height="100" rx="8" fill="#f8f9fa" opacity="0.5"/>
|
|
|
|
<!-- Grid lines -->
|
|
<line x1="20" y1="35" x2="100" y2="35" stroke="#e0e0e0" stroke-width="0.5" opacity="0.5"/>
|
|
<line x1="20" y1="50" x2="100" y2="50" stroke="#e0e0e0" stroke-width="0.5" opacity="0.5"/>
|
|
<line x1="20" y1="65" x2="100" y2="65" stroke="#e0e0e0" stroke-width="0.5" opacity="0.5"/>
|
|
<line x1="20" y1="80" x2="100" y2="80" stroke="#e0e0e0" stroke-width="0.5" opacity="0.5"/>
|
|
|
|
<!-- Animated bar chart -->
|
|
<rect class="bar1" x="25" y="30" width="12" height="50" rx="2" fill="url(#bar1)"/>
|
|
<rect class="bar2" x="42" y="30" width="12" height="50" rx="2" fill="url(#bar2)"/>
|
|
<rect class="bar3" x="59" y="30" width="12" height="50" rx="2" fill="url(#bar3)"/>
|
|
<rect class="bar4" x="76" y="30" width="12" height="50" rx="2" fill="url(#bar4)"/>
|
|
|
|
<!-- Baseline -->
|
|
<line x1="20" y1="95" x2="100" y2="95" stroke="#34495e" stroke-width="1.5" stroke-linecap="round"/>
|
|
|
|
<!-- Animated trend line overlay -->
|
|
<path class="trend-line" d="M 25 70 Q 42 45, 59 55 T 93 35"
|
|
fill="none"
|
|
stroke="url(#line-gradient)"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="200"
|
|
stroke-dashoffset="200"/>
|
|
|
|
<!-- Decorative data points -->
|
|
<circle cx="31" cy="70" r="2.5" fill="#3498db" opacity="0.7"/>
|
|
<circle cx="48" cy="50" r="2.5" fill="#2ecc71" opacity="0.7"/>
|
|
<circle cx="65" cy="55" r="2.5" fill="#f39c12" opacity="0.7"/>
|
|
<circle cx="82" cy="40" r="2.5" fill="#e74c3c" opacity="0.7"/>
|
|
</svg>
|