HomeData Visualization
Preview
html
Code
html
<svg viewBox="0 0 300 150" class="line-chart">
  <defs>
    <linearGradient id="lineGrad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%"   stop-color="var(--accent)" stop-opacity="0.25"/>
      <stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <!-- Alan dolgusu -->
  <path
    d="M0,120 L50,90 L100,70 L150,50 L200,60 L250,30 L300,20 L300,150 L0,150 Z"
    fill="url(#lineGrad)"
  />
  <!-- Line -->
  <path
    d="M0,120 L50,90 L100,70 L150,50 L200,60 L250,30 L300,20"
    fill="none"
    stroke="var(--accent)"
    stroke-width="2.5"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>
Related Blocks
html
Donut Chart
Dairesel pasta/donut grafik.
html
Progress Ring
Circular progress for percentage display.
html
Sparkline
Inline mini trend chart.