Lines and Arcs with SVG

A case study on creating lines and arcs using SVGs

by Christopher McCulloh

HTML

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">

  <style>
    text { font: 13px sans-serif; }

    .red { fill: red; }
    .blue { fill: blue; }

    .grey { stroke: grey }
    .main {
      stroke-width: 10;
      fill: transparent;
    }
  </style>

<defs>
  <linearGradient id="linear-start" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#05a"/>
    <stop offset="0%" stop-color="#0a5"/>
  </linearGradient>
  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   stop-color="#05a"/>
    <stop offset="100%" stop-color="#0a5"/>
  </linearGradient>
</defs>

<!-- the box -->
<path d="M80 80 H220 V 220 H 80 Z" fill="transparent" class="grey"/>
<!--

M80 80 H220 V 220 H 80 Z
M[X Y] H [X] V [Y] H [X] Z

M80 80 = Move the cursor to 80x 80y
H 220 = draw a path Horizontally to 220x (cursor now at 220x 80y)
V 220 = draw a path Vertically to 220y (cursor now at 220x 220y)
H 80 = draw a path Horizontally to 80x (cursor now at 80x 220y)
Z = draw a path back to the starting position (cursor now back at 80x 80y)

-->

<!-- the arc start and end point circles -->
<circle cx="100" cy="100" r="5" fill="red"/>
<circle cx="200" cy="100" r="5" fill="red"/>

<!-- the arc "handles" -->
<circle cx="100" cy="200" r="5" fill="blue"/>
<path d="M100 200 V 100" stroke="blue"/>
<circle cx="200" cy="200" r="5" fill="blue"/>
<path d="M200 200 V 100" stroke="blue"/>

  <!-- the arc letters -->
  <text x="106" y="104" class="red">A</text>
  <text x="106" y="204" class="blue">B</text>
  <text x="206" y="204" class="blue">C</text>
  <text x="206" y="104" class="red">D</text>

  <text x="145" y="60">X</text>
  <text x="50" y="155">Y</text>


<!-- the arc -->
<path d="M100 100 C 100 200, 200 200, 200 100" class="main">
<animate attributeType="XML" attributeName="stroke" from="url(#linear-start)" to="url(#linear)"
        dur="1s" repeatCount="1"/>
</path>
<!--

M100 100 C 100 200, 200 200, 200 100
M[Ax Ay] C [Bx By], [Cx Cy],...