Example 7

You may copy and paste the following text into your favorite editor.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
   "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg id="body"
    width="21cm" height="13.5cm"
    viewBox="0 0 210 135">
<title>Example 7</title>
<desc>
    Circles and paths
</desc>

    <defs>
    <polyline id="loop"
        points="
         1.00,  0.00     0.93,  0.16
         0.72,  0.26     0.43,  0.25
         0.13,  0.11    -0.11, -0.13
        -0.25, -0.43    -0.26, -0.72
        -0.16, -0.93     0.00, -1.00
         0.16, -0.93     0.26, -0.72
         0.25, -0.43     0.11, -0.13
        -0.13,  0.11    -0.43,  0.25
        -0.72,  0.26    -0.93,  0.16
        -1.00,  0.00"
        transform="scale(5, 5)"
        stroke="green" stroke-width="0.1" fill="none" />

    <g id="multiloop">
        <use xlink:href="#loop"/>
        <use xlink:href="#loop" transform="translate(10, 0)"/>
        <use xlink:href="#loop" transform="translate(20, 0)"/>
        <use xlink:href="#loop" transform="translate(30, 0)"/>
        <use xlink:href="#loop" transform="translate(40, 0)"/>
        <use xlink:href="#loop" transform="translate(50, 0)"/>
        <use xlink:href="#loop" transform="translate(60, 0)"/>
        <use xlink:href="#loop" transform="translate(70, 0)"/>
        <use xlink:href="#loop" transform="translate(80, 0)"/>
        <use xlink:href="#loop" transform="translate(90, 0)"/>
        <use xlink:href="#loop" transform="translate(100, 0)"/>
        <use xlink:href="#loop" transform="translate(110, 0)"/>
        <use xlink:href="#loop" transform="translate(120, 0)"/>
    </g>

    <circle id="bullet" cx="0" cy="0" r="1.5" />

    <path id="star"
        d=
        "M -0.951,-0.309
         L  0.951,-0.309
           -0.588, 0.809
            0.000,-1.000
            0.588, 0.809
         Z"
         transform="scale(3,3)" />
    </defs>

    <rect x="10" y="20" width="150" height="70"
        transform="translate(3, 3)"
        fill="#999999" stroke="#999999" stroke-width="1" />

    <rect x="10" y="20" width="150" height="70"
        fill="#eeeeff" stroke="red" stroke-width="1" />

    <use xlink:href="#multiloop" transform="translate(20, 100)"/>
    <use xlink:href="#multiloop"
        transform="translate(20, 10) rotate(180, 60, 0)"/>

    <use xlink:href="#bullet" fill="#990000" transform="translate(5, 120)"/>
    <use xlink:href="#star" fill="#009900" transform="translate(10, 120)"/>
    <use xlink:href="#star" fill="#990099" transform="translate(180, 120)"/>
    <use xlink:href="#bullet" fill="#000099" transform="translate(185, 120)"/>
</svg>