Skip to content

Instantly share code, notes, and snippets.

@duncangh

duncangh/svg shapes.html

Last active October 10, 2019 19:39
Show Gist options
  • Save duncangh/7195cef2f251b2da311fc63269737c41 to your computer and use it in GitHub Desktop.
Save duncangh/7195cef2f251b2da311fc63269737c41 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg shapes.html
<html lang="en">
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div>
<h1>Example SVG Shapes</h1>
<p>Circle
<svg>
<circle class="circle" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40 opacity="0.25"></circle>
</svg>
</p>
<p>Line
<svg>
<line x1="0" y1="0" x2="10" y2="10" stroke="black"></line>
</svg>
</p>
<p>Rect
<svg>
<rect x="0" y="0" width="10" height="10"></rect>
</svg>
</p>
<p>ellipse
<svg>
<ellipse cx="10" cy="5" rx="10" ry="5"></ellipse>
</svg>
</p>
<p>polygon
<svg>
<polygon points="0,0 10,5 20,0 20,20 10,15 0,20" fill="blue" stroke="gray" stroke-width="4"></polygon>
</svg>
</p>
<p>polyline
<svg>
<polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="green"></polyline>
</svg>
</p>
<p>path
<svg>
<path d="M65,10 a50,25 0 1,0 50,25"></path>
</svg>
</p>
</div>
</body>
</html>
Raw
svg shapes.md

Shapes

  • circle
  • rect
  • line
  • ellipse
  • polygon
  • polyline
  • path
Raw
svg_shapes_d3.js
// change the style of svg circle element to one (between 0 and 1
d3.select('.circle').style('opacity', 1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment