Skip to content

Instantly share code, notes, and snippets.

@anad-zeal
Created September 2, 2018 17:21
Show Gist options
  • Save anad-zeal/802ce7f316f8bf71dc71d0f95bb9c213 to your computer and use it in GitHub Desktop.
Save anad-zeal/802ce7f316f8bf71dc71d0f95bb9c213 to your computer and use it in GitHub Desktop.
SVG Path Circle
<h1>SVG Path Circle</h1>
<p>Why two arches? – please see the <a href="https://codepen.io/jakob-e/details/bgBegJ/">comments</a></p>
<pre>
&lt;circle cx="" cy="" r="" /&gt;
&lt;path d="
M cx, cy
m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
"/&gt;
<em>...or a bit shorter (merging the two moves) </em>
&lt;path d="
M cx - r, cy
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
"/&gt;
<strong>Example</strong>
&lt;circle cx="100" cy="100" r="75" /&gt;
&lt;path d="
M 100, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
"/&gt;
</pre>
<div>
circle
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="75" />
</svg>
</div>
<div>
path
<svg viewBox="0 0 200 200">
<path
d="
M 100, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
"
/>
</svg>
</div>
body { padding:20px 50px} h1,p { font:500 36px sans-serif; } p {font-size:16px;}div { display: inline-block; width: 100px; font-family: sans-serif; } svg { max-width:100px; path { fill: olive; } circle { fill: tomato } } pre { padding:16px; background-color: whitesmoke; border-radius:5px;border:1px solid #ccc;} pre { font-size:11px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment