1<div class="chart">
2 <div class="labels">
3 <span class="label" style="--i:1">HTML</span>
4 <span class="label" style="--i:2">CSS</span>
5 <span class="label" style="--i:3">JavaScript</span>
6 <span class="label" style="--i:4">Vue</span>
7 </div>
8 <div class="lines mt-2 space-x-12">
9 <div class="line" style="--i:1"></div>
10 <div class="line" style="--i:2"></div>
11 <div class="line" style="--i:3"></div>
12 <div class="line" style="--i:4"></div>
13 <div class="line" style="--i:5"></div>
14 <div class="line" style="--i:6"></div>
15 <div class="line" style="--i:7"></div>
16 <div class="line" style="--i:8"></div>
17 <div class="line" style="--i:9"></div>
18 </div>
19 <div class="levels">
20 <div class="level">
21 <span class="label left staggered-scale-in">666</span>
22 <div class="line"></div>
23 </div>
24 <div class="level slide-up-in">
25 <span class="label right staggered-scale-in">114514</span>
26 <div class="line"></div>
27 <div class="arrow"></div>
28 </div>
29 </div>
30 <div class="graph">
31 <svg viewBox="-3 0 155.71 30.375">
32 <marker id="dot" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="4" markerHeight="4">
33 <circle cx="4" cy="4" r="4" stroke="none" fill="var(--yellow-color)" />
34 </marker>
35 <polyline fill="none" stroke="var(--yellow-color)" stroke-width="1" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)">
36 <animate attributeName="points" fill="freeze" dur="3s" begin="1.1s" values="
37 -1 30, -1 30, -1 30, -1 30, -1 30, -1 30;
38 -1 30, 18 30, 18 30, 18 30, 18 30, 18 30;
39 -1 30, 18 30, 56 18, 56 18, 56 18, 56 18;
40 -1 30, 18 30, 56 18, 93.5 18, 93.5 18, 93.5 18;
41 -1 30, 18 30, 56 18, 93.5 18, 131 0, 131 0;
42 -1 30, 18 30, 56 18, 93.5 18, 131 0, 150 0;" />
43 </polyline>
44 </svg>
45 </div>
46 <div class="waves">
47 <div class="wave blue"></div>
48 <div class="wave red"></div>
49 </div>
50</div>