Chapter 2 Basic Shapes

Extract

Circles

 The circle element takes three geometric attributes:  ‘cx’, ‘cy’, and ‘r’)

 The ‘cx’ and ‘cy’ values specify the location of the middle of the circle while the ‘r’ value specifies the radius of the circle.

 For example if you want to create a circle with a diameter of 80 user units then you need to set the value of the ‘r’ attribute equal to 40 as in this example.

 
   Figure 2-19.  Circle element diagram  

( see this picture as svg )

 <svg width="350" height="300">
 <circle cx="100" cy="50" r="40" stroke="darkslategrey" stroke-width="2" fill="grey" fill-opacity="0.4"/>
</svg>

This is the syntax for the ‘circle’ element.

<circle id="name"


        cx="coordinate"
        cy="coordinate"
        r="length"
        style-attribute="style-value"/>

The ‘r’ attribute radii parameter is required for rendering the circle element in SVG.  If the ‘cx’ and ‘cy’ attributes are not specified then the circles center point is assumed to be (0, 0).  However, if the ‘r’ attribute is not specified or is set equal to zero then the circle will not appear in the image as shown in this example.  

Figure 2-20.  Circle designs  

( see this picture as svg )

 <svg width="350" height="300">
    <!-- Points -->
   <circle r="0" fill="black" stroke="black"/>
    <circle cx="10" cy="10" r="3" fill="black" stroke="black"/>
   <circle cx="30" cy="10" r="5" fill="black" stroke="red" stroke-width="2"/>
   <circle cx="50" cy="10" r="7" fill="black" stroke="red" stroke-width="2"/>
   <!-- Circles -->
    <circle cx="0" cy="50" r="20" fill="orange" stroke="black" stroke-width="3" />
    <circle cx="70" cy="50" r="30" fill="grey" stroke="black" stroke-width="3" />
    <circle cx="120" cy="50" r="40" fill="grey" fill-opacity="0.5" stroke="black" stroke-width="3"/>
    <circle cx="200" cy="50" r="50" fill="grey" fill-opacity="0.3" stroke="black" stroke-width="3"/>
</svg>

The ‘circle’ element can be used as the basis for buttons, wheels, gears, bubbles, people or even planets as we’ll see later in this book.

 Circle Element Designs

Here are some useful techniques for creating fascinating designs using only one or two ‘circle’ elements.

Figure 2-21.  Amazing shapes with the circle element

( see this picture as svg ) 

There is nothing up my sleeves. See the code for yourself!

 <svg width="800" height="600" viewBox="0 0 400 300">
  <defs>
    <pattern id="gridPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.25"/>
    </pattern>
  </defs>
  <rect id="grid" width="350" height="211" stroke="gray" stroke-width="0.1" fill="url(#gridPattern)" />
<!-- grid -->
  <circle cx="40" cy="40" r="20" stroke="darkslategray" stroke-width="20"
                                                 stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
  <circle cx="120" cy="40" r="20" stroke="darkslategray" stroke-width="10"
                                                  stroke-dasharray="1.75 8.72" fill="lightslategray" fill-opacity="0.5" />
  <circle cx="40" cy="100" r="10" stroke="darkslategray" stroke-width="20"
                                                  stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854"
                                                  fill="lightslategray" fill-opacity="0.5"/>
  <circle cx="120" cy="100" r="10" stroke="darkslategray" stroke-width="20"
                                                 stroke-dasharray="47.124 15.708" stroke-dashoffset="7.854"       
                                                 fill="lightslategray" fill-opacity="0.5"/>
  <circle cx="40" cy="160" r="20" stroke="darkslategray" stroke-width="2"
                                      stroke-dasharray="31.416 31.416" stroke-dashoffset="-15.708" fill="none" />     
  <circle cx="120" cy="160" r="20" stroke="darkslategray" stroke-width="8"
                                                     stroke-dasharray="62.832 100" stroke-dashoffset="-41.888"
                                                      fill="none" stroke-linecap="round" />
  <text x="75" y="200" font-size="8" text-anchor="middle">single circle  each</text>
  <circle cx="230" cy="40" r="20" stroke="darkslategray" stroke-width="20" 
                                                              stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
  <circle cx="230" cy="40" r="15" stroke="darkslategray" stroke-width="20"
          stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
  <circle cx="310" cy="40" r="20" stroke="darkslategray" stroke-width="10"
                                                    stroke-dasharray="1.75 8.72" fill="lightslategray" fill-opacity="0.5" />
  <circle cx="310" cy="40" r="10" stroke="darkslategray" stroke-width="20"
                                                  stroke-dasharray="0.875 14.833 0.875 100" fill="none" />
  <circle cx="230" cy="100" r="20" stroke="darkslategray" stroke-width="2" fill="none" />
  <circle cx="230" cy="100" r="10" stroke="darkslategray" stroke-width="20"
                                                      stroke-dasharray="0.524 2.094" fill="none" />
 <circle cx="310" cy="100" r="10" stroke="darkslategray" stroke-width="20" 
                                          stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854" fill="none" />
 <circle cx="310" cy="100" r="10" stroke="lightslategray" stroke-width="20" 
                                 stroke-dasharray="15.708 15.708" stroke-dashoffset="-7.854" fill="none" />
 <circle cx="230" cy="160" r="10" stroke="darkslategray" stroke-width="20"
                                                  stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854"
                                                  stroke-opacity="0.5" fill="lightslategray" />
  <circle cx="230" cy="160" r="10" stroke="lightslategray" stroke-width="20"
                                                     stroke-dasharray="15.708 15.708" stroke-dashoffset="-7.854"
                                                      stroke-opacity="0.5" fill="none" />
 <circle cx="310" cy="160" r="20" stroke="darkslategray" stroke-width="8"
                                                      stroke-dasharray="6.981 13.962" stroke-dashoffset="3.491"
                                                      fill="none" stroke-linecap="round" />
 <circle cx="310" cy="160" r="10" stroke="lightslategray" stroke-width="20"
                                              stroke-dasharray="3.491 6.981" stroke-dashoffset="-3.491" fill="none" />
  <text x="275" y="200" font-size="8" text-anchor="middle">two concentric circles each</text>
</svg>