BogaudioModules

BogaudioModules for VCV Rack
Log | Files | Refs | README | LICENSE

LPG-lowcontrast-pp.svg (19897B)


      1 <?xml version="1.0"?>
      2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="120.0" height="380.0" viewBox="0 0 120.0 380.0">
      3   <style>text {
      4   fill: #333;
      5   font-family: 'Roboto', sans-serif;
      6   font-weight: bold;
      7 }
      8 text.title {
      9   font-family: 'Comfortaa', sans-serif;
     10   font-weight: normal;
     11 }
     12 text.brand {
     13   font-family: 'Audiowide', sans-serif;
     14   font-weight: bold;
     15 }
     16 
     17 polyline {
     18   stroke: #333;
     19 }
     20 polyline.guide {
     21   stroke: #0f0;
     22 }
     23 path {
     24   stroke: #333;
     25 }
     26 
     27 rect.module-background, .background-fill {
     28   fill: #ddd;
     29 }
     30 polyline.module-border-inner {
     31   stroke: #e4e4e4;
     32 }
     33 polyline.module-border-middle {
     34   stroke: #ebebeb;
     35 }
     36 polyline.module-border-outer {
     37   stroke: #f2f2f2;
     38 }
     39 
     40 g.io-group {
     41 }
     42 rect.input-background, rect.input-background-filler {
     43   fill: #fafafa;
     44 }
     45 rect.output-background, rect.output-background-filler {
     46   fill: #bbb;
     47 }
     48 text.input-label, text.output-label {
     49   /* font-size: 6pt; */
     50 }
     51 polyline.input-label, polyline.output-label {
     52 }
     53 path.input-label, path.output-label {
     54 }
     55 
     56 circle.port-rim {
     57   stroke: #f0f0f0;
     58 }
     59 circle.port-barrel {
     60   stroke: #222;
     61   fill: #222;
     62 }
     63 circle.knob-center {
     64    fill: #eee;
     65 }
     66 circle.knob-rim {
     67    fill: #333;
     68 }
     69 circle.knob-tick {
     70   fill: #fff;
     71 }
     72 polyline.knob-tick {
     73   stroke: #fff;
     74 }
     75 
     76 
     77 text {
     78   fill: #b3b3b3;
     79 }
     80 
     81 polyline {
     82   stroke: #b3b3b3;
     83 }
     84 path {
     85   stroke: #b3b3b3;
     86 }
     87 
     88 rect.module-background, .background-fill {
     89   fill: #333;
     90 }
     91 polyline.module-border-inner {
     92   stroke: #191919;
     93 }
     94 polyline.module-border-middle {
     95   stroke: #111;
     96 }
     97 polyline.module-border-outer {
     98   stroke: #000;
     99 }
    100 
    101 rect.input-background, rect.input-background-filler {
    102   fill: #b3b3b3;
    103 }
    104 rect.output-background, rect.output-background-filler {
    105   fill: #888;
    106 }
    107 text.input-label {
    108   fill: #666;
    109 }
    110 polyline.input-label, path.input-label {
    111   stroke: #666;
    112 }
    113 text.output-label {
    114   fill: #ccc;
    115 }
    116 polyline.output-label, path.output-label {
    117   stroke: #ccc;
    118 }
    119 
    120 circle.port-rim {
    121   stroke: #bbb;
    122 }
    123 circle.port-barrel {
    124   stroke: #222;
    125   fill: #222;
    126 }
    127 circle.knob-center {
    128    fill: #bbb;
    129 }
    130 circle.knob-rim {
    131    fill: #555;
    132 }
    133 circle.knob-tick {
    134   fill: #fff;
    135 }
    136 polyline.knob-tick {
    137   stroke: #fff;
    138 }
    139 </style>
    140 
    141   
    142       
    143       <rect class="module-background background-fill" width="120.0" height="380.0"/>
    144     
    145       
    146       <polyline class="module-border-inner" points="1,1 119.0,1 119.0,379.0 1,379.0 1,1" stroke-width="0.5" fill="none"/>
    147       <polyline class="module-border-middle" points="0.5,0.5 119.5,0.5 119.5,379.5 0.5,379.5 0.5,0.5" stroke-width="0.8" fill="none"/>
    148       <polyline class="module-border-outer" points="0,0 120.0,0 120.0,380.0 0,380.0 0,0" stroke-width="1" fill="none"/>
    149     
    150       <text class="title" font-size="9pt" letter-spacing="3px" text-anchor="end" transform="translate(110.0 19)">LPG</text>
    151       <g transform="translate(5.5 374)">
    152         <text class="brand" font-size="6.5pt" letter-spacing="2px">BOGAUDIO</text>
    153         <rect class="background-fill" width="1.5" height="2" fill="#ddd" transform="translate(21 -4)"/>
    154       </g>
    155     
    156 
    157   
    158   
    159   
    160 
    161   <g transform="translate(0 40)">
    162     <text font-size="8pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(42.5 0)">RESPONSE</text>
    163     <g transform="translate(-3 -12.5)"><svg id="RESPONSE_PARAM">
    164       <g transform="translate(45 45)">
    165         <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
    166         <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
    167         <circle cx="0" cy="0" r="22" stroke-width="1" stroke="#00f" fill="none"/>
    168       </g>
    169     </svg></g>
    170     <g transform="translate(12 2.5)">
    171       <g transform="translate(30 30)">
    172         <polyline points="0,0 4.5,0" stroke-width="1.5" transform="rotate(-240) translate(25 0)"/>
    173         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-210) translate(25 0)"/>
    174         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-180) translate(25 0)"/>
    175         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-150) translate(25 0)"/>
    176         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-120) translate(25 0)"/>
    177         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-90) translate(25 0)"/>
    178         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-60) translate(25 0)"/>
    179         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-30) translate(25 0)"/>
    180         <polyline points="0,0 3,0" stroke-width="0.7" transform="translate(25 0)"/>
    181         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(30) translate(25 0)"/>
    182         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(60) translate(25 0)"/>
    183 
    184         <polyline points="-3,0 3,0" stroke-width="1.0"/>
    185         <polyline points="0,-3 0,3" stroke-width="1.0"/>
    186       </g>
    187     </g>
    188 
    189     <g transform="translate(26 67)">
    190       <text font-size="5pt" letter-spacing="1px" transform="translate(12 6)">LONG</text>
    191       <g transform="translate(0 -1)"><svg id="LONG_PARAM">
    192       <g transform="translate(4.5 4.5)">
    193         <circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
    194       </g>
    195     </svg></g>
    196     </g>
    197   </g>
    198 
    199   <g transform="translate(88 40)">
    200     <g transform="translate(0 0)">
    201       <text font-size="8pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(8 0)">RISE</text>
    202       <g transform="translate(0 10)"><svg id="RISE_SHAPE_PARAM">
    203       <g transform="translate(8 8)">
    204         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    205         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    206         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    207       </g>
    208     </svg></g>
    209       <g transform="translate(-12 -2)">
    210       <g transform="translate(20 20)">
    211         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-52.5) translate(10 0)"/>
    212         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-15) translate(10 0)"/>
    213         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(22.5) translate(10 0)"/>
    214 
    215         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-127.5) translate(10 0)"/>
    216         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-165) translate(10 0)"/>
    217         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-202.5) translate(10 0)"/>
    218 
    219         <path d="M -3.5 0 Q 0 3.5, 3.5 0" stroke-width="1" stroke="#b3b3b3" fill="none" transform="rotate(60) translate(13 0) rotate(-60) translate(2 0) rotate(-45) translate(0 0)"/>
    220         <polyline points="-3.5,0 3.5,0" stroke-width="1" fill="none" transform="rotate(-90) translate(13 0) rotate(90) rotate(-45) translate(0 0)"/>
    221         <path d="M -3.5 0 Q 0 3.5, 3.5 0" stroke-width="1" stroke="#b3b3b3" fill="none" transform="rotate(-240) translate(13 0) rotate(240) translate(-2 0) rotate(135) translate(0 0)"/>
    222 
    223         <polyline points="-3,0 3,0" stroke-width="1.0"/>
    224         <polyline points="0,-3 0,3" stroke-width="1.0"/>
    225       </g>
    226     </g>
    227     </g>
    228 
    229     <g transform="translate(0 45)">
    230       <text font-size="7pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(8 0)">FALL</text>
    231       <g transform="translate(0 10)"><svg id="FALL_SHAPE_PARAM">
    232       <g transform="translate(8 8)">
    233         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    234         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    235         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    236       </g>
    237     </svg></g>
    238       <g transform="translate(-12 -2)">
    239       <g transform="translate(20 20)">
    240         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-52.5) translate(10 0)"/>
    241         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-15) translate(10 0)"/>
    242         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(22.5) translate(10 0)"/>
    243 
    244         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-127.5) translate(10 0)"/>
    245         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-165) translate(10 0)"/>
    246         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-202.5) translate(10 0)"/>
    247 
    248         <path d="M -3.5 0 Q 0 3.5, 3.5 0" stroke-width="1" stroke="#b3b3b3" fill="none" transform="rotate(60) translate(13 0) rotate(-60) translate(2 0) rotate(-135) translate(0 0)"/>
    249         <polyline points="-3.5,0 3.5,0" stroke-width="1" fill="none" transform="rotate(-90) translate(13 0) rotate(90) rotate(45) translate(0 0)"/>
    250         <path d="M -3.5 0 Q 0 3.5, 3.5 0" stroke-width="1" stroke="#b3b3b3" fill="none" transform="rotate(-240) translate(13 0) rotate(240) translate(-2 0) rotate(45) translate(0 0)"/>
    251 
    252         <polyline points="-3,0 3,0" stroke-width="1.0"/>
    253         <polyline points="0,-3 0,3" stroke-width="1.0"/>
    254       </g>
    255     </g>
    256     </g>
    257   </g>
    258 
    259   <g transform="translate(5 134)">
    260     
    261     <text font-size="9pt" letter-spacing="2px" text-anchor="middle" transform="translate(11 26) rotate(-90)">LPF</text>
    262 
    263     <g transform="translate(18 0)">
    264       <g transform="translate(3.5 0)">
    265         
    266         <g transform="translate(0.5 8)">
    267           <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 0)">ENV</text>
    268           <g transform="translate(0 10.0)"><svg id="LPF_ENV_PARAM">
    269       <g transform="translate(14.5 14.5)">
    270         <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
    271         <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
    272         <circle cx="0" cy="0" r="14" stroke-width="1" stroke="#00f" fill="none"/>
    273       </g>
    274     </svg></g>
    275           <g transform="translate(0 10.0)">
    276       <g transform="translate(14.5 14.5)">
    277         <text font-size="9.0pt" text-align="middle" transform="rotate(-240) translate(18 0) rotate(240) translate(-2.2 3.6)">-</text>
    278         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-210) translate(16 0)"/>
    279         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-180) translate(16 0)"/>
    280         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-150) translate(16 0)"/>
    281         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-120) translate(16 0)"/>
    282         <text font-size="5.0pt" text-align="middle" transform="rotate(-90) translate(19 0) rotate(90) translate(-2 2)">0</text>
    283         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-60) translate(16 0)"/>
    284         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-30) translate(16 0)"/>
    285         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="translate(16 0)"/>
    286         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(30) translate(16 0)"/>
    287         <text font-size="5.0pt" text-align="middle" transform="rotate(60) translate(18 0) rotate(-60) translate(-2 2)">+</text>
    288       </g>
    289     </g>
    290         </g>
    291       </g>
    292 
    293       <g transform="translate(52 0)">
    294         
    295         <g transform="translate(0.5 8)">
    296           <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 0)">BIAS</text>
    297           <g transform="translate(0 10.0)"><svg id="LPF_BIAS_PARAM">
    298       <g transform="translate(14.5 14.5)">
    299         <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
    300         <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
    301         <circle cx="0" cy="0" r="14" stroke-width="1" stroke="#00f" fill="none"/>
    302       </g>
    303     </svg></g>
    304           <g transform="translate(-11 2.0)">
    305       <g transform="translate(25.5 22.5)">
    306         <text font-size="5pt" transform="rotate(60) translate(17 0) rotate(-60) translate(0 4)">20K</text>
    307         <text font-size="5pt" transform="rotate(-90) translate(19 0) rotate(90) translate(-4 2.2)">5K</text>
    308         <text font-size="5pt" transform="rotate(-172.9) translate(19 0) rotate(172.9) translate(-5 2.2)">1K</text>
    309         <text font-size="5pt" transform="rotate(-240) translate(17 0) rotate(240) translate(-12 4)">0HZ</text>
    310 
    311         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(19.8) translate(17 0)"/>
    312         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-27.9) translate(17 0)"/>
    313         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-133.9) translate(17 0)"/>
    314         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-192.6) translate(17 0)"/>
    315 
    316         <polyline points="-3,0 3,0" stroke-width="1.0"/>
    317         <polyline points="0,-3 0,3" stroke-width="1.0"/>
    318       </g>
    319     </g>
    320         </g>
    321       </g>
    322     </g>
    323   </g>
    324 
    325   <g transform="translate(5 201)">
    326     
    327     <text font-size="9pt" letter-spacing="2px" text-anchor="middle" transform="translate(11 34) rotate(-90)">VCA</text>
    328 
    329     <g transform="translate(22 0)">
    330       <g transform="translate(0 0)">
    331         
    332         <g transform="translate(0.5 8)">
    333           <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 0)">ENV</text>
    334           <g transform="translate(0 10.0)"><svg id="VCA_ENV_PARAM">
    335       <g transform="translate(14.5 14.5)">
    336         <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
    337         <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
    338         <circle cx="0" cy="0" r="14" stroke-width="1" stroke="#00f" fill="none"/>
    339       </g>
    340     </svg></g>
    341           <g transform="translate(0 10.0)">
    342       <g transform="translate(14.5 14.5)">
    343         <text font-size="9.0pt" text-align="middle" transform="rotate(-240) translate(18 0) rotate(240) translate(-2.2 3.6)">-</text>
    344         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-210) translate(16 0)"/>
    345         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-180) translate(16 0)"/>
    346         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-150) translate(16 0)"/>
    347         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-120) translate(16 0)"/>
    348         <text font-size="5.0pt" text-align="middle" transform="rotate(-90) translate(19 0) rotate(90) translate(-2 2)">0</text>
    349         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-60) translate(16 0)"/>
    350         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-30) translate(16 0)"/>
    351         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="translate(16 0)"/>
    352         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(30) translate(16 0)"/>
    353         <text font-size="5.0pt" text-align="middle" transform="rotate(60) translate(18 0) rotate(-60) translate(-2 2)">+</text>
    354       </g>
    355     </g>
    356         </g>
    357       </g>
    358 
    359       <g transform="translate(47.5 0)">
    360         
    361         <g transform="translate(0.5 8)">
    362           <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 0)">BIAS</text>
    363           <g transform="translate(0 10.0)"><svg id="VCA_BIAS_PARAM">
    364       <g transform="translate(14.5 14.5)">
    365         <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
    366         <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
    367         <circle cx="0" cy="0" r="14" stroke-width="1" stroke="#00f" fill="none"/>
    368       </g>
    369     </svg></g>
    370           <g transform="translate(0 10.0)">
    371       <g transform="translate(14.5 14.5)">
    372         <polyline points="0,0 4,0" stroke-width="1.5" transform="rotate(-240) translate(16 0)"/>
    373         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-210) translate(16 0)"/>
    374         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-180) translate(16 0)"/>
    375         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-150) translate(16 0)"/>
    376         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-120) translate(16 0)"/>
    377         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-90) translate(16 0)"/>
    378         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-60) translate(16 0)"/>
    379         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-30) translate(16 0)"/>
    380         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="translate(16 0)"/>
    381         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(30) translate(16 0)"/>
    382         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(60) translate(16 0)"/>
    383 
    384         <polyline points="-3,0 3,0" stroke-width="1.0"/>
    385         <polyline points="0,-3 0,3" stroke-width="1.0"/>
    386       </g>
    387     </g>
    388         </g>
    389       </g>
    390     </g>
    391 
    392     <g transform="translate(40 58)">
    393       <text font-size="5pt" letter-spacing="1px" transform="translate(12 6)">LINEAR</text>
    394       <g transform="translate(0 -1)"><svg id="LINEAR_VCA_PARAM">
    395       <g transform="translate(4.5 4.5)">
    396         <circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
    397       </g>
    398     </svg></g>
    399     </g>
    400   </g>
    401 
    402   <g class="io-group" transform="translate(8 284)">
    403     <rect class="input-background" width="90" height="75" rx="5" transform="translate(7 0)"/>
    404     <rect class="input-background-filler" width="10" height="10" transform="translate(117 27.5)"/>
    405 
    406     <g transform="translate(10.5 3)"><svg id="RESPONSE_INPUT">
    407       <g transform="translate(12 12)">
    408         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    409         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    410       </g>
    411     </svg></g>
    412     <text class="input-label" font-size="5pt" letter-spacing="2px" text-anchor="middle" transform="translate(22.5 35)">RESP</text>
    413     <g transform="translate(40.5 3)"><svg id="LPF_INPUT">
    414       <g transform="translate(12 12)">
    415         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    416         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    417       </g>
    418     </svg></g>
    419     <text class="input-label" font-size="5pt" letter-spacing="2px" text-anchor="middle" transform="translate(52.5 35)">LPF</text>
    420     <g transform="translate(70.5 3)"><svg id="VCA_INPUT">
    421       <g transform="translate(12 12)">
    422         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    423         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    424       </g>
    425     </svg></g>
    426     <text class="input-label" font-size="5pt" letter-spacing="2px" text-anchor="middle" transform="translate(82.5 35)">VCA</text>
    427 
    428     <rect class="output-background" width="30" height="37.5" rx="5" transform="translate(67 37.5)"/>
    429     <rect class="output-background-filler" width="30" height="10" transform="translate(67 37.5)"/>
    430     <rect class="output-background-filler" width="10" height="10" transform="translate(67 65)"/>
    431     <g transform="translate(10.5 40)"><svg id="GATE_INPUT">
    432       <g transform="translate(12 12)">
    433         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    434         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    435       </g>
    436     </svg></g>
    437     <text class="output-label" font-size="5pt" letter-spacing="2px" text-anchor="middle" transform="translate(22.5 72)">TRIG</text>
    438     <g transform="translate(40.5 40)"><svg id="IN_INPUT">
    439       <g transform="translate(12 12)">
    440         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    441         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    442       </g>
    443     </svg></g>
    444     <text class="output-label" font-size="5pt" letter-spacing="2px" text-anchor="middle" transform="translate(52.5 72)">IN</text>
    445     <g transform="translate(70.5 40)"><svg id="OUT_OUTPUT">
    446       <g transform="translate(12 12)">
    447         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    448         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    449       </g>
    450     </svg></g>
    451     <text class="output-label" font-size="5pt" letter-spacing="2px" text-anchor="middle" transform="translate(82.5 72)">OUT</text>
    452   </g>
    453 </svg>