SVG Path Circle

index.html

<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>

style.scss

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;}

svg-path-circle.markdown

SVG Path Circle

A Pen by jakob-e on CodePen.

License.