<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brian Hokke</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700">
    <script type="module" crossorigin src="/assets/index-sw76wduF.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CQtft1t7.css">
  </head>
  <body data-design="fluid">
    <div id="frame"></div>

    <div id="design1-container">
      <div id="image1" class="bgimage sketch-bg"></div>
      <canvas id="fluid-canvas"></canvas>
      <div class="marquee-overlay">
        <div class="bgimage image-blur"></div>
        <div class="content">
          <div class="marquee" id="marquee">
            <div class="marquee-blur" aria-hidden="true">
              <p class="marquee_text">Brian Hokke</p>
            </div>
            <div class="marquee-clear">
              <p class="marquee_text">Brian Hokke</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="design2-container">
      <svg class="goo-filter" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
            <feColorMatrix in="blur" mode="matrix"
              values="1 0 0 0 0
                      0 1 0 0 0
                      0 0 1 0 0
                      0 0 0 8 -3" />
          </filter>
        </defs>
      </svg>

      <div class="gradient-bg grain">
        <div class="grain"></div>
        <div class="blobs">
          <div class="blob blob-1"></div>
          <div class="blob blob-2"></div>
          <div class="blob blob-3"></div>
          <div class="blob blob-4"></div>
          <div class="blob blob-5"></div>
          <div class="blob blob-mouse"></div>
        </div>
      </div>

      <div id="app">
        <section id="center">
          <h1>Brian Hokke</h1>
        </section>
      </div>
    </div>

    <div id="design3-container">
      <canvas id="morph-canvas"></canvas>
      <div id="design3-title"><h1 class="morph-h1">Brian Hokke</h1></div>
      <button id="morph-mode-toggle" title="Morph"></button>
    </div>

    <div id="design6-container">
      <iframe id="d6-frame" frameborder="0"></iframe>
    </div>

    <div id="design7-container"><h1 id="d7-title">Brian Hokke</h1></div>

    <div id="design8-container"></div>

    <div id="design9-container">
      <iframe id="d9-frame" frameborder="0"></iframe>
    </div>

    <div id="design10-container">
      <iframe id="d10-frame" frameborder="0"></iframe>
    </div>

    <div id="design5-container">
      <canvas id="d5-canvas"></canvas>
      <canvas id="d5-hue-wheel"></canvas>
      <div id="d5-hint">drag to rotate &nbsp;·&nbsp; click to interact</div>
      <div id="d5-debug"></div>
      <div id="d5-counter"><span id="d5-counter-val">21</span></div>
    </div>

    <nav id="design-nav">
      <div id="design-tabs">
        <button class="design-tab" data-value="fluid">Fluid</button>
        <button class="design-tab" data-value="gradient">Gradient</button>
        <button class="design-tab" data-value="lattice">Lattice</button>
        <button class="design-tab" data-value="morph">Morph</button>
        <button class="design-tab" data-value="motions">Motions</button>
        <button class="design-tab" data-value="pattern">Pattern</button>
        <button class="design-tab" data-value="relaxify">Relaxify</button>
        <button class="design-tab" data-value="strata">Strata</button>
        <button class="design-tab" data-value="zencube">Zen Cube</button>

      </div>
      <select id="design-select" aria-label="Switch design">
        <option value="fluid">Fluid</option>
        <option value="gradient">Gradient</option>
        <option value="lattice">Lattice</option>
        <option value="morph">Morph</option>
        <option value="motions">Motions</option>
        <option value="pattern">Pattern</option>
        <option value="relaxify">Relaxify</option>
        <option value="strata">Strata</option>
        <option value="zencube">Zen Cube</option>

      </select>
    </nav>

    <button id="sound-toggle" title="geluid aan/uit">
      <svg id="sound-icon-on" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 7.5h3l4-3.5v12l-4-3.5H3V7.5z" fill="currentColor"/>
        <path d="M13 7a4 4 0 0 1 0 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        <path d="M15 4.5a7 7 0 0 1 0 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      <svg id="sound-icon-off" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:none">
        <path d="M3 7.5h3l4-3.5v12l-4-3.5H3V7.5z" fill="currentColor"/>
        <line x1="13" y1="7" x2="18" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        <line x1="18" y1="7" x2="13" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
    </button>

  </body>
</html>
