Kazuma
140 lines
3.6 KiB
Svelte
140 lines
3.6 KiB
Svelte
<script>
|
|
// size: 'sm' | 'md' | 'lg'
|
|
// label: optional text shown below (lg only)
|
|
let { size = 'md', label = null } = $props();
|
|
</script>
|
|
|
|
{#if size === 'sm'}
|
|
<!-- Compact dot-pulse for buttons -->
|
|
<span class="dot-pulse">
|
|
<span></span><span></span><span></span>
|
|
</span>
|
|
{:else}
|
|
<!-- Market chart line animation for md / lg -->
|
|
<div class="chart-wrap" data-size={size}>
|
|
<svg
|
|
viewBox="0 0 160 60"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="chart-svg"
|
|
aria-hidden="true"
|
|
>
|
|
<!-- Faint grid lines -->
|
|
<line x1="0" y1="15" x2="160" y2="15" stroke="#1e293b" stroke-width="1" />
|
|
<line x1="0" y1="30" x2="160" y2="30" stroke="#1e293b" stroke-width="1" />
|
|
<line x1="0" y1="45" x2="160" y2="45" stroke="#1e293b" stroke-width="1" />
|
|
|
|
<!-- The market line — rises, dips, spikes, recovers -->
|
|
<polyline
|
|
class="chart-line"
|
|
points="
|
|
0,45
|
|
12,38
|
|
22,42
|
|
32,28
|
|
42,32
|
|
52,18
|
|
62,24
|
|
72,14
|
|
82,20
|
|
92,10
|
|
104,22
|
|
114,16
|
|
124,28
|
|
134,20
|
|
148,8
|
|
160,12
|
|
"
|
|
/>
|
|
|
|
<!-- Glowing dot at the leading edge -->
|
|
<circle class="chart-dot" cx="160" cy="12" r="3" />
|
|
</svg>
|
|
|
|
{#if label}
|
|
<span class="chart-label">{label}</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
/* ── Dot pulse (sm) ─────────────────────────────────────────────── */
|
|
.dot-pulse {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.dot-pulse span {
|
|
display: block;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: #60a5fa;
|
|
animation: dot-bounce 0.9s ease-in-out infinite;
|
|
}
|
|
|
|
.dot-pulse span:nth-child(2) { animation-delay: 0.15s; }
|
|
.dot-pulse span:nth-child(3) { animation-delay: 0.30s; }
|
|
|
|
@keyframes dot-bounce {
|
|
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
40% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* ── Chart wrap (md / lg) ───────────────────────────────────────── */
|
|
.chart-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.chart-wrap[data-size="md"] .chart-svg { width: 120px; height: 45px; }
|
|
.chart-wrap[data-size="lg"] .chart-svg { width: 200px; height: 75px; }
|
|
|
|
.chart-svg { overflow: visible; }
|
|
|
|
/* The animated line */
|
|
.chart-line {
|
|
stroke: #3b82f6;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
/* total path length ≈ 220 — animate draw-in then loop */
|
|
stroke-dasharray: 220;
|
|
stroke-dashoffset: 220;
|
|
animation: draw-line 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
@keyframes draw-line {
|
|
0% { stroke-dashoffset: 220; opacity: 1; }
|
|
70% { stroke-dashoffset: 0; opacity: 1; }
|
|
85% { stroke-dashoffset: 0; opacity: 0; }
|
|
100% { stroke-dashoffset: 220; opacity: 0; }
|
|
}
|
|
|
|
/* Glowing dot that appears when the line finishes drawing */
|
|
.chart-dot {
|
|
fill: #3b82f6;
|
|
filter: drop-shadow(0 0 4px #3b82f6);
|
|
opacity: 0;
|
|
animation: dot-appear 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
@keyframes dot-appear {
|
|
0% { opacity: 0; }
|
|
60% { opacity: 0; }
|
|
70% { opacity: 1; }
|
|
85% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.chart-label {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
</style>
|