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; }
    
    .animate {
        animation-name: growCircle;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        transform-origin: 150px 100px;
    }
    
    @keyframes growCircle {
        0%   { transform: rotate(180deg); }
        50%  { transform: rotate(0deg); }
        100% { transform: rotate(-180deg); }
    }
  </style>

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

<!-- the arc -->
  <path d="M100 100
           A 50 50 0 0 0 200 100" class="animate" stroke="url(#linear)" fill="transparent" stroke-width="20">
   </path>
   <!-- the cover box -->
<path d="M90 40 H210 V 100 H 90 Z" fill="white" stroke="transport"/>

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

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