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>
    ]],
}