Skip to content

Instantly share code, notes, and snippets.

@tejaser

tejaser/.block

Last active December 7, 2017 10:45
Show Gist options
  • Save tejaser/fa91064c127282df7e185b397a319297 to your computer and use it in GitHub Desktop.
Save tejaser/fa91064c127282df7e185b397a319297 to your computer and use it in GitHub Desktop.
Download ZIP
understanding svg
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="infovizDiv">
<svg style="width:500px;height:500px;border:1px lightgray solid;">
<path d="M 10,60 40,30 50,50 60,30 70,80"
style="fill:black;stroke:gray;stroke-width:4px;" />
<polygon style="fill:gray;"
points="80,400 120,400 160,440 120,480 60,460" />
<g>
<line x1="200" y1="100" x2="450" y2="225"
style="stroke:black;stroke-width:2px;"/>
<circle cy="100" cx="200" r="30"/>
<rect x="410" y="200" char="100" height="50"
style="fill:pink;stroke:black;stroke-width:1px;" />
</g>
</svg>
</div>
<script>
d3.select("svg").style("background", "darkgray");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment