return {
    [[
        <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
        </svg>
    ]],
    [[
        <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <line x1="40" x2="120" y1="20"  y2="20"  stroke="black" stroke-width="20" stroke-linecap="butt"/>
          <line x1="40" x2="120" y1="60"  y2="60"  stroke="black" stroke-width="20" stroke-linecap="square"/>
          <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
        </svg>
    ]],
    [[
        <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <polyline points="40  60 80  20 120  60" stroke="black" stroke-width="20" stroke-linecap="butt"   fill="none" stroke-linejoin="miter"/>
          <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round"  fill="none" stroke-linejoin="round"/>
          <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
        </svg>
    ]],
    [[
        <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round"                  stroke-dasharray="5,10,5" fill="none"/>
            <path d="M 10 75 L 190 75"                stroke="red"   stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5"    fill="none"/>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
          <circle cx="5"  cy="5" r="3" stroke="green" />
          <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />
          <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
          <path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
                d="M1,9 l7   ,-3 l7   ,3
                   m2,0 l3.5 ,-3 l3.5 ,3
                   m2,0 l2   ,-3 l2   ,3
                   m2,0 l0.75,-3 l0.75,3
                   m2,0 l0.5 ,-3 l0.5 ,3" />
          <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
                d="M1,19 l7   ,-3 l7   ,3
                   m2, 0 l3.5 ,-3 l3.5 ,3
                   m2, 0 l2   ,-3 l2   ,3
                   m2, 0 l0.75,-3 l0.75,3
                   m2, 0 l0.5 ,-3 l0.5 ,3" />
          <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3"
                d="M1,29 l7   ,-3 l7   ,3
                   m2, 0 l3.5 ,-3 l3.5 ,3
                   m2, 0 l2   ,-3 l2   ,3
                   m2, 0 l0.75,-3 l0.75,3
                   m2, 0 l0.5 ,-3 l0.5 ,3" />
          <path stroke="pink" fill="none" stroke-width="0.05"
                d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
                   M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
                   M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
        </svg>
    ]],
    [[
        <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
          <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
          <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />
          <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" />
          <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" />
          <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" />
          <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
        </svg>
    ]],
    [[
        <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
          <path d="M 10 75 L 190 75"                stroke="red"   stroke-linecap="round" stroke-dasharray="5,5"    fill="none" stroke-width="1"/>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <path fill="none" stroke="red"
            d="M 10,10 h 10
               m  0,10 h 10
               m  0,10 h 10
               M 40,20 h 10
               m  0,10 h 10
               m  0,10 h 10
               m  0,10 h 10
               M 50,50 h 10
               m-20,10 h 10
               m-20,10 h 10
               m-20,10 h 10" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
          <path fill="none" stroke="red" d="M 10,10 L 90,90 V 10 H 50" />
          <path fill="none" stroke="red" d="M 110,10 l 80,80 v -80 h -40" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path fill="none" stroke="red" d="M 10,90 C 30,90 25,10 50,10 S 70,90 90,90" />
          <path fill="none" stroke="red" d="M 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" />
          <g id="ControlPoints">
            <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
            <circle cx="30" cy="90" r="1.5"/>
            <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
            <circle cx="25" cy="10" r="1.5"/>
            <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
            <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
            <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
            <circle cx="70" cy="90" r="1.5"/>
            <circle cx="10" cy="90" r="1.5"/>
            <circle cx="50" cy="10" r="1.5"/>
            <circle cx="90" cy="90" r="1.5"/>
          </g>
          <use xlink:href="#ControlPoints" x="100" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path fill="none" stroke="red" d="M 10,50 Q 25,25 40,50 t 30,0 30,0 30,0 30,0 30,0" />
          <g>
            <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
            <circle cx="25" cy="25" r="1.5" />
            <circle cx="10" cy="50" r="1.5"/>
            <circle cx="40" cy="50" r="1.5"/>
            <g id="SmoothQuadraticDown">
              <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
              <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
              <circle cx="70" cy="50" r="1.5" />
            </g>
            <g id="SmoothQuadraticUp">
              <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
              <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
              <circle cx="100" cy="50" r="1.5" />
            </g>
            <use xlink:href="#SmoothQuadraticDown" x="60" />
            <use xlink:href="#SmoothQuadraticUp"   x="60" />
            <use xlink:href="#SmoothQuadraticDown" x="120" />
          </g>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill="none" stroke="red"    d="M 6,10 A 6 4 10 1 0 14,10" />
          <path fill="none" stroke="lime"   d="M 6,10 A 6 4 10 1 1 14,10" />
          <path fill="none" stroke="purple" d="M 6,10 A 6 4 10 0 1 14,10" />
          <path fill="none" stroke="pink"   d="M 6,10 A 6 4 10 0 0 14,10" />
        </svg>
    ]],
    [[
        <svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
          <path stroke="red" d="M  5,1 l -4,8 8,0" />
          <path stroke="red" d="M 15,1 l -4,8 8,0 -4,-8" />
          <path stroke="red" d="M 25,1 l -4,8 8,0 z" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
          <ellipse cx="100" cy="50" rx="100" ry="50" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
            <polygon points="0,100 50,25 50,75 100,0" />
            <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
            <polyline points="0,100 50,25 50,75 100,0" />
            <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
          <rect width="100" height="100" />
          <rect x="120" width="100" height="100" rx="15" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <path fill="none" stroke="red"
            d="M 10,30
               A 20,20 0,0,1 50,30
               A 20,20 0,0,1 90,30
               Q 90,60 50,90
               Q 10,60 10,30 z" />
        </svg>
    ]],
    [[
        <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
          <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/>
          <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/>
        </svg>
    ]],
    [[
        <svg x="0" width="10" height="10" clip="auto">
            <circle cx="5" cy="5" r="4" stroke="green" />
        </svg>
    ]],
    [[
        <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
            <circle cx="5" cy="5" r="4" stroke="green" />
          </svg>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="100%" height="100%" fill="red"/>
          <circle cx="50%" cy="50%" r="4" fill="yellow"/>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="100%" height="100%" fill="green"/>
          <circle cx="50%" cy="50%" r="4" fill="yellow"/>
        </svg>
    ]],
    [[
        <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
          <circle cx="50%" cy="50%" r="4" fill="yellow"/>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <rect x="10" y="10" width="30" height="20" fill="green" />
          <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <rect x="5" y="5" width="40" height="40" fill="green" />
          <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" />
          <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
          <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" />
        </svg>
    ]],
    [[
        <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
          <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
          <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" />
          <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" />
          <circle cx="0" cy="0" r="10" fill="black" />
        </svg>
    ]],
    [[
        <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="10" height="10" />
          <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
          <rect x="0" y="0" width="10" height="10" fill="green" transform="rotate(100,10,10)" />
        </svg>
    ]],
    [[
        <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
          <rect x="-3" y="-3" width="6" height="6" />
          <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
        </svg>
    ]],
    [[
        <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
          <rect x="-3" y="-3" width="6" height="6" />
          <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
        </svg>
    ]],
    [[
        <svg width="100" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <defs>
            <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
          </defs>
          <clipPath id="emptyStar">
            <use xlink:href="#star" clip-rule="evenodd" />
          </clipPath>
          <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />
          <clipPath id="filledStar">
            <use xlink:href="#star" clip-rule="nonzero" />
          </clipPath>
          <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
        </svg>
    ]],
--     [[
--         <svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
--           <style>
--             .small { font: italic 13px sans-serif; }
--             .heavy { font: bold 30px sans-serif; }
--             .Rrrrr { font: italic 40px serif; fill: red; }
--           </style>
--           <text x="20" y="35" class="small">My</text>
--           <text x="40" y="35" class="heavy">cat</text>
--           <text x="55" y="55" class="small">is</text>
--           <text x="65" y="55" class="Rrrrr">Grumpy!</text>
--         </svg>
--     ]],
    [[
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>
            <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
              <circle cx="5" cy="5" r="5" fill="red" />
            </marker>
          </defs>
          <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)"  />
          <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)" />
        </svg>
    ]],
    -- from the attributes section
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
              <stop offset="0%" style="stop-color:skyblue;" />
              <stop offset="100%" style="stop-color:seagreen;" />
            </linearGradient>
          </defs>
          <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
          <circle cx="50" cy="50" r="40" fill="black" />
          <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
          <circle cx="50" cy="50" r="40" />
          <circle cx="150" cy="50" r="40" fill-opacity="0.7" />
          <circle cx="250" cy="50" r="40" fill-opacity="50%" />
          <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
        </svg>
    ]],
    [[
        <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
          <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
          <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />
          <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />
          <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />
          <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" />
        </svg>
    ]],
    [[
        <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
          <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
          <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />
          <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" />
          <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" />
          <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" />
          <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
        </svg>
    ]],
    [[
        svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
          <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
          <text text-anchor="start" x="60" y="40">A</text>
          <text text-anchor="middle" x="60" y="75">A</text>
          <text text-anchor="end" x="60" y="110">A</text>
          <circle cx="60" cy="40" r="3" fill="red" />
          <circle cx="60" cy="75" r="3" fill="red" />
          <circle cx="60" cy="110" r="3" fill="red" />
        </svg>
    ]],
    -- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients
    [[
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
              <stop offset="0%" style="stop-color:skyblue;" />
              <stop offset="100%" style="stop-color:seagreen;" />
            </linearGradient>
          </defs>
          <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
          <circle cx="50" cy="50" r="40" fill="black" />
          <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
        </svg>
    ]],
    [==[
        <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs>
              <linearGradient id="Gradient1">
                <stop class="stop1" offset="0%"/>
                <stop class="stop2" offset="50%"/>
                <stop class="stop3" offset="100%"/>
              </linearGradient>
              <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="50%" stop-color="black" stop-opacity="0"/>
                <stop offset="100%" stop-color="blue"/>
              </linearGradient>
              <style type="text/css">
                #rect1 { fill: url(#Gradient1); }
                .stop1 { stop-color: red; }
                .stop2 { stop-color: black; stop-opacity: 0; }
                .stop3 { stop-color: blue; }
              </style>
          </defs>
          <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
          <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
        </svg>
    ]==],
    [[
        <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs>
              <radialGradient id="RadialGradient1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="blue"/>
              </radialGradient>
              <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="blue"/>
              </radialGradient>
          </defs>
          <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
          <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
        </svg>
    ]],
    [[
        <svg width="120" height="120" version="1.1"
          xmlns="http://www.w3.org/2000/svg">
          <defs>
              <radialGradient id="Gradient"
                    cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="blue"/>
              </radialGradient>
          </defs>
          <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient)" stroke="black" stroke-width="2"/>
          <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
          <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
          <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
          <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
          <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
        </svg>
    ]],
    [[
        <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs>
              <radialGradient id="GradientPad"
                    cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                    spreadMethod="pad">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="blue"/>
              </radialGradient>
              <radialGradient id="GradientRepeat"
                    cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                    spreadMethod="repeat">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="blue"/>
              </radialGradient>
              <radialGradient id="GradientReflect"
                    cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                    spreadMethod="reflect">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="blue"/>
              </radialGradient>
          </defs>
          <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
          <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
          <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
          <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
          <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
          <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
            <circle cx="1" cy="1" r="1" />
          </symbol>
          <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" />
          <use xlink:href="#myDot" x="5"  y="5" style="opacity:1.0" />
          <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
          <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" />
          <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" />
          <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" />
        </svg>
    ]],
    [[
        <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
          <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
          <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
          <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
          <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
          <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>
          <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>
          <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
        </svg>
    ]],
    [[
        <svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
          <radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100">
            <stop offset="0%" stop-color="darkblue" />
            <stop offset="50%" stop-color="skyblue" />
            <stop offset="100%" stop-color="darkblue" />
          </radialGradient>
          <radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100" gradientTransform="skewX(20) translate(-35, 0)">
            <stop offset="0%" stop-color="darkblue" />
            <stop offset="50%" stop-color="skyblue" />
            <stop offset="100%" stop-color="darkblue" />
          </radialGradient>
          <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
          <xrect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translateX(220px);" />
          <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" transform="translateX(220px)" />
        </svg>
    ]],
}