BogaudioModules

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

EightFO-pp.svg (33925B)


      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="255.0" height="380.0" viewBox="0 0 255.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 </style>
     76 
     77   
     78       
     79       <rect class="module-background background-fill" width="255.0" height="380.0"/>
     80     
     81       
     82       <polyline class="module-border-inner" points="1,1 254.0,1 254.0,379.0 1,379.0 1,1" stroke-width="0.5" fill="none"/>
     83       <polyline class="module-border-middle" points="0.5,0.5 254.5,0.5 254.5,379.5 0.5,379.5 0.5,0.5" stroke-width="0.8" fill="none"/>
     84       <polyline class="module-border-outer" points="0,0 255.0,0 255.0,380.0 0,380.0 0,0" stroke-width="1" fill="none"/>
     85     
     86       <text class="title" font-size="12pt" letter-spacing="4px" text-anchor="middle" transform="translate(127.5 19)">8FO</text>
     87       <g transform="translate(0 374)">
     88         <text class="brand" font-size="8pt" letter-spacing="2px" text-anchor="middle" transform="translate(127.5 0)">BOGAUDIO</text>
     89         <rect class="background-fill" width="3" height="3" transform="translate(112.0 -5)"/>
     90       </g>
     91     
     92 
     93   <g transform="translate(20 25)">
     94     
     95     
     96     
     97     
     98     
     99     <g transform="translate(20 20)"><svg id="FREQUENCY_PARAM">
    100       <g transform="translate(34 34)">
    101         <polyline points="-10,0 10,0" stroke-width="1" stroke="#00f"/>
    102         <polyline points="0,-10 0,10" stroke-width="1" stroke="#00f"/>
    103         <circle cx="0" cy="0" r="33.5" stroke-width="1" stroke="#00f" fill="none"/>
    104       </g>
    105     </svg></g>
    106   </g>
    107   <g transform="translate(10 15)">
    108       <g transform="translate(64 64)">
    109         <g transform="rotate(-225.08) translate(34 0)">
    110           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    111           <text font-size="7.0pt" transform="translate(14 0) rotate(225.08) translate(-10.5 3.5)">0.1</text>
    112         </g>
    113         <g transform="rotate(-171.49) translate(34 0)">
    114           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    115           <text font-size="7.0pt" transform="translate(14 0) rotate(171.49) translate(-11 3.5)">0.5</text>
    116         </g>
    117         <g transform="rotate(-71.76) translate(34 0)">
    118           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    119           <text font-size="7.0pt" transform="translate(14 0) rotate(71.76) translate(-2 3.5)">10</text>
    120         </g>
    121         <g transform="rotate(-124.62) translate(34 0)">
    122           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    123           <text font-size="7.0pt" letter-spacing="1px" transform="translate(14 0) rotate(124.62) translate(-10 3.5)">0V</text>
    124         </g>
    125         <g transform="rotate(-18.17) translate(34 0)">
    126           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    127           <text font-size="7.0pt" transform="translate(14 0) rotate(18.17) translate(-2 3.5)">50</text>
    128         </g>
    129         <g transform="rotate(27.98) translate(34 0)">
    130           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    131           <text font-size="7.0pt" transform="translate(14 0) rotate(-27.98) translate(-2 3.5)">200</text>
    132         </g>
    133         <g transform="rotate(51.05) translate(34 0)">
    134           <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
    135           <text font-size="7.0pt" transform="translate(14 0) rotate(-51.05) translate(-2 3.5)">400HZ</text>
    136         </g>
    137 
    138         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-240) translate(37 0)"/>
    139         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-216.92) translate(37 0)"/>
    140 
    141         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-193.85) translate(37 0)"/>
    142         
    143 
    144         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-147.69) translate(37 0)"/>
    145         
    146 
    147         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-101.54) translate(37 0)"/>
    148         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-78.46) translate(37 0)"/>
    149 
    150         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-55.38) translate(37 0)"/>
    151         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-32.31) translate(37 0)"/>
    152 
    153         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-9.23) translate(37 0)"/>
    154         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(13.85) translate(37 0)"/>
    155 
    156         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(36.92) translate(37 0)"/>
    157         <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(60) translate(37 0)"/>
    158       </g>
    159     </g>
    160 
    161   
    162   
    163   <text font-size="6pt" letter-spacing="1px" transform="translate(34 130)">0V = C-3 = 2.04HZ</text>
    164 
    165   <g transform="translate(10 141)">
    166     <text font-size="6pt" letter-spacing="2px" transform="translate(9 6.1)">SLOW</text>
    167     <g transform="translate(40 -1.3)"><svg id="SLOW_PARAM">
    168       <g transform="translate(4.5 4.5)">
    169         <circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
    170       </g>
    171     </svg></g>
    172   </g>
    173 
    174   <g transform="translate(20 173)">
    175     <g transform="translate(0 5)"><svg id="WAVE_PARAM">
    176       <g transform="translate(8 8)">
    177         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    178         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    179         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    180       </g>
    181     </svg></g>
    182     
    183     <g transform="translate(-12 -22)">
    184       
    185       <g transform="translate(20 35)">
    186         
    187         <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
    188         <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
    189         <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
    190         <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
    191         <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
    192         <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
    193       </g>
    194       <g transform="translate(13 8)">
    195         
    196         <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
    197       </g>
    198       <g transform="translate(30 11)">
    199         
    200         <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
    201       </g>
    202       <g transform="translate(38 24)">
    203         
    204         <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#333" fill="none"/>
    205         <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#333" fill="none"/>
    206       </g>
    207       <g transform="translate(38 38)">
    208         
    209         <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
    210       </g>
    211       <g transform="translate(30 51)">
    212         
    213         <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
    214       </g>
    215       <g transform="translate(13 54)">
    216         
    217         <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
    218       </g>
    219     </g>
    220   </g>
    221 
    222   <g transform="translate(80 143)">
    223     
    224     
    225     
    226     
    227     <text font-size="8pt" letter-spacing="1px" transform="translate(8 29) rotate(270)">S/PW</text>
    228     <g transform="translate(20 0)"><svg id="SAMPLE_PWM_PARAM">
    229       <g transform="translate(13 13)">
    230         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    231         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    232         <circle cx="0" cy="0" r="12.5" stroke-width="1" stroke="#00f" fill="none"/>
    233       </g>
    234     </svg></g>
    235     <g transform="translate(10.5 -9.6)">
    236       <g transform="translate(22.5 22.5)">
    237         <g transform="rotate(-240) translate(15 0)">
    238           <text font-size="9.0pt" transform="translate(3 0) rotate(240) translate(-2.2 3.6)">-</text>
    239         </g>
    240         <g transform="rotate(-210) translate(15 0)">
    241           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    242         </g>
    243         <g transform="rotate(-180) translate(15 0)">
    244           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    245         </g>
    246         <g transform="rotate(-150) translate(15 0)">
    247           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    248         </g>
    249         <g transform="rotate(-120) translate(15 0)">
    250           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    251         </g>
    252         <g transform="rotate(-90) translate(15 0)">
    253           <text font-size="5.0pt" transform="translate(2 0) rotate(90) translate(-2 2)">0</text>
    254         </g>
    255         <g transform="rotate(-60) translate(15 0)">
    256           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    257         </g>
    258         <g transform="rotate(-30) translate(15 0)">
    259           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    260         </g>
    261         <g transform="rotate(0) translate(15 0)">
    262           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    263         </g>
    264         <g transform="rotate(30) translate(15 0)">
    265           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    266         </g>
    267         <g transform="rotate(60) translate(15 0)">
    268           <text font-size="5.0pt" transform="translate(3 0) rotate(-60) translate(-2 2)">+</text>
    269         </g>
    270       </g>
    271     </g>
    272   </g>
    273 
    274   <g transform="translate(80 190)">
    275     
    276     
    277     
    278     
    279     <text font-size="8pt" letter-spacing="1px" transform="translate(8 31) rotate(270)">SMTH</text>
    280     <g transform="translate(20 0)"><svg id="SMOOTH_PARAM">
    281       <g transform="translate(13 13)">
    282         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    283         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    284         <circle cx="0" cy="0" r="12.5" stroke-width="1" stroke="#00f" fill="none"/>
    285       </g>
    286     </svg></g>
    287     <g transform="translate(10.5 -9.6)">
    288       <g transform="translate(22.5 22.5)">
    289         <text font-size="5.0pt" transform="rotate(-240) translate(18 0) rotate(240) translate(-2 2)">0</text>
    290         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-210) translate(15 0)"/>
    291         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-180) translate(15 0)"/>
    292         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-150) translate(15 0)"/>
    293         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-120) translate(15 0)"/>
    294         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-90) translate(15 0)"/>
    295         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-60) translate(15 0)"/>
    296         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-30) translate(15 0)"/>
    297         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(0) translate(15 0)"/>
    298         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(30) translate(15 0)"/>
    299         <polyline points="0,0 3.5,0" stroke-width="1" transform="rotate(60) translate(15 0)"/>
    300       </g>
    301     </g>
    302   </g>
    303 
    304   
    305   <g transform="translate(10 235)">
    306     
    307     
    308     
    309     
    310     <g transform="translate(10 0)">
    311       <text font-size="8pt" letter-spacing="1px" transform="translate(8 34.5) rotate(270)">OFFSET</text>
    312       <g transform="translate(20 0)"><svg id="OFFSET_PARAM">
    313       <g transform="translate(13 13)">
    314         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    315         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    316         <circle cx="0" cy="0" r="12.5" stroke-width="1" stroke="#00f" fill="none"/>
    317       </g>
    318     </svg></g>
    319     </g>
    320     <g transform="translate(20.5 -9.6)">
    321       <g transform="translate(22.5 22.5)">
    322         <g transform="rotate(-240) translate(15 0)">
    323           <text font-size="9.0pt" transform="translate(3 0) rotate(240) translate(-2.2 3.6)">-</text>
    324         </g>
    325         <g transform="rotate(-210) translate(15 0)">
    326           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    327         </g>
    328         <g transform="rotate(-180) translate(15 0)">
    329           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    330         </g>
    331         <g transform="rotate(-150) translate(15 0)">
    332           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    333         </g>
    334         <g transform="rotate(-120) translate(15 0)">
    335           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    336         </g>
    337         <g transform="rotate(-90) translate(15 0)">
    338           <text font-size="5.0pt" transform="translate(2 0) rotate(90) translate(-2 2)">0</text>
    339         </g>
    340         <g transform="rotate(-60) translate(15 0)">
    341           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    342         </g>
    343         <g transform="rotate(-30) translate(15 0)">
    344           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    345         </g>
    346         <g transform="rotate(0) translate(15 0)">
    347           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    348         </g>
    349         <g transform="rotate(30) translate(15 0)">
    350           <polyline points="0,0 2.5,0" stroke-width="0.7"/>
    351         </g>
    352         <g transform="rotate(60) translate(15 0)">
    353           <text font-size="5.0pt" transform="translate(3 0) rotate(-60) translate(-2 2)">+</text>
    354         </g>
    355       </g>
    356     </g>
    357     <g transform="translate(70 0)">
    358       <text font-size="8pt" letter-spacing="1px" transform="translate(8 33) rotate(270)">SCALE</text>
    359       <g transform="translate(20 0)"><svg id="SCALE_PARAM">
    360       <g transform="translate(13 13)">
    361         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    362         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    363         <circle cx="0" cy="0" r="12.5" stroke-width="1" stroke="#00f" fill="none"/>
    364       </g>
    365     </svg></g>
    366     </g>
    367     <g transform="translate(80.5 -9.6)">
    368       <g transform="translate(22.5 22.5)">
    369         <text font-size="5.0pt" transform="rotate(-240) translate(18 0) rotate(240) translate(-2 2)">0</text>
    370         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-210) translate(15 0)"/>
    371         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-180) translate(15 0)"/>
    372         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-150) translate(15 0)"/>
    373         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-120) translate(15 0)"/>
    374         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-90) translate(15 0)"/>
    375         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-60) translate(15 0)"/>
    376         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(-30) translate(15 0)"/>
    377         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(0) translate(15 0)"/>
    378         <polyline points="0,0 2.5,0" stroke-width="0.7" transform="rotate(30) translate(15 0)"/>
    379         <polyline points="0,0 3.5,0" stroke-width="1" transform="rotate(60) translate(15 0)"/>
    380       </g>
    381     </g>
    382   </g>
    383 
    384   <g transform="translate(137 32)">
    385     <g transform="translate(3 4)">
    386       <g transform="translate(0 0)">
    387         <g transform="translate(4 4)"><svg id="PHASE7_PARAM">
    388       <g transform="translate(8 8)">
    389         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    390         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    391         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    392       </g>
    393     </svg></g>
    394       </g>
    395       <g transform="translate(0 40)">
    396         <g transform="translate(4 4)"><svg id="PHASE6_PARAM">
    397       <g transform="translate(8 8)">
    398         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    399         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    400         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    401       </g>
    402     </svg></g>
    403       </g>
    404       <g transform="translate(0 80)">
    405         <g transform="translate(4 4)"><svg id="PHASE5_PARAM">
    406       <g transform="translate(8 8)">
    407         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    408         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    409         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    410       </g>
    411     </svg></g>
    412       </g>
    413       <g transform="translate(0 120)">
    414         <g transform="translate(4 4)"><svg id="PHASE4_PARAM">
    415       <g transform="translate(8 8)">
    416         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    417         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    418         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    419       </g>
    420     </svg></g>
    421       </g>
    422 
    423       <g transform="translate(0 160)">
    424         <g transform="translate(4 4)"><svg id="PHASE3_PARAM">
    425       <g transform="translate(8 8)">
    426         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    427         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    428         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    429       </g>
    430     </svg></g>
    431       </g>
    432       <g transform="translate(0 200)">
    433         <g transform="translate(4 4)"><svg id="PHASE2_PARAM">
    434       <g transform="translate(8 8)">
    435         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    436         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    437         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    438       </g>
    439     </svg></g>
    440       </g>
    441       <g transform="translate(0 240)">
    442         <g transform="translate(4 4)"><svg id="PHASE1_PARAM">
    443       <g transform="translate(8 8)">
    444         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    445         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    446         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    447       </g>
    448     </svg></g>
    449       </g>
    450       <g transform="translate(0 280)">
    451         
    452         <g transform="translate(4 4)"><svg id="PHASE0_PARAM">
    453       <g transform="translate(8 8)">
    454         <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
    455         <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
    456         <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
    457       </g>
    458     </svg></g>
    459       </g>
    460     </g>
    461   </g>
    462 
    463   <g transform="translate(137 36)">
    464     <g transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)">
    465       <g transform="translate(20 20)">
    466         <g transform="rotate(-90) translate(10 0)">
    467           <polyline points="0,0 4,0" stroke-width="1"/>
    468         </g>
    469         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    470         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    471         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    472         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    473       </g>
    474     </g>
    475     <g transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)">
    476       <g transform="translate(20 20)">
    477         <g transform="rotate(-90) translate(10 0)">
    478           <polyline points="0,0 4,0" stroke-width="1"/>
    479         </g>
    480         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    481         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    482         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    483         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    484       </g>
    485     </g>
    486     <g transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)">
    487       <g transform="translate(20 20)">
    488         <g transform="rotate(-90) translate(10 0)">
    489           <polyline points="0,0 4,0" stroke-width="1"/>
    490         </g>
    491         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    492         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    493         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    494         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    495       </g>
    496     </g>
    497     <g transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)">
    498       <g transform="translate(20 20)">
    499         <g transform="rotate(-90) translate(10 0)">
    500           <polyline points="0,0 4,0" stroke-width="1"/>
    501         </g>
    502         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    503         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    504         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    505         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    506       </g>
    507     </g>
    508 
    509     <g transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)">
    510       <g transform="translate(20 20)">
    511         <g transform="rotate(-90) translate(10 0)">
    512           <polyline points="0,0 4,0" stroke-width="1"/>
    513         </g>
    514         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    515         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    516         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    517         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    518       </g>
    519     </g>
    520     <g transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)">
    521       <g transform="translate(20 20)">
    522         <g transform="rotate(-90) translate(10 0)">
    523           <polyline points="0,0 4,0" stroke-width="1"/>
    524         </g>
    525         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    526         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    527         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    528         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    529       </g>
    530     </g>
    531     <g transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)">
    532       <g transform="translate(20 20)">
    533         <g transform="rotate(-90) translate(10 0)">
    534           <polyline points="0,0 4,0" stroke-width="1"/>
    535         </g>
    536         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    537         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    538         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    539         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    540       </g>
    541     </g>
    542     <g transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)">
    543       <g transform="translate(20 20)">
    544         <g transform="rotate(-90) translate(10 0)">
    545           <polyline points="0,0 4,0" stroke-width="1"/>
    546         </g>
    547         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(20)"/>
    548         <path d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(43)"/>
    549         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-20)"/>
    550         <path d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#333" fill="none" transform="rotate(-43)"/>
    551       </g>
    552     </g>
    553   </g>
    554 
    555   <g class="io-group" transform="translate(176 32)">
    556     <rect class="input-background" width="30" height="328" rx="5"/>
    557     <g transform="translate(3 4)">
    558       <g transform="translate(0 0)"><svg id="PHASE7_INPUT">
    559       <g transform="translate(12 12)">
    560         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    561         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    562       </g>
    563     </svg></g>
    564       <g transform="translate(0 40)"><svg id="PHASE6_INPUT">
    565       <g transform="translate(12 12)">
    566         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    567         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    568       </g>
    569     </svg></g>
    570       <g transform="translate(0 80)"><svg id="PHASE5_INPUT">
    571       <g transform="translate(12 12)">
    572         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    573         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    574       </g>
    575     </svg></g>
    576       <g transform="translate(0 120)"><svg id="PHASE4_INPUT">
    577       <g transform="translate(12 12)">
    578         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    579         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    580       </g>
    581     </svg></g>
    582 
    583       <g transform="translate(0 160)"><svg id="PHASE3_INPUT">
    584       <g transform="translate(12 12)">
    585         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    586         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    587       </g>
    588     </svg></g>
    589       <g transform="translate(0 200)"><svg id="PHASE2_INPUT">
    590       <g transform="translate(12 12)">
    591         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    592         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    593       </g>
    594     </svg></g>
    595       <g transform="translate(0 240)"><svg id="PHASE1_INPUT">
    596       <g transform="translate(12 12)">
    597         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    598         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    599       </g>
    600     </svg></g>
    601       <g transform="translate(0 280)"><svg id="PHASE0_INPUT">
    602       <g transform="translate(12 12)">
    603         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    604         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    605       </g>
    606     </svg></g>
    607     </g>
    608     <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5 320)">PHS</text>
    609   </g>
    610 
    611   <g class="io-group" transform="translate(215 32)">
    612     <rect class="output-background" width="30" height="328" rx="5"/>
    613     <g transform="translate(3 4)">
    614       <g transform="translate(0 0)"><svg id="PHASE7_OUTPUT">
    615       <g transform="translate(12 12)">
    616         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    617         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    618       </g>
    619     </svg></g>
    620       <g transform="translate(0 40)"><svg id="PHASE6_OUTPUT">
    621       <g transform="translate(12 12)">
    622         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    623         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    624       </g>
    625     </svg></g>
    626       <g transform="translate(0 80)"><svg id="PHASE5_OUTPUT">
    627       <g transform="translate(12 12)">
    628         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    629         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    630       </g>
    631     </svg></g>
    632       <g transform="translate(0 120)"><svg id="PHASE4_OUTPUT">
    633       <g transform="translate(12 12)">
    634         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    635         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    636       </g>
    637     </svg></g>
    638 
    639       <g transform="translate(0 160)"><svg id="PHASE3_OUTPUT">
    640       <g transform="translate(12 12)">
    641         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    642         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    643       </g>
    644     </svg></g>
    645       <g transform="translate(0 200)"><svg id="PHASE2_OUTPUT">
    646       <g transform="translate(12 12)">
    647         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    648         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    649       </g>
    650     </svg></g>
    651       <g transform="translate(0 240)"><svg id="PHASE1_OUTPUT">
    652       <g transform="translate(12 12)">
    653         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    654         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    655       </g>
    656     </svg></g>
    657       <g transform="translate(0 280)"><svg id="PHASE0_OUTPUT">
    658       <g transform="translate(12 12)">
    659         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
    660         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
    661       </g>
    662     </svg></g>
    663     </g>
    664     <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 320)">OUT</text>
    665   </g>
    666 
    667   
    668   
    669   
    670   <g class="io-group" transform="translate(7 313)">
    671     <rect class="input-background" width="108" height="87" rx="5" transform="translate(10 -40)"/>
    672     
    673     <g transform="translate(10 -40)">
    674       
    675       <g transform="translate(4 4)"><svg id="SAMPLE_PWM_INPUT">
    676       <g transform="translate(12 12)">
    677         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    678         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    679       </g>
    680     </svg></g>
    681       <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 38)">S/PW</text>
    682     </g>
    683     <g transform="translate(50 -40)">
    684       
    685       <g transform="translate(2 4)"><svg id="OFFSET_INPUT">
    686       <g transform="translate(12 12)">
    687         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    688         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    689       </g>
    690     </svg></g>
    691       <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(4.5 38)">OFF</text>
    692     </g>
    693     <g transform="translate(90 -40)">
    694       
    695       <g transform="translate(0 4)"><svg id="SCALE_INPUT">
    696       <g transform="translate(12 12)">
    697         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    698         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    699       </g>
    700     </svg></g>
    701       <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(2.5 38)">SCL</text>
    702     </g>
    703     <g transform="translate(10 0)">
    704       
    705       <g transform="translate(4 5)"><svg id="PITCH_INPUT">
    706       <g transform="translate(12 12)">
    707         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    708         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    709       </g>
    710     </svg></g>
    711       <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">V/OCT</text>
    712     </g>
    713     <g transform="translate(50 0)">
    714       
    715       <g transform="translate(2 5)"><svg id="RESET_INPUT">
    716       <g transform="translate(12 12)">
    717         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    718         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    719       </g>
    720     </svg></g>
    721       <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0 40)">RESET</text>
    722     </g>
    723     <g transform="translate(90 0)">
    724       
    725       <g transform="translate(0 5)"><svg id="SMOOTH_INPUT">
    726       <g transform="translate(12 12)">
    727         <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
    728         <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
    729       </g>
    730     </svg></g>
    731       <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(-1 40)">SMTH</text>
    732     </g>
    733   </g>
    734 </svg>