<h1>Shapes with SVG-path</h1>

<!--line-->
<svg width="200" height="200">
  <text x="10" y="20">Line</text>
  <path stroke="crimson" stroke-width="5"
        d="M 20 40 L 185 185"/>
</svg>

<!--polyline-->
<svg width="200" height="200">
  <text x="10" y="20">Polyline</text>
  <path stroke="orangered" stroke-width="5" fill="none"
        d="M 20 40 L 50 170 
           L 130 30 L 150 150 
           L 50 50 L 110 180"/>
</svg>

<!--rect-->
<svg width="200" height="200">
  <text x="10" y="20">Rect</text>
  <path stroke="steelblue" stroke-width="5" fill="skyblue"
        d="M 20 40 L 180 40 
           L 180 180 L 20 180 
           z"/>
</svg>

<!--polygon-->
<svg width="200" height="200">
  <text x="10" y="20">Polygon</text>
  <path stroke="green" stroke-width="5" fill="yellowgreen"
        d="M 100 40 L 180 180 L 20 180 z"/>
</svg>

<!--circle-->
<svg width="200" height="200">
  <text x="10" y="20">Circle</text>
  <path stroke="orange" stroke-width="5" fill="gold"
        d="M 100,40 
           C195,40 195,180 100,180 
           M 100,180 
           C5,180 5,40 100,40 
           "/>
</svg>

BODY {
padding: 20px;
margin: 0;
text-align: center;
}

SVG {
margin: 10px;  
vertical-align: middle;
border: 1px solid #DDD;
}

H1 {
  margin-bottom: .5em;
  padding-bottom: .3em;
  border-bottom: 1px solid #CCC;
  font: 3em/1.4 Georgia, serif;
  text-align: center;
  }