<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8" />
  <title>sub.blue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="pinterest" content="nohover" />
  <meta name="build" content="20160905" />

  <meta property="og:site_name" content="sub.blue" />
  <meta property="og:title" content="sub.blue" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="http://sub.blue" />
  <meta property="og:image" content="http://cdn.sub.blue/images/subblue-avatar.jpg?20160905" />
  <meta property="og:description" content="The work of Tom Beddard" />
  <meta property="fb:app_id" content="269025596453489" />
  <link rel="image_src" href="http://cdn.sub.blue/images/subblue-avatar.jpg?20160905" id="image_src" />

  <meta name="twitter:card" content="photo" />
  <meta name="twitter:site" content="@subblue" />
  <meta name="twitter:creator" content="@subblue" />
  <meta name="twitter:title" content="sub.blue" />
  <meta name="twitter:url" content="http://sub.blue" />
  <meta name="twitter:image" content="http://cdn.sub.blue/images/subblue-avatar.jpg?20160905" />

  <link rel="canonical" href="http://sub.blue" />
  <link rel="me" href="https://twitter.com/subblue" />
  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="apple-touch-icon" href="/images/subblue-icon-60.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/subblue-icon-76.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/images/subblue-icon-120.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/images/subblue-icon-152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/subblue-icon-180.png">

  <link rel="stylesheet" type="text/css" href="http://cdn.sub.blue/scripts/main.css?20181030" />
  <link href="http://sub.blue/feed.rss" rel="alternate" title="RSS" type="application/rss+xml" />

  <!--[if lt IE 9]>
  <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js' type='text/javascript'></script>
  <![endif]-->
</head>

<body>

  <article class="page hidden style-light home-page">
    <h1 class="site-title">Sub
      <span>blue</span>
    </h1>

    <div class="scrollable">

      <nav class="home-list clearfix scroll-content">
        <p class="home-intro">
          <a href="/about">Work by Tom Beddard</a>
        </p>
        <p class="home-extra">
          <a href="https://www.kpv-lab.co.uk/jobs/">Work with us! Developer positions open at KPV LAB Edinburgh</a>
        </p>

        <figure class="home-thumb planar-thumb" data-img="http://cdn.sub.blue/images/thumbnails/planar-400.jpg?20160905"
          id="p-planar">
          <a href="/planar" class="thumb">
            <span>Planar Planet</span>
          </a>
        </figure>
        <figure class="home-thumb apollonian-thumb" data-img="http://cdn.sub.blue/images/thumbnails/apollonian-400.jpg?20160905"
          id="p-apollonian">
          <a href="/apollonian" class="thumb">
            <span>Apollonian Artefacts</span>
          </a>
        </figure>
        <figure class="home-thumb aurullia-thumb" data-img="http://cdn.sub.blue/images/thumbnails/aurullia-400.jpg?20160905"
          id="p-aurullia">
          <a href="/aurullia" class="thumb">
            <span>Aurullia</span>
          </a>
        </figure>
        <figure class="home-thumb frame-fields-thumb" data-img="http://cdn.sub.blue/images/thumbnails/fields-400.jpg?20160905"
          id="p-frame-fields">
          <a href="/frame-fields" class="thumb">
            <span>Frame Fields</span>
          </a>
        </figure>
        <figure class="home-thumb venetian-masquerade2-thumb" data-img="http://cdn.sub.blue/images/thumbnails/venetian-masquerade2-400.jpg?20160905"
          id="p-venetian-masquerade2">
          <a href="/venetian-masquerade2" class="thumb">
            <span>Venetian Masquerade II</span>
          </a>
        </figure>
        <figure class="home-thumb venetian-masquerade-thumb" data-img="http://cdn.sub.blue/images/thumbnails/venetian-masquerade1-400.jpg?20160905"
          id="p-venetian-masquerade">
          <a href="/venetian-masquerade" class="thumb">
            <span>Venetian Masquerade I</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/skullicle-400.jpg?20160905" id="p-skullicle">
          <a href="/skullicle" class="thumb">
            <span>Skullicle</span>
          </a>
        </figure>
        <figure class="home-thumb frax-thumb" data-img="http://cdn.sub.blue/images/thumbnails/frax-400.jpg?20160905" id="p-frax">
          <a href="/frax" class="thumb">
            <span>Frax App</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/treenet-400.jpg?20160905" id="p-treenet">
          <a href="/treenet" class="thumb">
            <span>Tree Net</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/voidspace-400.jpg?20160905" id="p-voidspace">
          <a href="/voidspace" class="thumb">
            <span>Voidspace Terminal</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/nanoflakes-400.jpg?20160905" id="p-nanoflakes">
          <a href="/nanoflakes" class="thumb">
            <span>Nanoflakes</span>
          </a>
        </figure>
        <figure class="home-thumb faberge-thumb" data-img="http://cdn.sub.blue/images/thumbnails/faberge-400.jpg?20160905"
          id="p-faberge">
          <a href="/faberge" class="thumb">
            <span>Faberg&eacute; Fractals</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/inkwell-400.jpg?20160905" id="p-inkwell">
          <a href="/inkwell" class="thumb">
            <span>Inkwell Doodles</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/musicbox-400.jpg?20160905" id="p-music-box">
          <a href="/music-box" class="thumb">
            <span>Music Box</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/temple-traverse-400.jpg?20160905"
          id="p-temple-traverse">
          <a href="/temple-traverse" class="thumb">
            <span>Temple Traverse</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/leclaireur-400.jpg?20160905" id="p-leclaireur">
          <a href="/leclaireur" class="thumb">
            <span>L'Eclaireur</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/surface-detail-400.jpg?20160905" id="p-surface-detail">
          <a href="/surface-detail" class="thumb">
            <span>Surface Detail</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/formula-400.jpg?20160905" id="p-the-formula">
          <a href="/the-formula" class="thumb">
            <span>The Formula</span>
          </a>
        </figure>
        <figure class="home-thumb new-2015-thumb" data-img="http://cdn.sub.blue/images/thumbnails/2015-400.jpg?20160905"
          id="p-2015">
          <a href="/2015" class="thumb">
            <span>The 2015 Edition</span>
          </a>
        </figure>
        <figure class="home-thumb fractal-lab-thumb" data-img="http://cdn.sub.blue/images/thumbnails/fractal-lab-400.jpg?20160905"
          id="p-fractal-lab">
          <a href="/fractal-lab" class="thumb">
            <span>Fractal Lab</span>
          </a>
        </figure>
        <figure class="home-thumb " data-img="http://cdn.sub.blue/images/thumbnails/archive-400.jpg?20160905" id="p-archive">
          <a href="/archive" class="thumb">
            <span>Archive</span>
          </a>
        </figure>

        <hr />

        <figure class="home-panel panel-thumb">
          <a href="http://fract.al" class="thumb nozoom get-frax">Get Frax</a>
        </figure>

        <figure class="home-panel panel-thumb">
          <a href="/save-a-life" class="thumb nozoom be-a-match">Be a match, save a life</a>
        </figure>

        <figure class="home-panel panel-thumb">
          <a href="/olivia" class="thumb nozoom ojb">Olivia</a>
        </figure>

      </nav>

    </div>


    <aside class="about-btn">
      <a href="/about" class="nozoom">About</a>
    </aside>
  </article>

  <div class="copyright" id="copyright">
    <span title="&copy; 2016 Tom Beddard">&copy; 2016</span>
  </div>


  <a href="/" class="close-btn" title="Home">
    <svg class="icon" title="Home" viewBox="0 0 50 50">
      <g fill-rule="evenodd">
        <path d="M.308 50H0V0h50v.308L38.308 12H12v26.308L.308 50z"></path>
      </g>
    </svg>
  </a>

  <div style="display:none;">
    <div class="sharing">
      <a href="#twitter" class="twitter-btn" title="Share on Twitter">
        <svg class="icon" viewBox="0 0 40 40">
          <g fill-rule="evenodd">
            <path d="M20 0C8.956 0 0 8.956 0 20c0 11.047 8.955 20 20 20 11.047 0 20-8.953 20-20C40 8.957 31.046 0 20 0zm10.076 15.968c.01.216.014.433.014.652 0 6.66-5.07 14.34-14.34 14.34-2.846 0-5.497-.833-7.727-2.263.395.047.795.07 1.202.07 2.362 0 4.536-.806 6.26-2.157-2.205-.042-4.066-1.5-4.708-3.502.307.06.623.09.948.09.46 0 .905-.06 1.328-.176-2.307-.463-4.044-2.5-4.044-4.94v-.066c.68.377 1.456.604 2.283.63C9.94 17.742 9.05 16.2 9.05 14.452c0-.923.25-1.79.683-2.533 2.486 3.05 6.2 5.056 10.39 5.265-.086-.368-.13-.753-.13-1.148 0-2.783 2.255-5.04 5.04-5.04 1.45 0 2.76.613 3.678 1.59 1.15-.224 2.228-.644 3.202-1.222-.378 1.178-1.176 2.165-2.217 2.788 1.02-.12 1.992-.393 2.895-.793-.674 1.013-1.53 1.9-2.514 2.61z"></path>
          </g>
        </svg>
      </a>
      <a href="#gplus" class="gplus-btn" title="Share on Google+">
        <svg class="icon" viewBox="0 0 40 40">
          <g fill-rule="evenodd">
            <path d="M20 0C8.956 0 0 8.956 0 20c0 11.047 8.955 20 20 20 11.047 0 20-8.953 20-20C40 8.957 31.046 0 20 0zm10.327 18.64v-3.173H28.76v3.174h-3.17v1.586h3.17v3.193h1.567v-3.194h3.185V18.64h-3.185zM22.31 22.2l-1.14-.888c-.348-.288-.824-.668-.824-1.365 0-.7.476-1.144.888-1.556 1.33-1.046 2.66-2.16 2.66-4.507 0-2.414-1.52-3.683-2.248-4.286h1.963l2.06-1.294h-6.242c-1.713 0-4.18.405-5.988 1.897-1.362 1.174-2.026 2.794-2.026 4.253 0 2.475 1.9 4.985 5.258 4.985.317 0 .663-.03 1.012-.064-.156.382-.315.7-.315 1.238 0 .984.504 1.586.95 2.158-1.427.098-4.09.256-6.052 1.462-1.87 1.112-2.438 2.73-2.438 3.872 0 2.35 2.215 4.54 6.81 4.54 5.447 0 8.33-3.015 8.33-6 0-2.192-1.265-3.27-2.66-4.445zm-4.15-3.652c-2.724 0-3.958-3.523-3.958-5.648 0-.828.156-1.683.695-2.35.508-.636 1.393-1.048 2.22-1.048 2.627 0 3.99 3.555 3.99 5.84 0 .573-.064 1.586-.792 2.32-.51.508-1.362.886-2.154.886zm.033 12.765c-3.39 0-5.575-1.62-5.575-3.875 0-2.254 2.027-3.016 2.724-3.268 1.33-.448 3.04-.51 3.326-.51.317 0 .475 0 .727.032 2.41 1.714 3.455 2.57 3.455 4.192 0 1.965-1.616 3.43-4.657 3.43z"></path>
          </g>
        </svg>
      </a>
      <a href="#facebook" class="facebook-btn" title="Share on Facebook">
        <svg class="icon" viewBox="0 0 40 40">
          <g fill-rule="evenodd">
            <path d="M20 0C8.954 0 0 8.956 0 20c0 11.047 8.954 20 20 20s20-8.953 20-20C40 8.957 31.045 0 20 0zm5.293 19.917H21.83V32.27h-5.133V19.916h-2.442v-4.36h2.442V12.73c0-2.022.96-5.18 5.18-5.18l3.802.016V11.8h-2.76c-.452 0-1.09.226-1.09 1.188v2.57h3.914l-.45 4.36z"></path>
          </g>
        </svg>
      </a>
    </div>
  </div>


  <script type="text/javascript" src="http://cdn.sub.blue/scripts/main.js?20160905"></script>

  <script type="text/javascript">
    'use strict';
    (function (d) {
      var config = {
        kitId: 'lki6kvq',
        scriptTimeout: 3000
      },
        h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = '//use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
    })(document);

    window.setTimeout(function () {
      document.documentElement.classList.remove('wf-loading');
      document.documentElement.classList.add('wf-loaded');
    }, 1500);

    // GA
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-64260-9', 'auto');
    ga('send', 'pageview');

  </script>

</body>

</html>
