Programmatically generate SVG (vector) images, animations, and interactive Jupyter widgets
1<?xml version="1.0" encoding="UTF-8"?> 2<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 3 width="300" height="300" viewBox="0 0 300 300"> 4<defs> 5<g id="clip30"> 6<rect x="0" y="50" width="90" height="60" fill="#999" /> 7<circle cx="25" cy="25" r="25" fill="#666" /> 8<path d="M30,0 L80,0 L80,100 Z" fill="#ccc" /> 9</g> 10<path d="M5,55 C25,5,45,-25,75,55 C85,85,20,105,40,55 Z" stroke="black" stroke-width="1" stroke-dasharray="3 2" fill="none" id="clip31" /> 11<clipPath id="clip32"> 12<use xlink:href="#clip31" x="0" y="0" /> 13</clipPath> 14<text x="20" y="20" font-size="48" font-weight="bold" transform="rotate(60)" stroke="black" stroke-width="1" stroke-dasharray="3 2" fill="none" id="clip33">CLIP</text> 15<clipPath id="clip34"> 16<use xlink:href="#clip33" x="0" y="0" /> 17</clipPath> 18</defs> 19<use xlink:href="#clip30" x="0" y="0" clip-path="url(#clip32)" /> 20<g transform="translate(100,0)"> 21<use xlink:href="#clip30" /> 22<use xlink:href="#clip31" x="0" y="0" /> 23</g> 24<use xlink:href="#clip30" x="0" y="150" clip-path="url(#clip34)" /> 25<g transform="translate(100,150)"> 26<use xlink:href="#clip30" /> 27<use xlink:href="#clip33" x="0" y="0" /> 28</g> 29</svg>