Spaces:
Running
Running
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 280" role="img" aria-label="Backyard AI — a backyard scene with a person and their small AI"> | |
| <defs> | |
| <pattern id="paper-by" x="0" y="0" width="120" height="120" patternUnits="userSpaceOnUse"> | |
| <rect width="120" height="120" fill="#f4ead5"/> | |
| <circle cx="20" cy="40" r="0.5" fill="#c9b88a" opacity="0.5"/> | |
| <circle cx="80" cy="80" r="0.6" fill="#b8a574" opacity="0.4"/> | |
| <circle cx="60" cy="20" r="0.4" fill="#c9b88a" opacity="0.4"/> | |
| <circle cx="100" cy="50" r="0.5" fill="#b8a574" opacity="0.3"/> | |
| </pattern> | |
| </defs> | |
| <rect width="600" height="280" fill="url(#paper-by)"/> | |
| <!-- inner border --> | |
| <rect x="8" y="8" width="584" height="264" fill="none" stroke="#2c4a2e" stroke-width="1"/> | |
| <!-- caption strip top-right (chapter mark) --> | |
| <g transform="translate(560,30)" text-anchor="end"> | |
| <text font-family="Georgia, serif" font-size="11" letter-spacing="3" fill="#2c4a2e">CH. I</text> | |
| </g> | |
| <!-- ground --> | |
| <line x1="20" y1="230" x2="580" y2="230" stroke="#2c4a2e" stroke-width="1.5"/> | |
| <!-- ground tufts --> | |
| <g stroke="#2c4a2e" stroke-width="0.8" fill="none"> | |
| <path d="M40,232 q3,-6 6,0"/> | |
| <path d="M55,232 q3,-5 6,0"/> | |
| <path d="M120,232 q3,-6 6,0"/> | |
| <path d="M155,232 q3,-5 6,0"/> | |
| <path d="M480,232 q3,-6 6,0"/> | |
| <path d="M510,232 q3,-5 6,0"/> | |
| <path d="M540,232 q3,-6 6,0"/> | |
| </g> | |
| <!-- distant rolling hills --> | |
| <path d="M0,230 q60,-30 120,-15 q60,15 130,-10 q70,-25 150,-5 q80,20 200,-8 L600,230 Z" fill="#2c4a2e" opacity="0.12"/> | |
| <!-- sun --> | |
| <g transform="translate(495,55)"> | |
| <circle r="22" fill="none" stroke="#d4a017" stroke-width="1.5"/> | |
| <circle r="14" fill="#d4a017" opacity="0.5"/> | |
| <g stroke="#d4a017" stroke-width="1.4" stroke-linecap="round"> | |
| <line x1="0" y1="-30" x2="0" y2="-38"/> | |
| <line x1="0" y1="30" x2="0" y2="38"/> | |
| <line x1="-30" y1="0" x2="-38" y2="0"/> | |
| <line x1="30" y1="0" x2="38" y2="0"/> | |
| <line x1="-21" y1="-21" x2="-27" y2="-27"/> | |
| <line x1="21" y1="-21" x2="27" y2="-27"/> | |
| <line x1="-21" y1="21" x2="-27" y2="27"/> | |
| <line x1="21" y1="21" x2="27" y2="27"/> | |
| </g> | |
| </g> | |
| <!-- house on the left --> | |
| <g transform="translate(60,100)"> | |
| <!-- body --> | |
| <rect x="0" y="50" width="130" height="80" fill="#f4ead5" stroke="#2c4a2e" stroke-width="2"/> | |
| <!-- roof --> | |
| <path d="M-16,50 L65,-5 L146,50 Z" fill="#b84a3e" stroke="#2c4a2e" stroke-width="2" stroke-linejoin="round"/> | |
| <!-- roof shingle lines --> | |
| <g stroke="#2c4a2e" stroke-width="0.6" opacity="0.4"> | |
| <line x1="-8" y1="40" x2="138" y2="40"/> | |
| <line x1="-2" y1="30" x2="132" y2="30"/> | |
| <line x1="6" y1="20" x2="124" y2="20"/> | |
| </g> | |
| <!-- chimney --> | |
| <rect x="95" y="10" width="16" height="26" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1.5"/> | |
| <!-- smoke --> | |
| <path d="M103,8 q-8,-10 0,-18 q8,-8 0,-16 q-6,-8 0,-12" stroke="#2c4a2e" stroke-width="1.4" fill="none" stroke-linecap="round" opacity="0.6"/> | |
| <!-- door --> | |
| <rect x="54" y="85" width="26" height="45" fill="#2c4a2e"/> | |
| <circle cx="73" cy="108" r="1.4" fill="#d4a017"/> | |
| <!-- doormat --> | |
| <rect x="48" y="128" width="38" height="4" fill="#6b4423" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <!-- windows --> | |
| <g stroke="#2c4a2e" stroke-width="1.5" fill="#d4a017" fill-opacity="0.25"> | |
| <rect x="14" y="65" width="26" height="26"/> | |
| <rect x="90" y="65" width="26" height="26"/> | |
| </g> | |
| <g stroke="#2c4a2e" stroke-width="1"> | |
| <line x1="14" y1="78" x2="40" y2="78"/> | |
| <line x1="27" y1="65" x2="27" y2="91"/> | |
| <line x1="90" y1="78" x2="116" y2="78"/> | |
| <line x1="103" y1="65" x2="103" y2="91"/> | |
| </g> | |
| <!-- window box with flowers --> | |
| <rect x="10" y="91" width="34" height="6" fill="#6b4423" stroke="#2c4a2e" stroke-width="1"/> | |
| <g> | |
| <line x1="16" y1="91" x2="16" y2="84" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <circle cx="16" cy="83" r="2" fill="#b84a3e" stroke="#2c4a2e" stroke-width="0.7"/> | |
| <line x1="24" y1="91" x2="24" y2="82" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <circle cx="24" cy="81" r="2" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.7"/> | |
| <line x1="32" y1="91" x2="32" y2="84" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <circle cx="32" cy="83" r="2" fill="#b84a3e" stroke="#2c4a2e" stroke-width="0.7"/> | |
| <line x1="38" y1="91" x2="38" y2="83" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <circle cx="38" cy="82" r="2" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.7"/> | |
| </g> | |
| </g> | |
| <!-- garden / vegetables on the right --> | |
| <g transform="translate(310,180)"> | |
| <!-- raised bed --> | |
| <rect x="0" y="20" width="170" height="30" fill="#6b4423" stroke="#2c4a2e" stroke-width="1.5"/> | |
| <line x1="0" y1="25" x2="170" y2="25" stroke="#2c4a2e" stroke-width="0.6" opacity="0.5"/> | |
| <!-- soil texture --> | |
| <g fill="#2c4a2e" opacity="0.5"> | |
| <circle cx="20" cy="35" r="1"/> | |
| <circle cx="40" cy="40" r="0.8"/> | |
| <circle cx="80" cy="36" r="1"/> | |
| <circle cx="120" cy="40" r="0.8"/> | |
| <circle cx="150" cy="35" r="1"/> | |
| </g> | |
| <!-- carrot tops --> | |
| <g transform="translate(20,20)" stroke="#2c4a2e" stroke-width="1" fill="#4a6f2c"> | |
| <path d="M0,0 q-4,-12 -2,-18 M0,0 q0,-14 0,-20 M0,0 q4,-12 2,-18" fill="none"/> | |
| </g> | |
| <g transform="translate(45,20)" stroke="#2c4a2e" stroke-width="1" fill="#4a6f2c"> | |
| <path d="M0,0 q-4,-10 -2,-15 M0,0 q0,-12 0,-17 M0,0 q4,-10 2,-15" fill="none"/> | |
| </g> | |
| <!-- tomato plant --> | |
| <g transform="translate(85,20)"> | |
| <line x1="0" y1="0" x2="0" y2="-32" stroke="#4a6f2c" stroke-width="1.5"/> | |
| <circle cx="-5" cy="-12" r="3" fill="#b84a3e" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <circle cx="6" cy="-18" r="3" fill="#b84a3e" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <circle cx="-3" cy="-26" r="3" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.8"/> | |
| <path d="M-8,-8 q-4,-2 -6,-6 M8,-22 q4,-2 6,-6" stroke="#4a6f2c" stroke-width="1.2" fill="none"/> | |
| </g> | |
| <!-- lettuce --> | |
| <g transform="translate(125,18)"> | |
| <ellipse cx="0" cy="-3" rx="9" ry="5" fill="#4a6f2c" stroke="#2c4a2e" stroke-width="1"/> | |
| <path d="M-7,-3 q-2,-4 0,-6 M0,-7 q0,-3 0,-5 M7,-3 q2,-4 0,-6" stroke="#2c4a2e" stroke-width="0.7" fill="none"/> | |
| </g> | |
| <g transform="translate(150,18)"> | |
| <ellipse cx="0" cy="-3" rx="9" ry="5" fill="#4a6f2c" stroke="#2c4a2e" stroke-width="1"/> | |
| <path d="M-7,-3 q-2,-4 0,-6 M0,-7 q0,-3 0,-5 M7,-3 q2,-4 0,-6" stroke="#2c4a2e" stroke-width="0.7" fill="none"/> | |
| </g> | |
| </g> | |
| <!-- the neighbor figure, at the door --> | |
| <g transform="translate(220,168)"> | |
| <!-- head --> | |
| <circle cx="0" cy="-32" r="8" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1.6"/> | |
| <!-- hair --> | |
| <path d="M-8,-32 q-2,-10 8,-10 q10,0 8,10" fill="#2c4a2e"/> | |
| <!-- body --> | |
| <path d="M-12,-22 L12,-22 L14,28 L-14,28 Z" fill="#4a6f2c" stroke="#2c4a2e" stroke-width="1.6"/> | |
| <!-- arm holding tablet --> | |
| <line x1="10" y1="-15" x2="22" y2="0" stroke="#2c4a2e" stroke-width="1.6" stroke-linecap="round"/> | |
| <line x1="-10" y1="-15" x2="-15" y2="5" stroke="#2c4a2e" stroke-width="1.6" stroke-linecap="round"/> | |
| <!-- tablet --> | |
| <rect x="18" y="-4" width="14" height="18" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1.5"/> | |
| <!-- tiny sparkle from the tablet --> | |
| <g transform="translate(36,2)" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.5"> | |
| <path d="M0,0 l1.5,3.5 l3.5,1.5 l-3.5,1.5 l-1.5,3.5 l-1.5,-3.5 l-3.5,-1.5 l3.5,-1.5 z"/> | |
| </g> | |
| <g transform="translate(46,-4)" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.5"> | |
| <path d="M0,0 l1,2.5 l2.5,1 l-2.5,1 l-1,2.5 l-1,-2.5 l-2.5,-1 l2.5,-1 z"/> | |
| </g> | |
| <!-- legs --> | |
| <line x1="-6" y1="28" x2="-8" y2="62" stroke="#2c4a2e" stroke-width="2.5" stroke-linecap="round"/> | |
| <line x1="6" y1="28" x2="8" y2="62" stroke="#2c4a2e" stroke-width="2.5" stroke-linecap="round"/> | |
| </g> | |
| <!-- fence on far left --> | |
| <g transform="translate(20,200)"> | |
| <g stroke="#2c4a2e" stroke-width="1.4" fill="none"> | |
| <path d="M0,30 L0,4 L4,0 L8,4 L8,30"/> | |
| <path d="M14,30 L14,4 L18,0 L22,4 L22,30"/> | |
| <line x1="-3" y1="14" x2="25" y2="14"/> | |
| <line x1="-3" y1="22" x2="25" y2="22"/> | |
| </g> | |
| </g> | |
| </svg> | |