Skip to content

Instantly share code, notes, and snippets.

@ManasJayanth

ManasJayanth/gist:7862226

Created December 8, 2013 18:59
Show Gist options
  • Save ManasJayanth/7862226 to your computer and use it in GitHub Desktop.
Save ManasJayanth/7862226 to your computer and use it in GitHub Desktop.
Download ZIP
SVG to illustrate different combinations of sweep and long arc values
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG</title>
</head>
<body>
<div class="container" id="viz-container">
<svg width="320" height="400">
<path d="M220,300 A90,80 0 0,0 140,200"
style="fill: none;
stroke:blue;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 0,1 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,0 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,1 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<text x="0" y="35" fill="black"> large-arc: 0 sweep: 0 </text>
</svg>
<svg width="320" height="400">
<path d="M220,300 A90,80 0 0,0 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 0,1 140,200"
style="fill: none;
stroke:blue;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,0 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,1 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<text x="0" y="35" fill="black"> large-arc: 0 sweep: 1 </text>
</svg>
<svg width="320" height="400">
<path d="M220,300 A90,80 0 0,0 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 0,1 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,0 140,200"
style="fill: none;
stroke:blue;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,1 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<text x="0" y="35" fill="black"> large-arc: 1 sweep: 0 </text>
</svg>
<svg width="320" height="400">
<path d="M220,300 A90,80 0 0,0 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 0,1 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,0 140,200"
style="fill: none;
stroke:black;
stroke-width: 3"/>
<path d="M220,300 A90,80 0 1,1 140,200"
style="fill: none;
stroke:blue;
stroke-width: 3"/>
<text x="0" y="35" fill="black"> large-arc: 1 sweep: 1 </text>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment