Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active May 1, 2019 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HarryStevens/944fc151f210ddf6bd6ebaeda12c3d05 to your computer and use it in GitHub Desktop.
Save HarryStevens/944fc151f210ddf6bd6ebaeda12c3d05 to your computer and use it in GitHub Desktop.
Download ZIP
shape2path
Raw
.block
license: MIT
Raw
README.md

This is a demonstration of shape2path, a little library for converting SVG shapes to SVG paths.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: auto;
display: table;
}
svg {
margin-top: 10px;
}
</style>
</head>
<body>
<svg width="420" height="440"></svg>
<script src="https://unpkg.com/d3-selection@1.1.0/build/d3-selection.min.js"></script>
<script src="https://unpkg.com/shape2path@3.0.3/build/shape2path.min.js"></script>
<script>
var svg = d3.select("svg");
svg.append("circle")
.attr("cx", 20)
.attr("cy", 20)
.attr("r", 20);
var circle = shape2path.circle()
.attr("cx", 20)
.attr("cy", 20)
.attr("r", 20);
svg.append("path")
.attr("transform", "translate(45, 0)")
.attr("d", circle());
svg.append("rect")
.attr("x", 0)
.attr("y", 70)
.attr("width", 40)
.attr("height", 40);
var rect = shape2path.rect()
.attr("x", 0)
.attr("y", 70)
.attr("width", 40)
.attr("height", 40);
svg.append("path")
.attr("transform", "translate(45, 0)")
.attr("d", rect());
svg.append("rect")
.attr("x", 0)
.attr("y", 120)
.attr("width", 200)
.attr("height", 200)
.attr("rx", 20)
.attr("ry", 10);
var roundedRect = shape2path.rect()
.attr("x", 0)
.attr("y", 120)
.attr("width", 200)
.attr("height", 200)
.attr("rx", 20)
.attr("ry", 10);
svg.append("path")
.attr("transform", "translate(220, 0)")
.attr("d", roundedRect());
svg.append("rect")
.attr("x", 0)
.attr("y", 340)
.attr("width", 100)
.attr("height", 100)
.attr("rx", 15);
var roundedRect2 = shape2path.rect()
.attr("x", 0)
.attr("y", 340)
.attr("width", 100)
.attr("height", 100)
.attr("rx", 15);
svg.append("path")
.attr("transform", "translate(120, 0)")
.attr("d", roundedRect2());
svg.append("ellipse")
.attr("cx", 150)
.attr("cy", 25)
.attr("rx", 50)
.attr("ry", 25);
var ellipse = shape2path.ellipse()
.attr("cx", 150)
.attr("cy", 25)
.attr("rx", 50)
.attr("ry", 25);
svg.append("path")
.attr("transform", "translate(0, 55)")
.attr("d", ellipse());
svg.append("line")
.attr("x1", 220)
.attr("x2", 300)
.attr("y1", 100)
.attr("y2", 0)
.style("stroke", "black");
var line = shape2path.line()
.attr("x1", 220)
.attr("x2", 300)
.attr("y1", 100)
.attr("y2", 0);
svg.append("path")
.attr("transform", "translate(0, 10)")
.attr("d", line())
.style("stroke", "black");
svg.append("polygon")
.attr("fill", "none")
.attr("stroke", "black")
.attr("points", "270,340 310,360 310,400 270,420 230,400 230,360");
var polygon = shape2path.polygon()
.attr("points", "270,340 310,360 310,400 270,420 230,400 230,360");
svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("transform", "translate(100, 0)")
.attr("d", polygon());
svg.append("polyline")
.attr("fill", "none")
.attr("stroke", "black")
.attr("points", "270,100 290,60 320,80 350,20");
var polyline = shape2path.polyline()
.attr("points", "270,100 290,60 320,80 350,20");
svg.append("path")
.attr("transform", "translate(69, 0)")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", polyline());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment