Circle

A circle is positioned with the cx and cy attributes. These indicate the x and y coordinates of the center of the circle. The radius is determined by the r attribute. The following is an example you can experiment with: http://localhost:8080/chapter-2/circle.html:

<circle cx="62" cy="62" r="50"></circle>

Now type in the following code:

   circle {
        stroke-width: 5;
        stroke:steelblue;
        fill:#888;
        fill-opacity: .5;
   }

This will create a circle with the familiar blue outline, a gray interior, and half-way opaque: