Skip to content

Instantly share code, notes, and snippets.

@flunky

flunky/index.html

Last active March 24, 2017 18:32
Show Gist options
  • Save flunky/bfbafc2839f1f7460736c030104285bd to your computer and use it in GitHub Desktop.
Save flunky/bfbafc2839f1f7460736c030104285bd to your computer and use it in GitHub Desktop.
Download ZIP
SVG Manual Bar Chart using Translate
Raw
index.html
<!DOCTYPE html>
<style> .chart rect { fill: steelblue } </style>
<html><body><p>Here are the magic numbers from Lost:</p>
<svg class="chart" width="120" height="420">
<g transform="translate(0,380)">
<rect width="19" height="40"></rect>
</g>
<g transform="translate(20,340)">
<rect width="19" height="80"></rect>
</g>
<g transform="translate(40,270)">
<rect width="19" height="150"></rect>
</g>
<g transform="translate(60,260)">
<rect width="19" height="160"></rect>
</g>
<g transform="translate(80,190)">
<rect width="19" height="230"></rect>
</g>
<g transform="translate(100,0)">
<rect width="19" height="420"></rect>
</g>
</svg>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment