4FO: quadrature LFO. - BogaudioModules - BogaudioModules for VCV Rack

commit 039f261a5024bbcca9b2d56c5905c7ce2ad7cc08
parent 2cd6ae90343480394d5df44a2aa297e331869913
Author: Matt Demanett <matt@demanett.net>
Date:   Fri, 19 Feb 2021 22:11:01 -0500

4FO: quadrature LFO.

Diffstat:
M README-prerelease.md  | 10 ++++++++--
M plugin.json  | 27 +++++++++++++++++++--------
M res-pp/EightFO-dark-pp.svg  | 188 +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
M res-pp/EightFO-lowcontrast-pp.svg  | 188 +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
M res-pp/EightFO-pp.svg  | 186 +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
A res-pp/FourFO-dark-pp.svg  | 631 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A res-pp/FourFO-lowcontrast-pp.svg  | 631 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A res-pp/FourFO-pp.svg  | 567 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M res-src/EightFO-src.svg  | 72 ++++++++++--------------------------------------------------------------
A res-src/FourFO-src.svg  | 234 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M res-src/defs.svg  | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
M res/EightFO-dark.svg  | 0 
M res/EightFO-lowcontrast.svg  | 0 
M res/EightFO.svg  | 0 
A res/FourFO-dark.svg  | 0 
A res/FourFO-lowcontrast.svg  | 0 
A res/FourFO.svg  | 0 
A src/FourFO.cpp  | 282 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A src/FourFO.hpp  | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M src/bogaudio.cpp  | 4 +++-

20 files changed, 2941 insertions(+), 258 deletions(-)
diff --git a/README-prerelease.md b/README-prerelease.md
@@ -190,9 +190,9 @@ Sampling and smoothing functions are available on the context menu.
 
 _Polyphony:_ <a href="#polyphony">Polyphonic</a>, with channels defined by the V/OCT input.
 
-#### <a name="eightfo"></a> 8FO
+#### <a name="fourfo"></a> 4FO
 
-An LFO with outputs at 8 different phases.  The phases may be set by knobs and CVs; by default they are 0, 45, 90, etc, degrees from the fundamental.  Otherwise, functionality is the same as with LFO, except that:
+A quadrature LFO, with outputs at 4 different phases.  The phases may be set by knobs and CVs; by default they are 0, 90, 180 and 270 degrees from the fundamental.  Otherwise, functionality is the same as with LFO, except that:
   - The wave shape is selectable, and all outputs are of the same (phase-shifted) wave.
   - The sampling and pulse width knobs and CVs are combined, with their function depending on the selected wave.
 
@@ -200,6 +200,12 @@ Note that with the stepped random output, each output will update its output whe
 
 _Polyphony:_ <a href="#polyphony">Polyphonic</a>, with channels defined by the V/OCT input.
 
+#### <a name="eightfo"></a> 8FO
+
+An "octature" LFO, like 4FO, but with outputs at 8 phases.  By default the phases are 0, 45, 90, etc, degrees from the fundamental.
+
+_Polyphony:_ <a href="#polyphony">Polyphonic</a>, with channels defined by the V/OCT input.
+
 
 ### <a name="filters"></a> Filters
 
diff --git a/plugin.json b/plugin.json
@@ -106,10 +106,10 @@
       ]
     },
     {
-      "slug": "Bogaudio-EightFO",
-      "name": "8FO",
-      "description": "LFO with outputs at 8 different phases",
-      "manualUrl": "https://github.com/bogaudio/BogaudioModules/blob/master/README.md#eightfo",
+      "slug": "Bogaudio-LLFO",
+      "name": "LLFO",
+      "description": "Low frequency oscillator",
+      "manualUrl": "https://github.com/bogaudio/BogaudioModules/blob/master/README.md#llfo",
       "tags": [
         "LFO",
         "Random",
@@ -117,10 +117,21 @@
       ]
     },
     {
-      "slug": "Bogaudio-LLFO",
-      "name": "LLFO",
-      "description": "Low frequency oscillator",
-      "manualUrl": "https://github.com/bogaudio/BogaudioModules/blob/master/README.md#llfo",
+      "slug": "Bogaudio-FourFO",
+      "name": "4FO",
+      "description": "Quadrature LFO",
+      "manualUrl": "https://github.com/bogaudio/BogaudioModules/blob/master/README.md#fourfo",
+      "tags": [
+        "LFO",
+        "Random",
+        "Polyphonic"
+      ]
+    },
+    {
+      "slug": "Bogaudio-EightFO",
+      "name": "8FO",
+      "description": "LFO with outputs at 8 different phases",
+      "manualUrl": "https://github.com/bogaudio/BogaudioModules/blob/master/README.md#eightfo",
       "tags": [
         "LFO",
         "Random",
diff --git a/res-pp/EightFO-dark-pp.svg b/res-pp/EightFO-dark-pp.svg
@@ -138,58 +138,6 @@ polyline.knob-tick {
 }
 </style>
 
-  <defs>
-    <symbol id="waves-eightfo" viewBox="0 0 70px 70px">
-      
-      <g transform="translate(20 35)">
-        
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
-      </g>
-      <g transform="translate(13 8)">
-        
-        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 11)">
-        
-        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(38 24)">
-        
-        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#ccc" fill="none"/>
-        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#ccc" fill="none"/>
-      </g>
-      <g transform="translate(38 38)">
-        
-        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 51)">
-        
-        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(13 54)">
-        
-        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
-      </g>
-    </symbol>
-
-    <symbol id="dial-phase-eightfo" viewBox="0 0 40px 40px">
-      <g transform="translate(20 20)">
-        <g transform="rotate(-90) translate(10 0)">
-          <polyline points="0,0 4,0" stroke-width="1"/>
-        </g>
-        <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="#ccc" fill="none" transform="rotate(20)"/>
-        <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="#ccc" fill="none" transform="rotate(43)"/>
-        <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="#ccc" fill="none" transform="rotate(-20)"/>
-        <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="#ccc" fill="none" transform="rotate(-43)"/>
-      </g>
-    </symbol>
-  </defs>
-
   
       
       <rect class="module-background background-fill" width="255.0" height="380.0"/>
@@ -296,7 +244,43 @@ polyline.knob-tick {
       </g>
     </svg></g>
     
-    <use xlink:href="#waves-eightfo" transform="translate(-12 -22)" href="#waves-eightfo"/>
+    <g transform="translate(-12 -22)">
+      
+      <g transform="translate(20 35)">
+        
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#ccc" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#ccc" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </g>
   </g>
 
   <g transform="translate(80 143)">
@@ -541,15 +525,95 @@ polyline.knob-tick {
   </g>
 
   <g transform="translate(137 36)">
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)" href="#dial-phase-eightfo"/>
-
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)" href="#dial-phase-eightfo"/>
+    <g transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+
+    <g transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
   </g>
 
   <g class="io-group" transform="translate(176 32)">
diff --git a/res-pp/EightFO-lowcontrast-pp.svg b/res-pp/EightFO-lowcontrast-pp.svg
@@ -138,58 +138,6 @@ polyline.knob-tick {
 }
 </style>
 
-  <defs>
-    <symbol id="waves-eightfo" viewBox="0 0 70px 70px">
-      
-      <g transform="translate(20 35)">
-        
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
-      </g>
-      <g transform="translate(13 8)">
-        
-        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 11)">
-        
-        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(38 24)">
-        
-        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#b3b3b3" fill="none"/>
-        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#b3b3b3" fill="none"/>
-      </g>
-      <g transform="translate(38 38)">
-        
-        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 51)">
-        
-        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(13 54)">
-        
-        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
-      </g>
-    </symbol>
-
-    <symbol id="dial-phase-eightfo" viewBox="0 0 40px 40px">
-      <g transform="translate(20 20)">
-        <g transform="rotate(-90) translate(10 0)">
-          <polyline points="0,0 4,0" stroke-width="1"/>
-        </g>
-        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
-        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
-        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
-        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
-      </g>
-    </symbol>
-  </defs>
-
   
       
       <rect class="module-background background-fill" width="255.0" height="380.0"/>
@@ -296,7 +244,43 @@ polyline.knob-tick {
       </g>
     </svg></g>
     
-    <use xlink:href="#waves-eightfo" transform="translate(-12 -22)" href="#waves-eightfo"/>
+    <g transform="translate(-12 -22)">
+      
+      <g transform="translate(20 35)">
+        
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#b3b3b3" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#b3b3b3" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </g>
   </g>
 
   <g transform="translate(80 143)">
@@ -541,15 +525,95 @@ polyline.knob-tick {
   </g>
 
   <g transform="translate(137 36)">
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)" href="#dial-phase-eightfo"/>
-
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)" href="#dial-phase-eightfo"/>
+    <g transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+
+    <g transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    <g transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
   </g>
 
   <g class="io-group" transform="translate(176 32)">
diff --git a/res-pp/EightFO-pp.svg b/res-pp/EightFO-pp.svg
@@ -74,58 +74,6 @@ polyline.knob-tick {
 }
 </style>
 
-  <defs>
-    <symbol id="waves-eightfo" viewBox="0 0 70px 70px">
-      
-      <g transform="translate(20 35)">
-        
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
-      </g>
-      <g transform="translate(13 8)">
-        
-        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 11)">
-        
-        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(38 24)">
-        
-        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#333" fill="none"/>
-        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#333" fill="none"/>
-      </g>
-      <g transform="translate(38 38)">
-        
-        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 51)">
-        
-        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(13 54)">
-        
-        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
-      </g>
-    </symbol>
-
-    <symbol id="dial-phase-eightfo" viewBox="0 0 40px 40px">
-      <g transform="translate(20 20)">
-        <g transform="rotate(-90) translate(10 0)">
-          <polyline points="0,0 4,0" stroke-width="1"/>
-        </g>
-        <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)"/>
-        <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)"/>
-        <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)"/>
-        <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)"/>
-      </g>
-    </symbol>
-  </defs>
-
   
       
       <rect class="module-background background-fill" width="255.0" height="380.0"/>
@@ -232,7 +180,43 @@ polyline.knob-tick {
       </g>
     </svg></g>
     
-    <use xlink:href="#waves-eightfo" transform="translate(-12 -22)" href="#waves-eightfo"/>
+    <g transform="translate(-12 -22)">
+      
+      <g transform="translate(20 35)">
+        
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#333" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#333" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </g>
   </g>
 
   <g transform="translate(80 143)">
@@ -477,15 +461,95 @@ polyline.knob-tick {
   </g>
 
   <g transform="translate(137 36)">
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)" href="#dial-phase-eightfo"/>
+    <g transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    <g transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    <g transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    <g transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
 
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)" href="#dial-phase-eightfo"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)" href="#dial-phase-eightfo"/>
+    <g transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    <g transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    <g transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    <g transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
   </g>
 
   <g class="io-group" transform="translate(176 32)">
diff --git a/res-pp/FourFO-dark-pp.svg b/res-pp/FourFO-dark-pp.svg
@@ -0,0 +1,631 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150.0" height="380.0" viewBox="0 0 150.0 380.0">
+  <style>text {
+  fill: #333;
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+}
+text.title {
+  font-family: 'Comfortaa', sans-serif;
+  font-weight: normal;
+}
+text.brand {
+  font-family: 'Audiowide', sans-serif;
+  font-weight: bold;
+}
+
+polyline {
+  stroke: #333;
+}
+polyline.guide {
+  stroke: #0f0;
+}
+path {
+  stroke: #333;
+}
+
+rect.module-background, .background-fill {
+  fill: #ddd;
+}
+polyline.module-border-inner {
+  stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+  stroke: #ebebeb;
+}
+polyline.module-border-outer {
+  stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+  fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+  fill: #bbb;
+}
+text.input-label, text.output-label {
+  /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+  stroke: #f0f0f0;
+}
+circle.port-barrel {
+  stroke: #222;
+  fill: #222;
+}
+circle.knob-center {
+   fill: #eee;
+}
+circle.knob-rim {
+   fill: #333;
+}
+circle.knob-tick {
+  fill: #fff;
+}
+polyline.knob-tick {
+  stroke: #fff;
+}
+
+
+text {
+  fill: #eee;
+}
+
+polyline {
+  stroke: #ccc;
+}
+path {
+  stroke: #ccc;
+}
+
+rect.module-background, .background-fill {
+  fill: #111;
+}
+polyline.module-border-inner {
+  stroke: #191919;
+}
+polyline.module-border-middle {
+  stroke: #111;
+}
+polyline.module-border-outer {
+  stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+  fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+  fill: #666;
+}
+text.input-label {
+  fill: #222;
+}
+polyline.input-label, path.input-label {
+  stroke: #222;
+}
+text.output-label {
+  fill: #ddd;
+}
+polyline.output-label, path.output-label {
+  stroke: #ddd;
+}
+
+circle.port-rim {
+  stroke: #c0c0c0;
+}
+circle.port-barrel {
+  stroke: #222;
+  fill: #222;
+}
+circle.knob-center {
+   fill: #888;
+}
+circle.knob-rim {
+   fill: #444;
+}
+circle.knob-tick {
+  fill: #fff;
+}
+polyline.knob-tick {
+  stroke: #fff;
+}
+</style>
+
+  <defs>
+    <symbol id="dial-frequency-fourfo" viewBox="0 0 72px 72px">
+      <g transform="translate(36 36)">
+        <g transform="rotate(-225.08) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(225.08) translate(-10.5 3.5)">0.1</text>
+        </g>
+        <g transform="rotate(-171.49) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(171.49) translate(-11 3.5)">0.5</text>
+        </g>
+        <g transform="rotate(-71.76) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(71.76) translate(-2 3.5)">10</text>
+        </g>
+        <g transform="rotate(-124.62) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" letter-spacing="1px" transform="translate(14 0) rotate(124.62) translate(-10 3.5)">0V</text>
+        </g>
+        <g transform="rotate(-18.17) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(18.17) translate(-2 3.5)">50</text>
+        </g>
+        <g transform="rotate(27.98) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-27.98) translate(-2 3.5)">200</text>
+        </g>
+        <g transform="rotate(51.05) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-51.05) translate(-2 3.5)">400</text>
+        </g>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-240) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-216.92) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-193.85) translate(22 0)"/>
+        
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-147.69) translate(22 0)"/>
+        
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-101.54) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-78.46) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-55.38) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-32.31) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-9.23) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(13.85) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(36.92) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(60) translate(22 0)"/>
+      </g>
+    </symbol>
+  </defs>
+
+  
+      
+      <rect class="module-background background-fill" width="150.0" height="380.0"/>
+    
+      
+      <polyline class="module-border-inner" points="1,1 149.0,1 149.0,379.0 1,379.0 1,1" stroke-width="0.5" fill="none"/>
+      <polyline class="module-border-middle" points="0.5,0.5 149.5,0.5 149.5,379.5 0.5,379.5 0.5,0.5" stroke-width="0.8" fill="none"/>
+      <polyline class="module-border-outer" points="0,0 150.0,0 150.0,380.0 0,380.0 0,0" stroke-width="1" fill="none"/>
+    
+      <text class="title" font-size="12pt" letter-spacing="4px" text-anchor="middle" transform="translate(75.0 19)">4FO</text>
+      <g transform="translate(0 374)">
+        <text class="brand" font-size="8pt" letter-spacing="2px" text-anchor="middle" transform="translate(75.0 0)">BOGAUDIO</text>
+        <rect class="background-fill" width="3" height="3" transform="translate(59.5 -5)"/>
+      </g>
+    
+
+  <g transform="translate(6 25)">
+    
+    <g transform="translate(17 17)"><svg id="FREQUENCY_PARAM">
+      <g transform="translate(19 19)">
+        <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
+        <circle cx="0" cy="0" r="18.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+    <use xlink:href="#dial-frequency-fourfo" transform="translate(0 0)" href="#dial-frequency-fourfo"/>
+    <text font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(36 75)">0V = 2.04HZ</text>
+  </g>
+
+  <g transform="translate(95 48)">
+    
+    
+    
+    
+    <g transform="translate(0 5)"><svg id="WAVE_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+    <g transform="translate(-12 -22)">
+      
+      <g transform="translate(20 35)">
+        
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#ccc" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#ccc" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(9 110)">
+    <text font-size="6pt" letter-spacing="2px" transform="translate(9 6.1)">SLOW</text>
+    <g transform="translate(40 -1.3)"><svg id="SLOW_PARAM">
+      <g transform="translate(4.5 4.5)">
+        <circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
+      </g>
+    </svg></g>
+  </g>
+
+  <g transform="translate(6 133)">
+    
+    <g transform="translate(0 0)">
+      
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">S/PW</text>
+      <g transform="translate(7 16)"><svg id="SAMPLE_PWM_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+        <polyline points="0,0 4,0" stroke-width="1" transform="rotate(-90) translate(10 0)"/>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    </g>
+    <g transform="translate(35 0)">
+      
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">SMTH</text>
+      <g transform="translate(7 16)"><svg id="SMOOTH_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+      <polyline points="0,0 4.166666666666667,0" stroke-width="1" transform="rotate(-240) translate(10.0 0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(43)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(-43)"/>
+      <polyline points="-3,0 3,0" stroke-width="1" fill="none"/>
+      <polyline points="0,-3 0,3" stroke-width="1" fill="none"/>
+    </g>
+    </g>
+    </g>
+    <g transform="translate(0 49)">
+      
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">OFF</text>
+      <g transform="translate(7 16)"><svg id="OFFSET_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+        <polyline points="0,0 4,0" stroke-width="1" transform="rotate(-90) translate(10 0)"/>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    </g>
+    <g transform="translate(35 49)">
+      
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">SCL</text>
+      <g transform="translate(7 16)"><svg id="SCALE_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+      <polyline points="0,0 4.166666666666667,0" stroke-width="1" transform="rotate(-240) translate(10.0 0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(43)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#ccc" fill="none" transform="rotate(-43)"/>
+      <polyline points="-3,0 3,0" stroke-width="1" fill="none"/>
+      <polyline points="0,-3 0,3" stroke-width="1" fill="none"/>
+    </g>
+    </g>
+    </g>
+  </g>
+
+  <g class="io-group" transform="translate(-4 225)">
+    <rect class="input-background" width="65" height="135" rx="5" transform="translate(10 0)"/>
+
+    <g transform="translate(12 0)">
+      <g transform="translate(3 5)"><svg id="SAMPLE_PWM_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">S/PW</text>
+    </g>
+    <g transform="translate(44 0)">
+      <g transform="translate(3 5)"><svg id="SMOOTH_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SMTH</text>
+    </g>
+
+    <g transform="translate(0 44)">
+      <g transform="translate(12 0)">
+        <g transform="translate(3 5)"><svg id="OFFSET_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(15 40)">OFF</text>
+      </g>
+      <g transform="translate(44 0)">
+        <g transform="translate(3 5)"><svg id="SCALE_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SCL</text>
+      </g>
+
+      <g transform="translate(10 44)">
+        <g transform="translate(2 0)">
+          <g transform="translate(3 5)"><svg id="PITCH_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">V/OCT</text>
+        </g>
+        <g transform="translate(34 0)">
+          <g transform="translate(3 5)"><svg id="RESET_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">RESET</text>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(77 99)">
+    <polyline points="-30,0 30,0" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+    <polyline points="0,-30 0,30" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+
+    <g transform="translate(37 0)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">0&#xB0;</text>
+
+      <g transform="translate(0 86)">
+        <g transform="translate(7 8)"><svg id="PHASE0_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE0_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <g transform="translate(3 46)"><svg id="PHASE0_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 0)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">90&#xB0;</text>
+
+      <g transform="translate(0 86)">
+        <g transform="translate(7 8)"><svg id="PHASE1_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(0) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE1_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <g transform="translate(3 46)"><svg id="PHASE1_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 134)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">180&#xB0;</text>
+
+      <g transform="translate(0 10)">
+        <g transform="translate(7 8)"><svg id="PHASE2_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(-90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE2_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <g transform="translate(3 46)"><svg id="PHASE2_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+
+    <g transform="translate(37 134)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">270&#xB0;</text>
+
+      <g transform="translate(0 10)">
+        <g transform="translate(7 8)"><svg id="PHASE3_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(180) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#ccc" fill="none" transform="rotate(20)"/>
+        <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="#ccc" fill="none" transform="rotate(43)"/>
+        <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="#ccc" fill="none" transform="rotate(-20)"/>
+        <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="#ccc" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE3_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <g transform="translate(3 46)"><svg id="PHASE3_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res-pp/FourFO-lowcontrast-pp.svg b/res-pp/FourFO-lowcontrast-pp.svg
@@ -0,0 +1,631 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150.0" height="380.0" viewBox="0 0 150.0 380.0">
+  <style>text {
+  fill: #333;
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+}
+text.title {
+  font-family: 'Comfortaa', sans-serif;
+  font-weight: normal;
+}
+text.brand {
+  font-family: 'Audiowide', sans-serif;
+  font-weight: bold;
+}
+
+polyline {
+  stroke: #333;
+}
+polyline.guide {
+  stroke: #0f0;
+}
+path {
+  stroke: #333;
+}
+
+rect.module-background, .background-fill {
+  fill: #ddd;
+}
+polyline.module-border-inner {
+  stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+  stroke: #ebebeb;
+}
+polyline.module-border-outer {
+  stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+  fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+  fill: #bbb;
+}
+text.input-label, text.output-label {
+  /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+  stroke: #f0f0f0;
+}
+circle.port-barrel {
+  stroke: #222;
+  fill: #222;
+}
+circle.knob-center {
+   fill: #eee;
+}
+circle.knob-rim {
+   fill: #333;
+}
+circle.knob-tick {
+  fill: #fff;
+}
+polyline.knob-tick {
+  stroke: #fff;
+}
+
+
+text {
+  fill: #b3b3b3;
+}
+
+polyline {
+  stroke: #b3b3b3;
+}
+path {
+  stroke: #b3b3b3;
+}
+
+rect.module-background, .background-fill {
+  fill: #333;
+}
+polyline.module-border-inner {
+  stroke: #191919;
+}
+polyline.module-border-middle {
+  stroke: #111;
+}
+polyline.module-border-outer {
+  stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+  fill: #b3b3b3;
+}
+rect.output-background, rect.output-background-filler {
+  fill: #888;
+}
+text.input-label {
+  fill: #666;
+}
+polyline.input-label, path.input-label {
+  stroke: #666;
+}
+text.output-label {
+  fill: #ccc;
+}
+polyline.output-label, path.output-label {
+  stroke: #ccc;
+}
+
+circle.port-rim {
+  stroke: #bbb;
+}
+circle.port-barrel {
+  stroke: #222;
+  fill: #222;
+}
+circle.knob-center {
+   fill: #bbb;
+}
+circle.knob-rim {
+   fill: #555;
+}
+circle.knob-tick {
+  fill: #fff;
+}
+polyline.knob-tick {
+  stroke: #fff;
+}
+</style>
+
+  <defs>
+    <symbol id="dial-frequency-fourfo" viewBox="0 0 72px 72px">
+      <g transform="translate(36 36)">
+        <g transform="rotate(-225.08) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(225.08) translate(-10.5 3.5)">0.1</text>
+        </g>
+        <g transform="rotate(-171.49) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(171.49) translate(-11 3.5)">0.5</text>
+        </g>
+        <g transform="rotate(-71.76) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(71.76) translate(-2 3.5)">10</text>
+        </g>
+        <g transform="rotate(-124.62) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" letter-spacing="1px" transform="translate(14 0) rotate(124.62) translate(-10 3.5)">0V</text>
+        </g>
+        <g transform="rotate(-18.17) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(18.17) translate(-2 3.5)">50</text>
+        </g>
+        <g transform="rotate(27.98) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-27.98) translate(-2 3.5)">200</text>
+        </g>
+        <g transform="rotate(51.05) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-51.05) translate(-2 3.5)">400</text>
+        </g>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-240) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-216.92) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-193.85) translate(22 0)"/>
+        
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-147.69) translate(22 0)"/>
+        
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-101.54) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-78.46) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-55.38) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-32.31) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-9.23) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(13.85) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(36.92) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(60) translate(22 0)"/>
+      </g>
+    </symbol>
+  </defs>
+
+  
+      
+      <rect class="module-background background-fill" width="150.0" height="380.0"/>
+    
+      
+      <polyline class="module-border-inner" points="1,1 149.0,1 149.0,379.0 1,379.0 1,1" stroke-width="0.5" fill="none"/>
+      <polyline class="module-border-middle" points="0.5,0.5 149.5,0.5 149.5,379.5 0.5,379.5 0.5,0.5" stroke-width="0.8" fill="none"/>
+      <polyline class="module-border-outer" points="0,0 150.0,0 150.0,380.0 0,380.0 0,0" stroke-width="1" fill="none"/>
+    
+      <text class="title" font-size="12pt" letter-spacing="4px" text-anchor="middle" transform="translate(75.0 19)">4FO</text>
+      <g transform="translate(0 374)">
+        <text class="brand" font-size="8pt" letter-spacing="2px" text-anchor="middle" transform="translate(75.0 0)">BOGAUDIO</text>
+        <rect class="background-fill" width="3" height="3" transform="translate(59.5 -5)"/>
+      </g>
+    
+
+  <g transform="translate(6 25)">
+    
+    <g transform="translate(17 17)"><svg id="FREQUENCY_PARAM">
+      <g transform="translate(19 19)">
+        <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
+        <circle cx="0" cy="0" r="18.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+    <use xlink:href="#dial-frequency-fourfo" transform="translate(0 0)" href="#dial-frequency-fourfo"/>
+    <text font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(36 75)">0V = 2.04HZ</text>
+  </g>
+
+  <g transform="translate(95 48)">
+    
+    
+    
+    
+    <g transform="translate(0 5)"><svg id="WAVE_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+    <g transform="translate(-12 -22)">
+      
+      <g transform="translate(20 35)">
+        
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#b3b3b3" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#b3b3b3" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(9 110)">
+    <text font-size="6pt" letter-spacing="2px" transform="translate(9 6.1)">SLOW</text>
+    <g transform="translate(40 -1.3)"><svg id="SLOW_PARAM">
+      <g transform="translate(4.5 4.5)">
+        <circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
+      </g>
+    </svg></g>
+  </g>
+
+  <g transform="translate(6 133)">
+    
+    <g transform="translate(0 0)">
+      
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">S/PW</text>
+      <g transform="translate(7 16)"><svg id="SAMPLE_PWM_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+        <polyline points="0,0 4,0" stroke-width="1" transform="rotate(-90) translate(10 0)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    </g>
+    <g transform="translate(35 0)">
+      
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">SMTH</text>
+      <g transform="translate(7 16)"><svg id="SMOOTH_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+      <polyline points="0,0 4.166666666666667,0" stroke-width="1" transform="rotate(-240) translate(10.0 0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(43)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      <polyline points="-3,0 3,0" stroke-width="1" fill="none"/>
+      <polyline points="0,-3 0,3" stroke-width="1" fill="none"/>
+    </g>
+    </g>
+    </g>
+    <g transform="translate(0 49)">
+      
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">OFF</text>
+      <g transform="translate(7 16)"><svg id="OFFSET_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+        <polyline points="0,0 4,0" stroke-width="1" transform="rotate(-90) translate(10 0)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+    </g>
+    <g transform="translate(35 49)">
+      
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">SCL</text>
+      <g transform="translate(7 16)"><svg id="SCALE_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+      <polyline points="0,0 4.166666666666667,0" stroke-width="1" transform="rotate(-240) translate(10.0 0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 1 12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(43)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(0)"/>
+      <path class="0.0" d="M 0 -12.5 A 12.5 12.5 0 0 0 -12.5 0" stroke-width="0.7" stroke-linecap="round" stroke="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      <polyline points="-3,0 3,0" stroke-width="1" fill="none"/>
+      <polyline points="0,-3 0,3" stroke-width="1" fill="none"/>
+    </g>
+    </g>
+    </g>
+  </g>
+
+  <g class="io-group" transform="translate(-4 225)">
+    <rect class="input-background" width="65" height="135" rx="5" transform="translate(10 0)"/>
+
+    <g transform="translate(12 0)">
+      <g transform="translate(3 5)"><svg id="SAMPLE_PWM_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">S/PW</text>
+    </g>
+    <g transform="translate(44 0)">
+      <g transform="translate(3 5)"><svg id="SMOOTH_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SMTH</text>
+    </g>
+
+    <g transform="translate(0 44)">
+      <g transform="translate(12 0)">
+        <g transform="translate(3 5)"><svg id="OFFSET_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(15 40)">OFF</text>
+      </g>
+      <g transform="translate(44 0)">
+        <g transform="translate(3 5)"><svg id="SCALE_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SCL</text>
+      </g>
+
+      <g transform="translate(10 44)">
+        <g transform="translate(2 0)">
+          <g transform="translate(3 5)"><svg id="PITCH_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">V/OCT</text>
+        </g>
+        <g transform="translate(34 0)">
+          <g transform="translate(3 5)"><svg id="RESET_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">RESET</text>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(77 99)">
+    <polyline points="-30,0 30,0" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+    <polyline points="0,-30 0,30" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+
+    <g transform="translate(37 0)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">0&#xB0;</text>
+
+      <g transform="translate(0 86)">
+        <g transform="translate(7 8)"><svg id="PHASE0_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE0_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <g transform="translate(3 46)"><svg id="PHASE0_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 0)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">90&#xB0;</text>
+
+      <g transform="translate(0 86)">
+        <g transform="translate(7 8)"><svg id="PHASE1_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(0) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE1_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <g transform="translate(3 46)"><svg id="PHASE1_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 134)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">180&#xB0;</text>
+
+      <g transform="translate(0 10)">
+        <g transform="translate(7 8)"><svg id="PHASE2_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(-90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE2_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <g transform="translate(3 46)"><svg id="PHASE2_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+
+    <g transform="translate(37 134)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">270&#xB0;</text>
+
+      <g transform="translate(0 10)">
+        <g transform="translate(7 8)"><svg id="PHASE3_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(180) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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="#b3b3b3" fill="none" transform="rotate(20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(43)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-20)"/>
+        <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="#b3b3b3" fill="none" transform="rotate(-43)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE3_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <g transform="translate(3 46)"><svg id="PHASE3_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res-pp/FourFO-pp.svg b/res-pp/FourFO-pp.svg
@@ -0,0 +1,567 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150.0" height="380.0" viewBox="0 0 150.0 380.0">
+  <style>text {
+  fill: #333;
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+}
+text.title {
+  font-family: 'Comfortaa', sans-serif;
+  font-weight: normal;
+}
+text.brand {
+  font-family: 'Audiowide', sans-serif;
+  font-weight: bold;
+}
+
+polyline {
+  stroke: #333;
+}
+polyline.guide {
+  stroke: #0f0;
+}
+path {
+  stroke: #333;
+}
+
+rect.module-background, .background-fill {
+  fill: #ddd;
+}
+polyline.module-border-inner {
+  stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+  stroke: #ebebeb;
+}
+polyline.module-border-outer {
+  stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+  fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+  fill: #bbb;
+}
+text.input-label, text.output-label {
+  /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+  stroke: #f0f0f0;
+}
+circle.port-barrel {
+  stroke: #222;
+  fill: #222;
+}
+circle.knob-center {
+   fill: #eee;
+}
+circle.knob-rim {
+   fill: #333;
+}
+circle.knob-tick {
+  fill: #fff;
+}
+polyline.knob-tick {
+  stroke: #fff;
+}
+</style>
+
+  <defs>
+    <symbol id="dial-frequency-fourfo" viewBox="0 0 72px 72px">
+      <g transform="translate(36 36)">
+        <g transform="rotate(-225.08) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(225.08) translate(-10.5 3.5)">0.1</text>
+        </g>
+        <g transform="rotate(-171.49) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(171.49) translate(-11 3.5)">0.5</text>
+        </g>
+        <g transform="rotate(-71.76) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(71.76) translate(-2 3.5)">10</text>
+        </g>
+        <g transform="rotate(-124.62) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" letter-spacing="1px" transform="translate(14 0) rotate(124.62) translate(-10 3.5)">0V</text>
+        </g>
+        <g transform="rotate(-18.17) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(18.17) translate(-2 3.5)">50</text>
+        </g>
+        <g transform="rotate(27.98) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-27.98) translate(-2 3.5)">200</text>
+        </g>
+        <g transform="rotate(51.05) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-51.05) translate(-2 3.5)">400</text>
+        </g>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-240) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-216.92) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-193.85) translate(22 0)"/>
+        
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-147.69) translate(22 0)"/>
+        
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-101.54) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-78.46) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-55.38) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-32.31) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-9.23) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(13.85) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(36.92) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(60) translate(22 0)"/>
+      </g>
+    </symbol>
+  </defs>
+
+  
+      
+      <rect class="module-background background-fill" width="150.0" height="380.0"/>
+    
+      
+      <polyline class="module-border-inner" points="1,1 149.0,1 149.0,379.0 1,379.0 1,1" stroke-width="0.5" fill="none"/>
+      <polyline class="module-border-middle" points="0.5,0.5 149.5,0.5 149.5,379.5 0.5,379.5 0.5,0.5" stroke-width="0.8" fill="none"/>
+      <polyline class="module-border-outer" points="0,0 150.0,0 150.0,380.0 0,380.0 0,0" stroke-width="1" fill="none"/>
+    
+      <text class="title" font-size="12pt" letter-spacing="4px" text-anchor="middle" transform="translate(75.0 19)">4FO</text>
+      <g transform="translate(0 374)">
+        <text class="brand" font-size="8pt" letter-spacing="2px" text-anchor="middle" transform="translate(75.0 0)">BOGAUDIO</text>
+        <rect class="background-fill" width="3" height="3" transform="translate(59.5 -5)"/>
+      </g>
+    
+
+  <g transform="translate(6 25)">
+    
+    <g transform="translate(17 17)"><svg id="FREQUENCY_PARAM">
+      <g transform="translate(19 19)">
+        <polyline points="-5,0 5,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-5 0,5" stroke-width="1" stroke="#00f"/>
+        <circle cx="0" cy="0" r="18.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+    <use xlink:href="#dial-frequency-fourfo" transform="translate(0 0)" href="#dial-frequency-fourfo"/>
+    <text font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(36 75)">0V = 2.04HZ</text>
+  </g>
+
+  <g transform="translate(95 48)">
+    
+    
+    
+    
+    <g transform="translate(0 5)"><svg id="WAVE_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+    <g transform="translate(-12 -22)">
+      
+      <g transform="translate(20 35)">
+        
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#333" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#333" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(9 110)">
+    <text font-size="6pt" letter-spacing="2px" transform="translate(9 6.1)">SLOW</text>
+    <g transform="translate(40 -1.3)"><svg id="SLOW_PARAM">
+      <g transform="translate(4.5 4.5)">
+        <circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
+      </g>
+    </svg></g>
+  </g>
+
+  <g transform="translate(6 133)">
+    
+    <g transform="translate(0 0)">
+      
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">S/PW</text>
+      <g transform="translate(7 16)"><svg id="SAMPLE_PWM_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+        <polyline points="0,0 4,0" stroke-width="1" transform="rotate(-90) translate(10 0)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    </g>
+    <g transform="translate(35 0)">
+      
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">SMTH</text>
+      <g transform="translate(7 16)"><svg id="SMOOTH_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+      <polyline points="0,0 4.166666666666667,0" stroke-width="1" transform="rotate(-240) translate(10.0 0)"/>
+      <path class="0.0" 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(0)"/>
+      <path class="0.0" 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)"/>
+      <path class="0.0" 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(0)"/>
+      <path class="0.0" 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)"/>
+      <polyline points="-3,0 3,0" stroke-width="1" fill="none"/>
+      <polyline points="0,-3 0,3" stroke-width="1" fill="none"/>
+    </g>
+    </g>
+    </g>
+    <g transform="translate(0 49)">
+      
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">OFF</text>
+      <g transform="translate(7 16)"><svg id="OFFSET_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+        <polyline points="0,0 4,0" stroke-width="1" transform="rotate(-90) translate(10 0)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+    </g>
+    <g transform="translate(35 49)">
+      
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">SCL</text>
+      <g transform="translate(7 16)"><svg id="SCALE_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+      <g transform="translate(-5 4)">
+      <g transform="translate(20 20)">
+      <polyline points="0,0 4.166666666666667,0" stroke-width="1" transform="rotate(-240) translate(10.0 0)"/>
+      <path class="0.0" 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(0)"/>
+      <path class="0.0" 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)"/>
+      <path class="0.0" 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(0)"/>
+      <path class="0.0" 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)"/>
+      <polyline points="-3,0 3,0" stroke-width="1" fill="none"/>
+      <polyline points="0,-3 0,3" stroke-width="1" fill="none"/>
+    </g>
+    </g>
+    </g>
+  </g>
+
+  <g class="io-group" transform="translate(-4 225)">
+    <rect class="input-background" width="65" height="135" rx="5" transform="translate(10 0)"/>
+
+    <g transform="translate(12 0)">
+      <g transform="translate(3 5)"><svg id="SAMPLE_PWM_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">S/PW</text>
+    </g>
+    <g transform="translate(44 0)">
+      <g transform="translate(3 5)"><svg id="SMOOTH_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SMTH</text>
+    </g>
+
+    <g transform="translate(0 44)">
+      <g transform="translate(12 0)">
+        <g transform="translate(3 5)"><svg id="OFFSET_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(15 40)">OFF</text>
+      </g>
+      <g transform="translate(44 0)">
+        <g transform="translate(3 5)"><svg id="SCALE_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SCL</text>
+      </g>
+
+      <g transform="translate(10 44)">
+        <g transform="translate(2 0)">
+          <g transform="translate(3 5)"><svg id="PITCH_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">V/OCT</text>
+        </g>
+        <g transform="translate(34 0)">
+          <g transform="translate(3 5)"><svg id="RESET_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">RESET</text>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(77 99)">
+    <polyline points="-30,0 30,0" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+    <polyline points="0,-30 0,30" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+
+    <g transform="translate(37 0)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">0&#xB0;</text>
+
+      <g transform="translate(0 86)">
+        <g transform="translate(7 8)"><svg id="PHASE0_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE0_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <g transform="translate(3 46)"><svg id="PHASE0_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 0)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">90&#xB0;</text>
+
+      <g transform="translate(0 86)">
+        <g transform="translate(7 8)"><svg id="PHASE1_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(0) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE1_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <g transform="translate(3 46)"><svg id="PHASE1_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 134)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">180&#xB0;</text>
+
+      <g transform="translate(0 10)">
+        <g transform="translate(7 8)"><svg id="PHASE2_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(-90) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE2_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <g transform="translate(3 46)"><svg id="PHASE2_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+
+    <g transform="translate(37 134)">
+      
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">270&#xB0;</text>
+
+      <g transform="translate(0 10)">
+        <g transform="translate(7 8)"><svg id="PHASE3_PARAM">
+      <g transform="translate(8 8)">
+        <polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
+        <polyline points="0,-3 0,3" stroke-width="1" stroke="#00f"/>
+        <circle r="7.5" stroke-width="1" stroke="#00f" fill="none"/>
+      </g>
+    </svg></g>
+        <g transform="translate(15 16) rotate(180) translate(-20 -20)">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </g>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <g transform="translate(3 4)"><svg id="PHASE3_OUTPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <g transform="translate(3 46)"><svg id="PHASE3_INPUT">
+      <g transform="translate(12 12)">
+        <circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
+        <circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
+      </g>
+    </svg></g>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res-src/EightFO-src.svg b/res-src/EightFO-src.svg
@@ -2,58 +2,6 @@
 <module hp="17">
   <style/>
 
-  <defs>
-    <symbol id="waves-eightfo" viewBox="0 0 70px 70px">
-      <!-- <polyline points="0,0 0,70" stroke-width="1" stroke="#0f0" transform="translate(20 0)" /> -->
-      <g transform="translate(20 35)">
-        <!-- <circle r="18" fill="none" stroke="#00f" /> -->
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
-        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
-      </g>
-      <g transform="translate(13 8)">
-        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
-        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 11)">
-        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
-        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(38 24)">
-        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
-        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#333" fill="none"/>
-        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#333" fill="none"/>
-      </g>
-      <g transform="translate(38 38)">
-        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
-        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(30 51)">
-        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
-        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
-      </g>
-      <g transform="translate(13 54)">
-        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
-        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
-      </g>
-    </symbol>
-
-    <symbol id="dial-phase-eightfo" viewBox="0 0 40px 40px">
-      <g transform="translate(20 20)">
-        <g transform="rotate(-90) translate(10 0)">
-          <polyline points="0,0 4,0" stroke-width="1"/>
-        </g>
-        <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)"/>
-        <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)"/>
-        <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)"/>
-        <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)"/>
-      </g>
-    </symbol>
-  </defs>
-
   <def xlink:href="#module" var-name="8FO"/>
 
   <g transform="translate(20 25)">
@@ -78,7 +26,7 @@
   <g transform="translate(20 173)">
     <def id="WAVE_PARAM" xlink:href="#knob16" transform="translate(0 5)"/>
     <!-- <rect width="60" height="60" fill="none" stroke="#0f0" transform="translate(-10 -30) translate(8 13)" /> -->
-    <use xlink:href="#waves-eightfo" transform="translate(-12 -22)"/>
+    <def xlink:href="#dial-waves" transform="translate(-12 -22)"/>
   </g>
 
   <g transform="translate(80 143)">
@@ -151,15 +99,15 @@
   </g>
 
   <g transform="translate(137 36)">
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)"/>
-
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)"/>
-    <use xlink:href="#dial-phase-eightfo" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 0) translate(12 12) rotate(-225) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 40) translate(12 12) rotate(-180) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 80) translate(12 12) rotate(-135) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 120) translate(12 12) rotate(-90) translate(-20 -20)"/>
+
+    <def xlink:href="#dial-phase" transform="translate(3 160) translate(12 12) rotate(-45) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 200) translate(12 12) rotate(0) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 240) translate(12 12) rotate(45) translate(-20 -20)"/>
+    <def xlink:href="#dial-phase" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)"/>
   </g>
 
   <g class="io-group" transform="translate(176 32)">
diff --git a/res-src/FourFO-src.svg b/res-src/FourFO-src.svg
@@ -0,0 +1,234 @@
+<module hp="10">
+  <style/>
+
+  <defs>
+    <symbol id="dial-frequency-fourfo" viewBox="0 0 72px 72px">
+      <g transform="translate(36 36)">
+        <g transform="rotate(-225.08) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(225.08) translate(-10.5 3.5)">0.1</text>
+        </g>
+        <g transform="rotate(-171.49) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(171.49) translate(-11 3.5)">0.5</text>
+        </g>
+        <g transform="rotate(-71.76) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(71.76) translate(-2 3.5)">10</text>
+        </g>
+        <g transform="rotate(-124.62) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" letter-spacing="1px" transform="translate(14 0) rotate(124.62) translate(-10 3.5)">0V</text>
+        </g>
+        <g transform="rotate(-18.17) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(18.17) translate(-2 3.5)">50</text>
+        </g>
+        <g transform="rotate(27.98) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-27.98) translate(-2 3.5)">200</text>
+        </g>
+        <g transform="rotate(51.05) translate(19 0)">
+          <polyline points="0,0 5,0" stroke-width="1" transform="translate(3 0)"/>
+          <text font-size="6pt" transform="translate(14 0) rotate(-51.05) translate(-2 3.5)">400</text>
+        </g>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-240) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-216.92) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-193.85) translate(22 0)"/>
+        <!-- <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-170.77) translate(22 0)" /> -->
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-147.69) translate(22 0)"/>
+        <!-- <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-124.62) translate(22 0)" /> -->
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-101.54) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-78.46) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-55.38) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-32.31) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(-9.23) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(13.85) translate(22 0)"/>
+
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(36.92) translate(22 0)"/>
+        <polyline points="0,0 3,0" stroke-width="0.7" transform="rotate(60) translate(22 0)"/>
+      </g>
+    </symbol>
+  </defs>
+
+  <def xlink:href="#module" var-name="4FO"/>
+
+  <g transform="translate(6 25)">
+    <!-- <rect width="72" height="72" fill="none" stroke="#0f0" /> -->
+    <def id="FREQUENCY_PARAM" xlink:href="#knob38" transform="translate(17 17)"/>
+    <use xlink:href="#dial-frequency-fourfo" transform="translate(0 0)"/>
+    <text font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(36 75)">0V = 2.04HZ</text>
+  </g>
+
+  <g transform="translate(95 48)">
+    <!-- <rect width="43" height="60" fill="none" stroke="#0f0" transform="translate(-10 -30) translate(8 13)" /> -->
+    <!-- <rect width="43" height="7" fill="#ff0" transform="translate(-2 -25)" /> -->
+    <!-- <rect width="43" height="7" fill="#ff0" transform="translate(-2 60+13-30)" /> -->
+    <!-- <polyline points="0,0 0,60" stroke-width="0.7" transform="translate(21.5 -18)"/> -->
+    <def id="WAVE_PARAM" xlink:href="#knob16" transform="translate(0 5)"/>
+    <def xlink:href="#dial-waves" transform="translate(-12 -22)"/>
+  </g>
+
+  <g transform="translate(9 110)">
+    <text font-size="6pt" letter-spacing="2px" transform="translate(9 6.1)">SLOW</text>
+    <def id="SLOW_PARAM" xlink:href="#button-small" transform="translate(40 -1.3)"/>
+  </g>
+
+  <g transform="translate(6 133)">
+    <!-- <rect width="65" height="105" fill="none" stroke="#0f0" transform="translate(0 -9)" /> -->
+    <g transform="translate(0 0)">
+      <!-- <rect width="30" height="50" fill="none" stroke="#0f0" transform="translate(0 -9)" /> -->
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">S/PW</text>
+      <def id="SAMPLE_PWM_PARAM" xlink:href="#knob16" transform="translate(7 16)"/>
+      <def xlink:href="#dial-centertick" transform="translate(-5 4)"/>
+    </g>
+    <g transform="translate(35 0)">
+      <!-- <rect width="30" height="50" fill="none" stroke="#0f0" transform="translate(0 -9)" /> -->
+      <text font-size="7pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 4)">SMTH</text>
+      <def id="SMOOTH_PARAM" xlink:href="#knob16" transform="translate(7 16)"/>
+      <def xlink:href="#dial-mintick" transform="translate(-5 4)"/>
+    </g>
+    <g transform="translate(0 49)">
+      <!-- <rect width="30" height="50" fill="none" stroke="#0f0" transform="translate(0 -9)" /> -->
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">OFF</text>
+      <def id="OFFSET_PARAM" xlink:href="#knob16" transform="translate(7 16)"/>
+      <def xlink:href="#dial-centertick" transform="translate(-5 4)"/>
+    </g>
+    <g transform="translate(35 49)">
+      <!-- <rect width="30" height="50" fill="none" stroke="#0f0" transform="translate(0 -9)" /> -->
+      <text font-size="7pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 4)">SCL</text>
+      <def id="SCALE_PARAM" xlink:href="#knob16" transform="translate(7 16)"/>
+      <def xlink:href="#dial-mintick" transform="translate(-5 4)"/>
+    </g>
+  </g>
+
+  <g class="io-group" transform="translate(-4 225)">
+    <rect class="input-background" width="65" height="135" rx="5" transform="translate(10 0)"/>
+
+    <g transform="translate(12 0)">
+      <def id="SAMPLE_PWM_INPUT" xlink:href="#input" transform="translate(3 5)"/>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">S/PW</text>
+    </g>
+    <g transform="translate(44 0)">
+      <def id="SMOOTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SMTH</text>
+    </g>
+
+    <g transform="translate(0 44)">
+      <g transform="translate(12 0)">
+        <def id="OFFSET_INPUT" xlink:href="#input" transform="translate(3 5)"/>
+        <text class="input-label" font-size="6pt" letter-spacing="0.5px" text-anchor="middle" transform="translate(15 40)">OFF</text>
+      </g>
+      <g transform="translate(44 0)">
+        <def id="SCALE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 40)">SCL</text>
+      </g>
+
+      <g transform="translate(10 44)">
+        <g transform="translate(2 0)">
+          <def id="PITCH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">V/OCT</text>
+        </g>
+        <g transform="translate(34 0)">
+          <def id="RESET_INPUT" xlink:href="#input" transform="translate(3 5)"/>
+          <text class="input-label" font-size="6pt" letter-spacing="0.7px" text-anchor="middle" transform="translate(15 40)">RESET</text>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <g transform="translate(77 99)">
+    <polyline points="-30,0 30,0" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+    <polyline points="0,-30 0,30" stroke-width="0.7" transform="translate(33.5 131.5)"/>
+
+    <g transform="translate(37 0)">
+      <!-- <rect fill="#ff0" width="30" height="128" rx="5"/> -->
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">0°</text>
+
+      <g transform="translate(0 86)">
+        <def id="PHASE0_PARAM" xlink:href="#knob16" transform="translate(7 8)"/>
+        <def xlink:href="#dial-phase" transform="translate(15 16) rotate(90) translate(-20 -20)"/>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <def id="PHASE0_INPUT" xlink:href="#input" transform="translate(3 4)"/>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <def id="PHASE0_OUTPUT" xlink:href="#output" transform="translate(3 46)"/>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 0)">
+      <!-- <rect fill="#ff0" width="30" height="128" rx="5"/> -->
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 125)">90°</text>
+
+      <g transform="translate(0 86)">
+        <def id="PHASE1_PARAM" xlink:href="#knob16" transform="translate(7 8)"/>
+        <def xlink:href="#dial-phase" transform="translate(15 16) rotate(0) translate(-20 -20)"/>
+      </g>
+
+      <g class="io-group" transform="translate(0 1)">
+        <rect class="output-background" width="30" height="84" rx="5"/>
+        <rect class="input-background" width="30" height="42" rx="5"/>
+        <rect class="input-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <def id="PHASE1_INPUT" xlink:href="#input" transform="translate(3 4)"/>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 38)">PHS</text>
+        <def id="PHASE1_OUTPUT" xlink:href="#output" transform="translate(3 46)"/>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 80)">OUT</text>
+      </g>
+    </g>
+
+    <g transform="translate(0 134)">
+      <!-- <rect fill="#ff0" width="30" height="128" rx="5"/> -->
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">180°</text>
+
+      <g transform="translate(0 10)">
+        <def id="PHASE2_PARAM" xlink:href="#knob16" transform="translate(7 8)"/>
+        <def xlink:href="#dial-phase" transform="translate(15 16) rotate(-90) translate(-20 -20)"/>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <def id="PHASE2_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <def id="PHASE2_INPUT" xlink:href="#input" transform="translate(3 46)"/>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+
+    <g transform="translate(37 134)">
+      <!-- <rect fill="#ff0" width="30" height="128" rx="5"/> -->
+      <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 9)">270°</text>
+
+      <g transform="translate(0 10)">
+        <def id="PHASE3_PARAM" xlink:href="#knob16" transform="translate(7 8)"/>
+        <def xlink:href="#dial-phase" transform="translate(15 16) rotate(180) translate(-20 -20)"/>
+      </g>
+
+      <g class="io-group" transform="translate(0 43)">
+        <rect class="input-background" width="30" height="84" rx="5"/>
+        <rect class="output-background" width="30" height="42" rx="5"/>
+        <rect class="output-background" width="30" height="10" transform="translate(0 32)"/>
+
+        <def id="PHASE3_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
+        <text class="output-label" font-size="6pt" letter-spacing="2px" text-anchor="middle" transform="translate(15 38)">OUT</text>
+        <def id="PHASE3_INPUT" xlink:href="#input" transform="translate(3 46)"/>
+        <text class="input-label" font-size="6pt" letter-spacing="1px" text-anchor="middle" transform="translate(15 80)">PHS</text>
+      </g>
+    </g>
+  </g>
+</module>
diff --git a/res-src/defs.svg b/res-src/defs.svg
@@ -832,6 +832,18 @@
       </g>
     </symbol>
 
+    <symbol id="dial-phase" viewBox="0 0 40px 40px">
+      <g transform="translate(20 20)">
+        <g transform="rotate(-90) translate(10 0)">
+          <polyline points="0,0 4,0" stroke-width="1"/>
+        </g>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+        <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)"/>
+      </g>
+    </symbol>
+
     <symbol id="dial-rise-time" viewBox="0 0 45px 45px">
       <g var-tt="19" transform="translate(22.5 22.5)">
         <text font-size="5pt" text-anchor="middle" var-r="-240" transform="rotate($r) translate($tt+1.0 0) rotate(-1.0*$r) translate(0 3)">0MS</text>
@@ -1052,6 +1064,44 @@
       </g>
     </symbol>
 
+    <symbol id="dial-waves" viewBox="0 0 70px 70px">
+      <!-- <polyline points="0,0 0,70" stroke-width="1" stroke="#0f0" transform="translate(20 0)" /> -->
+      <g transform="translate(20 35)">
+        <!-- <circle r="18" fill="none" stroke="#00f" /> -->
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-90) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(-18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(18) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(54) translate(11 0)"/>
+        <polyline points="0,0 5,0" stroke-width="1" transform="rotate(90) translate(11 0)"/>
+      </g>
+      <g transform="translate(13 8)">
+        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
+        <polyline points="0,8 12,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 11)">
+        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
+        <polyline points="0,8 0,0 12,8" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(38 24)">
+        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
+        <path d="M 0 4 A 2 3 0 0 1 6 4" stroke-width="1" stroke="#333" fill="none"/>
+        <path d="M 6 4 A 2 3 0 0 0 12 4" stroke-width="1" stroke="#333" fill="none"/>
+      </g>
+      <g transform="translate(38 38)">
+        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
+        <polyline points="0,4 3,0 9,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(30 51)">
+        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
+        <polyline points="0,4 0,0 6,0 6,8 12,8 12,4" stroke-width="1" fill="none"/>
+      </g>
+      <g transform="translate(13 54)">
+        <!-- <rect width="12" height="8" fill="none" stroke-width="1" stroke="#0f0" /> -->
+        <polyline points="0,0 0,5 12,5 12,8" stroke-width="1" fill="none"/>
+      </g>
+    </symbol>
+
     <symbol id="dial-window" viewBox="0 0 45px 45px">
       <g transform="translate(22.5 22.5)">
         <text font-size="5.0pt" transform="rotate(-240) translate(20 0) rotate(240) translate(-1.9 2.2)">0</text>
diff --git a/res/EightFO-dark.svg b/res/EightFO-dark.svg
Binary files differ.
diff --git a/res/EightFO-lowcontrast.svg b/res/EightFO-lowcontrast.svg
Binary files differ.
diff --git a/res/EightFO.svg b/res/EightFO.svg
Binary files differ.
diff --git a/res/FourFO-dark.svg b/res/FourFO-dark.svg
Binary files differ.
diff --git a/res/FourFO-lowcontrast.svg b/res/FourFO-lowcontrast.svg
Binary files differ.
diff --git a/res/FourFO.svg b/res/FourFO.svg
Binary files differ.
diff --git a/src/FourFO.cpp b/src/FourFO.cpp
@@ -0,0 +1,282 @@
+
+#include "FourFO.hpp"
+
+const Phasor::phase_delta_t basePhase3Offset = Phasor::radiansToPhase(1.5f * M_PI);
+const Phasor::phase_delta_t basePhase2Offset = Phasor::radiansToPhase(M_PI);
+const Phasor::phase_delta_t basePhase1Offset = Phasor::radiansToPhase(0.5f * M_PI);
+const Phasor::phase_delta_t basePhase0Offset = Phasor::radiansToPhase(0.0f);
+
+void FourFO::Engine::reset() {
+	resetTrigger.reset();
+	sampleStep = phasor._sampleRate;
+}
+
+void FourFO::Engine::sampleRateChange() {
+	phasor.setSampleRate(APP->engine->getSampleRate());
+	sampleStep = phasor._sampleRate;
+}
+
+void FourFO::reset() {
+	for (int c = 0; c < _channels; ++c) {
+		_engines[c]->reset();
+	}
+}
+
+void FourFO::sampleRateChange() {
+	for (int c = 0; c < _channels; ++c) {
+		_engines[c]->sampleRateChange();
+	}
+}
+
+bool FourFO::active() {
+	return (
+		outputs[PHASE3_OUTPUT].isConnected() ||
+		outputs[PHASE2_OUTPUT].isConnected() ||
+		outputs[PHASE1_OUTPUT].isConnected() ||
+		outputs[PHASE0_OUTPUT].isConnected()
+	);
+}
+
+int FourFO::channels() {
+	return inputs[PITCH_INPUT].getChannels();
+}
+
+void FourFO::addChannel(int c) {
+	_engines[c] = new Engine();
+	_engines[c]->reset();
+	_engines[c]->sampleRateChange();
+	if (c > 0) {
+		_engines[c]->phasor.syncPhase(_engines[0]->phasor);
+	}
+}
+
+void FourFO::removeChannel(int c) {
+	delete _engines[c];
+	_engines[c] = NULL;
+}
+
+void FourFO::modulate() {
+	_wave = (Wave)roundf(params[WAVE_PARAM].getValue());
+	_slowMode = params[SLOW_PARAM].getValue() > 0.5f;
+}
+
+void FourFO::modulateChannel(int c) {
+	Engine& e = *_engines[c];
+
+	setFrequency(params[FREQUENCY_PARAM], inputs[PITCH_INPUT], e.phasor, c);
+
+	switch (_wave) {
+		case SQUARE_WAVE: {
+			float pw = params[SAMPLE_PWM_PARAM].getValue();
+			if (inputs[SAMPLE_PWM_INPUT].isConnected()) {
+				pw *= clamp(inputs[SAMPLE_PWM_INPUT].getPolyVoltage(c) / 5.0f, -1.0f, 1.0f);
+			}
+			pw *= 1.0f - 2.0f * e.square.minPulseWidth;
+			pw *= 0.5f;
+			pw += 0.5f;
+			e.square.setPulseWidth(pw);
+			e.sampleSteps = 1;
+			break;
+		}
+		case STEPPED_WAVE: {
+			e.sampleSteps = 1;
+			break;
+		}
+		default: {
+			float sample = fabsf(params[SAMPLE_PWM_PARAM].getValue());
+			if (inputs[SAMPLE_PWM_INPUT].isConnected()) {
+				sample *= clamp(fabsf(inputs[SAMPLE_PWM_INPUT].getPolyVoltage(c)) / 5.0f, 0.0f, 1.0f);
+			}
+			float maxSampleSteps = (e.phasor._sampleRate / e.phasor._frequency) / 4.0f;
+			e.sampleSteps = clamp((int)(sample * maxSampleSteps), 1, (int)maxSampleSteps);
+		}
+	}
+
+	float smooth = params[SMOOTH_PARAM].getValue();
+	if (inputs[SMOOTH_INPUT].isConnected()) {
+		smooth *= clamp(inputs[SMOOTH_INPUT].getPolyVoltage(c) / 10.0f, 0.0f, 1.0f);
+	}
+	float sr = APP->engine->getSampleRate();
+	e.phase3Smoother.setParams(sr, e.phasor._frequency, smooth);
+	e.phase2Smoother.setParams(sr, e.phasor._frequency, smooth);
+	e.phase1Smoother.setParams(sr, e.phasor._frequency, smooth);
+	e.phase0Smoother.setParams(sr, e.phasor._frequency, smooth);
+
+	e.offset = params[OFFSET_PARAM].getValue();
+	if (inputs[OFFSET_INPUT].isConnected()) {
+		e.offset *= clamp(inputs[OFFSET_INPUT].getPolyVoltage(c) / 5.0f, -1.0f, 1.0f);
+	}
+	e.offset *= 5.0f;
+	e.scale = params[SCALE_PARAM].getValue();
+	if (inputs[SCALE_INPUT].isConnected()) {
+		e.scale *= clamp(inputs[SCALE_INPUT].getPolyVoltage(c) / 10.0f, 0.0f, 1.0f);
+	}
+
+	e.phase3Offset = phaseOffset(c, params[PHASE3_PARAM], inputs[PHASE3_INPUT], basePhase3Offset);
+	e.phase2Offset = phaseOffset(c, params[PHASE2_PARAM], inputs[PHASE2_INPUT], basePhase2Offset);
+	e.phase1Offset = phaseOffset(c, params[PHASE1_PARAM], inputs[PHASE1_INPUT], basePhase1Offset);
+	e.phase0Offset = phaseOffset(c, params[PHASE0_PARAM], inputs[PHASE0_INPUT], basePhase0Offset);
+}
+
+void FourFO::processChannel(const ProcessArgs& args, int c) {
+	Engine& e = *_engines[c];
+
+	if (e.resetTrigger.next(inputs[RESET_INPUT].getPolyVoltage(c))) {
+		e.phasor.resetPhase();
+	}
+
+	e.phasor.advancePhase();
+	bool useSample = false;
+	if (e.sampleSteps > 1) {
+		++e.sampleStep;
+		if (e.sampleStep >= e.sampleSteps) {
+			e.sampleStep = 0;
+		}
+		else {
+			useSample = true;
+		}
+	}
+	updateOutput(c, useSample, outputs[PHASE3_OUTPUT], e.phase3Offset, e.phase3Sample, e.phase3Active, e.phase3Smoother);
+	updateOutput(c, useSample, outputs[PHASE2_OUTPUT], e.phase2Offset, e.phase2Sample, e.phase2Active, e.phase2Smoother);
+	updateOutput(c, useSample, outputs[PHASE1_OUTPUT], e.phase1Offset, e.phase1Sample, e.phase1Active, e.phase1Smoother);
+	updateOutput(c, useSample, outputs[PHASE0_OUTPUT], e.phase0Offset, e.phase0Sample, e.phase0Active, e.phase0Smoother);
+}
+
+Phasor::phase_delta_t FourFO::phaseOffset(int c, Param& p, Input& i, Phasor::phase_delta_t baseOffset) {
+	float o = p.getValue() * Phasor::cyclePhase / 2.0f;
+	if (i.isConnected()) {
+		o *= clamp(i.getPolyVoltage(c) / 5.0f, -1.0f, 1.0f);
+	}
+	return baseOffset - o;
+}
+
+void FourFO::updateOutput(int c, bool useSample, Output& output, Phasor::phase_delta_t& offset, float& sample, bool& active, Smoother& smoother) {
+	if (output.isConnected()) {
+		output.setChannels(_channels);
+		if (!useSample || !active) {
+			float v = 0.0f;
+			switch (_wave) {
+				case NO_WAVE: {
+					assert(false);
+				}
+				case SINE_WAVE: {
+					v = _engines[c]->sine.nextFromPhasor(_engines[c]->phasor, offset);
+					break;
+				}
+				case TRIANGLE_WAVE: {
+					v = _engines[c]->triangle.nextFromPhasor(_engines[c]->phasor, offset);
+					break;
+				}
+				case RAMP_UP_WAVE: {
+					v = _engines[c]->ramp.nextFromPhasor(_engines[c]->phasor, offset);
+					break;
+				}
+				case RAMP_DOWN_WAVE: {
+					v = -_engines[c]->ramp.nextFromPhasor(_engines[c]->phasor, offset);
+					break;
+				}
+				case SQUARE_WAVE: {
+					v = _engines[c]->square.nextFromPhasor(_engines[c]->phasor, offset);
+					break;
+				}
+				case STEPPED_WAVE: {
+					v = _engines[c]->stepped.nextFromPhasor(_engines[c]->phasor, offset);
+					break;
+				}
+			}
+			sample = amplitude * _engines[c]->scale * v + _engines[c]->offset;
+		}
+		output.setVoltage(smoother.next(sample), c);
+		active = true;
+	}
+	else {
+		active = false;
+	}
+}
+
+struct FourFOWidget : BGModuleWidget {
+	static constexpr int hp = 10;
+
+	FourFOWidget(FourFO* module) {
+		setModule(module);
+		box.size = Vec(RACK_GRID_WIDTH * hp, RACK_GRID_HEIGHT);
+		setPanel(box.size, "FourFO");
+		createScrews();
+
+		// generated by svg_widgets.rb
+		auto frequencyParamPosition = Vec(23.0, 42.0);
+		auto waveParamPosition = Vec(95.0, 53.0);
+		auto slowParamPosition = Vec(49.0, 108.7);
+		auto samplePwmParamPosition = Vec(13.0, 149.0);
+		auto smoothParamPosition = Vec(48.0, 149.0);
+		auto offsetParamPosition = Vec(13.0, 198.0);
+		auto scaleParamPosition = Vec(48.0, 198.0);
+		auto phase0ParamPosition = Vec(121.0, 193.0);
+		auto phase1ParamPosition = Vec(84.0, 193.0);
+		auto phase2ParamPosition = Vec(84.0, 251.0);
+		auto phase3ParamPosition = Vec(121.0, 251.0);
+
+		auto samplePwmInputPosition = Vec(11.0, 230.0);
+		auto smoothInputPosition = Vec(43.0, 230.0);
+		auto offsetInputPosition = Vec(11.0, 274.0);
+		auto scaleInputPosition = Vec(43.0, 274.0);
+		auto pitchInputPosition = Vec(11.0, 318.0);
+		auto resetInputPosition = Vec(43.0, 318.0);
+		auto phase0InputPosition = Vec(117.0, 104.0);
+		auto phase1InputPosition = Vec(80.0, 104.0);
+		auto phase2InputPosition = Vec(80.0, 322.0);
+		auto phase3InputPosition = Vec(117.0, 322.0);
+
+		auto phase0OutputPosition = Vec(117.0, 146.0);
+		auto phase1OutputPosition = Vec(80.0, 146.0);
+		auto phase2OutputPosition = Vec(80.0, 280.0);
+		auto phase3OutputPosition = Vec(117.0, 280.0);
+		// end generated by svg_widgets.rb
+
+		addParam(createParam<Knob38>(frequencyParamPosition, module, FourFO::FREQUENCY_PARAM));
+		{
+			auto w = createParam<Knob16>(waveParamPosition, module, FourFO::WAVE_PARAM);
+			auto k = dynamic_cast<SvgKnob*>(w);
+			k->snap = true;
+			k->minAngle = 0.0;
+			k->maxAngle = M_PI;
+			k->speed = 3.0;
+			addParam(w);
+		}
+		addParam(createParam<IndicatorButtonGreen9>(slowParamPosition, module, FourFO::SLOW_PARAM));
+		addParam(createParam<Knob16>(samplePwmParamPosition, module, FourFO::SAMPLE_PWM_PARAM));
+		addParam(createParam<Knob16>(smoothParamPosition, module, FourFO::SMOOTH_PARAM));
+		addParam(createParam<Knob16>(offsetParamPosition, module, FourFO::OFFSET_PARAM));
+		addParam(createParam<Knob16>(scaleParamPosition, module, FourFO::SCALE_PARAM));
+		addPhaseParam(phase3ParamPosition, module, FourFO::PHASE3_PARAM, Phasor::phaseToRadians(basePhase3Offset));
+		addPhaseParam(phase2ParamPosition, module, FourFO::PHASE2_PARAM, Phasor::phaseToRadians(basePhase2Offset));
+		addPhaseParam(phase1ParamPosition, module, FourFO::PHASE1_PARAM, Phasor::phaseToRadians(basePhase1Offset));
+		addPhaseParam(phase0ParamPosition, module, FourFO::PHASE0_PARAM, Phasor::phaseToRadians(basePhase0Offset));
+
+		addInput(createInput<Port24>(samplePwmInputPosition, module, FourFO::SAMPLE_PWM_INPUT));
+		addInput(createInput<Port24>(smoothInputPosition, module, FourFO::SMOOTH_INPUT));
+		addInput(createInput<Port24>(offsetInputPosition, module, FourFO::OFFSET_INPUT));
+		addInput(createInput<Port24>(scaleInputPosition, module, FourFO::SCALE_INPUT));
+		addInput(createInput<Port24>(pitchInputPosition, module, FourFO::PITCH_INPUT));
+		addInput(createInput<Port24>(resetInputPosition, module, FourFO::RESET_INPUT));
+		addInput(createInput<Port24>(phase0InputPosition, module, FourFO::PHASE0_INPUT));
+		addInput(createInput<Port24>(phase1InputPosition, module, FourFO::PHASE1_INPUT));
+		addInput(createInput<Port24>(phase2InputPosition, module, FourFO::PHASE2_INPUT));
+		addInput(createInput<Port24>(phase3InputPosition, module, FourFO::PHASE3_INPUT));
+
+		addOutput(createOutput<Port24>(phase0OutputPosition, module, FourFO::PHASE0_OUTPUT));
+		addOutput(createOutput<Port24>(phase1OutputPosition, module, FourFO::PHASE1_OUTPUT));
+		addOutput(createOutput<Port24>(phase2OutputPosition, module, FourFO::PHASE2_OUTPUT));
+		addOutput(createOutput<Port24>(phase3OutputPosition, module, FourFO::PHASE3_OUTPUT));
+	}
+
+	void addPhaseParam(const Vec& position, Module* module, FourFO::ParamsIds paramId, float rotation) {
+		auto w = createParam<Knob16>(position, module, paramId);
+		auto k = dynamic_cast<SvgKnob*>(w);
+		k->minAngle += 0.5 * M_PI - rotation;
+		k->maxAngle += 0.5 * M_PI - rotation;
+		addParam(w);
+	}
+};
+
+Model* modelFourFO = createModel<FourFO, FourFOWidget>("Bogaudio-FourFO", "4FO", "Quadrature LFO", "LFO", "Random", "Polyphonic");
diff --git a/src/FourFO.hpp b/src/FourFO.hpp
@@ -0,0 +1,129 @@
+#pragma once
+
+#include "bogaudio.hpp"
+#include "lfo_base.hpp"
+
+using namespace bogaudio::dsp;
+
+extern Model* modelFourFO;
+
+namespace bogaudio {
+
+struct FourFO : LFOBase {
+	enum ParamsIds {
+		FREQUENCY_PARAM,
+		WAVE_PARAM,
+		SLOW_PARAM,
+		SAMPLE_PWM_PARAM,
+		SMOOTH_PARAM,
+		OFFSET_PARAM,
+		SCALE_PARAM,
+		PHASE0_PARAM,
+		PHASE1_PARAM,
+		PHASE2_PARAM,
+		PHASE3_PARAM,
+		NUM_PARAMS
+	};
+
+	enum InputsIds {
+		SAMPLE_PWM_INPUT,
+		SMOOTH_INPUT,
+		OFFSET_INPUT,
+		SCALE_INPUT,
+		PITCH_INPUT,
+		RESET_INPUT,
+		PHASE0_INPUT,
+		PHASE1_INPUT,
+		PHASE2_INPUT,
+		PHASE3_INPUT,
+		NUM_INPUTS
+	};
+
+	enum OutputsIds {
+		PHASE0_OUTPUT,
+		PHASE1_OUTPUT,
+		PHASE2_OUTPUT,
+		PHASE3_OUTPUT,
+		NUM_OUTPUTS
+	};
+
+	enum Wave {
+		NO_WAVE,
+		RAMP_UP_WAVE,
+		RAMP_DOWN_WAVE,
+		SINE_WAVE,
+		TRIANGLE_WAVE,
+		SQUARE_WAVE,
+		STEPPED_WAVE
+	};
+
+	struct Engine {
+		int sampleSteps = 1;
+		int sampleStep = 0;
+		float offset = 0.0f;
+		float scale = 0.0f;
+		PositiveZeroCrossing resetTrigger;
+
+		Phasor phasor;
+		SineTableOscillator sine;
+		TriangleOscillator triangle;
+		SawOscillator ramp;
+		SquareOscillator square;
+		SteppedRandomOscillator stepped;
+
+		Phasor::phase_delta_t phase3Offset = 0.0f;
+		Phasor::phase_delta_t phase2Offset = 0.0f;
+		Phasor::phase_delta_t phase1Offset = 0.0f;
+		Phasor::phase_delta_t phase0Offset = 0.0f;
+
+		float phase3Sample = 0.0f;
+		float phase2Sample = 0.0f;
+		float phase1Sample = 0.0f;
+		float phase0Sample = 0.0f;
+
+		bool phase3Active = false;
+		bool phase2Active = false;
+		bool phase1Active = false;
+		bool phase0Active = false;
+
+		Smoother phase3Smoother;
+		Smoother phase2Smoother;
+		Smoother phase1Smoother;
+		Smoother phase0Smoother;
+
+		void reset();
+		void sampleRateChange();
+	};
+
+	const float amplitude = 5.0f;
+	Wave _wave = NO_WAVE;
+	Engine* _engines[maxChannels] {};
+
+	FourFO() : LFOBase(NUM_PARAMS, NUM_INPUTS, NUM_OUTPUTS) {
+		configParam<LFOFrequencyParamQuantity>(FREQUENCY_PARAM, -5.0f, 8.0f, 0.0, "Frequency", " Hz");
+		configParam(WAVE_PARAM, 1.0, 6.0, 3.0, "Waveform");
+		configParam(SLOW_PARAM, 0.0, 1.0, 0.0, "Slow");
+		configParam(SAMPLE_PWM_PARAM, -1.0, 1.0, 0.0, "Width", "%", 0.0f, 100.0f);
+		configParam(SMOOTH_PARAM, 0.0f, 1.0f, 0.0f, "Smoothing", "%", 0.0f, 100.0f);
+		configParam(OFFSET_PARAM, -1.0, 1.0, 0.0, "Offset", " V", 0.0f, 5.0f);
+		configParam(SCALE_PARAM, 0.0, 1.0, 1.0, "Scale", "%", 0.0f, 100.0f);
+		configParam(PHASE3_PARAM, -1.0, 1.0, 0.0, "Phase 270", "º", 0.0f, 180.0f);
+		configParam(PHASE2_PARAM, -1.0, 1.0, 0.0, "Phase 180", "º", 0.0f, 180.0f);
+		configParam(PHASE1_PARAM, -1.0, 1.0, 0.0, "Phase 90", "º", 0.0f, 180.0f);
+		configParam(PHASE0_PARAM, -1.0, 1.0, 0.0f, "Phase 0", "º", 0.0f, 180.0f);
+	}
+
+	void reset() override;
+	void sampleRateChange() override;
+	bool active() override;
+	int channels() override;
+	void addChannel(int c) override;
+	void removeChannel(int c) override;
+	void modulate() override;
+	void modulateChannel(int c) override;
+	void processChannel(const ProcessArgs& args, int c) override;
+	Phasor::phase_delta_t phaseOffset(int c, Param& p, Input& i, Phasor::phase_delta_t baseOffset);
+	void updateOutput(int c, bool useSample, Output& output, Phasor::phase_delta_t& offset, float& sample, bool& active, Smoother& smoother);
+};
+
+} // namespace bogaudio
diff --git a/src/bogaudio.cpp b/src/bogaudio.cpp
@@ -31,6 +31,7 @@
 #include "EQS.hpp"
 #include "FFB.hpp"
 #include "FMOp.hpp"
+#include "FourFO.hpp"
 #include "FourMan.hpp"
 #include "FlipFlop.hpp"
 #include "Follow.hpp"
@@ -138,8 +139,9 @@ void init(rack::Plugin *p) {
 	p->addModel(modelChirp);
 
 	p->addModel(modelLFO);
-	p->addModel(modelEightFO);
 	p->addModel(modelLLFO);
+	p->addModel(modelFourFO);
+	p->addModel(modelEightFO);
 
 	p->addModel(modelVCF);
 	p->addModel(modelLVCF);

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

M	README-prerelease.md	\|	10	++++++++--
M	plugin.json	\|	27	+++++++++++++++++++--------
M	res-pp/EightFO-dark-pp.svg	\|	188	+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
M	res-pp/EightFO-lowcontrast-pp.svg	\|	188	+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
M	res-pp/EightFO-pp.svg	\|	186	+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
A	res-pp/FourFO-dark-pp.svg	\|	631	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A	res-pp/FourFO-lowcontrast-pp.svg	\|	631	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A	res-pp/FourFO-pp.svg	\|	567	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M	res-src/EightFO-src.svg	\|	72	++++++++++--------------------------------------------------------------
A	res-src/FourFO-src.svg	\|	234	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M	res-src/defs.svg	\|	50	++++++++++++++++++++++++++++++++++++++++++++++++++
M	res/EightFO-dark.svg	\|	0
M	res/EightFO-lowcontrast.svg	\|	0
M	res/EightFO.svg	\|	0
A	res/FourFO-dark.svg	\|	0
A	res/FourFO-lowcontrast.svg	\|	0
A	res/FourFO.svg	\|	0
A	src/FourFO.cpp	\|	282	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A	src/FourFO.hpp	\|	129	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M	src/bogaudio.cpp	\|	4	+++-