Skip to content

Instantly share code, notes, and snippets.

@fribibb

fribibb/svg-graph.html

Created April 20, 2020 07:41
Show Gist options
  • Save fribibb/442216b06157f86086be01d5eba79028 to your computer and use it in GitHub Desktop.
Save fribibb/442216b06157f86086be01d5eba79028 to your computer and use it in GitHub Desktop.
Download ZIP
A Simple SVG graph
Raw
svg-graph.html
<head>
<style>
html,
body {
height: 100%;
}
body {
background: #333;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.chart {
width: 500px;
height: 100px;
/* border-left: 1px dotted #555; */
/* border-bottom: 1px dotted #555; */
padding: 20px 20px 0 0;
}
</style>
</head>
<body>
<svg viewBox="0 0 500 100" class="chart">
<linearGradient id="gradient">
<stop offset="0%" stop-color="#7351ae"/>
<stop offset="100%" stop-color="#44517e"/>
</linearGradient>
<polyline
fill="url(#gradient)"
stroke="#9a6ce8"
stroke-width="2"
points="
0, 100
0, 120
20, 60
40, 80
60, 20
80, 80
100, 80
120, 60
140, 44
160, 90
180, 80
200, 27
220, 10
240, 70
260, 33
280, 77
300, 40
320, 1
340, 55
360, 22
380, 99
400, 60
420, 70
440, 80
500, 100
">
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment