Old school D3 from simpler times

All examples By author By category About

mcanthony

Full window Github gist

PreAmp

<div class="container">
  <div class="left-side">
    <div class="title">
      PREAMP
    </div>
  </div>
  <div class="right-side">
    <div class="presets">
      <span>Presets:</span>
      <div class="dropper">
        Custom
        <span></span>
      </div>
      <button>Reset</button>
    </div>
    <div class="amp">
      <svg width="500" height="320">
        <defs>
          <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%"   stop-color="#9896B4"/>
            <stop offset="100%" stop-color="#807EFA"/>
          </linearGradient>
        </defs>

<path class="wave"
              fill="none"
              stroke="#FAEE83"
              stroke-width="3"
              stroke-linejoin="round" 
              stroke-linecap="round"
              />
        
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 60 10 L 60 310"/>
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 120 10 L 120 310"/>
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 180 10 L 180 310"/>
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 240 10 L 240 310"/>
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 300 10 L 300 310"/>
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 360 10 L 360 310"/>
        <path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
              stroke-linejoin="round" 
              stroke-linecap="round" d="M 420 10 L 420 310"/>
        
        <rect class="amount-track" name="0" width="4" x="58" fill="url(#linear)" />
        <circle cx="60" cy="310" r="2" fill="#807EFA"/>
        <rect class="amount-track" name="1" width="4" x="118" fill="url(#linear)" />
        <circle cx="120" cy="310" r="2" fill="#807EFA"/>
        <rect class="amount-track" name="2" width="4" x="178" fill="url(#linear)" />
        <circle cx="180" cy="310" r="2" fill="#807EFA"/>
        <rect class="amount-track" name="3" width="4" x="238" fill="url(#linear)" />
        <circle cx="240" cy="310" r="2" fill="#807EFA"/>
        <rect class="amount-track" name="4" width="4" x="298" fill="url(#linear)" />
        <circle cx="300" cy="310" r="2" fill="#807EFA"/>
        <rect class="amount-track" name="5" width="4" x="358" fill="url(#linear)" />
        <circle cx="360" cy="310" r="2" fill="#807EFA"/>
        <rect class="amount-track" name="6" width="4" x="418" fill="url(#linear)" />
        <circle cx="420" cy="310" r="2" fill="#807EFA"/>
        
        <circle class="dragger" name="0" cx="60" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
        <circle class="dragger" name="1" cx="120" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
        <circle class="dragger" name="2" cx="180" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
        <circle class="dragger" name="3" cx="240" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
        <circle class="dragger" name="4" cx="300" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
        <circle class="dragger" name="5" cx="360" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
        <circle class="dragger" name="6" cx="420" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />

</svg>

<input type="range" value="50" orient="vertical" name='0' style="left: 60px;"/>
      <input type="range" value="75"  orient="vertical" name='1' style="left: 120px;"/>
      <input type="range" value="25" orient="vertical" name='2' style="left: 180px;"/>
      <input type="range"  value="90" orient="vertical" name='3' style="left: 240px;"/>
      <input type="range"  value="10" orient="vertical" name='4' style="left: 300px;"/>
      <input type="range"  value="60" orient="vertical" name='5' style="left: 360px;"/>
      <input type="range"  value="50" orient="vertical" name='6' style="left: 420px;"/>
    </div>
    <div class="labels">
      <div class="lab">32</div>
      <div class="lab">64</div>
      <div class="lab">128</div>
      <div class="lab">256</div>
      <div class="lab">512</div>
      <div class="lab">1K</div>
      <div class="lab">2K</div>
    </div>
  </div>
  
</div>

<p>Based on a <a href="https://dribbble.com/shots/2263756-Day-090-Equalizer" target="_blank"><img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-big-77cb1edbdf66504815845c671e84465c.png"></a> by <a href="https://dribbble.com/NpaulFlavius"  target="_blank">Paul Flavius Nechita</a></p>