index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Component for drawing confetti on a canvas">
  <meta name="author" content="Kiril Vatev">
  <meta name="keywords" content="canvas,confetti,component,module,animation,javascript,catdad">

  <meta name="theme-color" content="#393939">
  <link id="favicon" rel="shortcut icon" type="image/png" />

  <title>canvas confetti</title>

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">

  <style>
    :root {
      --primary-color: #eeeeee;
      --secondary-color: #363636;
      --secondary-variant-color: #272727;
      --background-color: #212121;
      --inner-color: #ffffff;
      --border-color: #555651;

      /* icons by Google - Material Design
       * https://material.io/resources/icons/?style=baseline
       */
      --switch-moon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E");
      --switch-sun-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E");
      --switch-auto-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E");
      --switch-auto-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E");

      --theme-switch: var(--switch-moon-white);
    }

    [data-theme="light"] {
      --primary-color: #212121;
      --secondary-color: #ffffff;
      --background-color: #f0f0f0;
      --inner-color: #363636;

      --theme-switch: var(--switch-sun-black);
    }

    [auto-theme] {
      --theme-switch: var(--switch-auto-white);
    }

    [data-theme="light"][auto-theme] {
      --theme-switch: var(--switch-auto-black);
    }
    
    html {
      scroll-behavior: smooth;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      background: var(--background-color);
      color: var(--primary-color);
      font-size: 1em;
      font-family: 'Noto Sans', sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    .sprite {
      display: none;
    }

    header {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      height: 64px;
    }

    .theme {
      --size: 28px;
      position: relative;
      display: inline-block;
      width: var(--size);
      height: var(--size);
      background: none;
      border: none;
      outline: none;
      margin-right: 12px;
      cursor: pointer;
    }

    .theme:after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: var(--size);
      height: var(--size);
      background-repeat: no-repeat;
      background-position: center;
      background: var(--theme-switch);
    }

    .github-icon {
      --size: 36px;
      position: relative;
      display: block;
      width: var(--size);
      height: var(--size);
      margin-right: 12px;
    }

    .github-icon svg.icon {
      fill: var(--primary-color);
    }

    h1, h2, .center {
      text-align: center;
    }

    h1 {
      margin-top: 64px;
    }

    h2 {
      padding: 0;
      margin: 0.25em;
    }

    p {
      margin: 0.5em;
    }

    .container {
      position: relative;
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }

    .group {
      position: relative;
      width: 100%;
      margin: 40px 0;
      padding-top: 16px;

      border-top: 1px solid var(--border-color);
      border-radius: 20px;
    }

    .run {
      padding: 10px 6px;
      margin: 0.75em auto;
      max-width: 200px;
      width: 100%;
      display: inline-block;

      background: var(--secondary-color);
      border: none;
      outline: none;

      color: var(--inner-color);
      font-weight: bold;
      cursor: pointer;
      user-select: none;

      opacity: 0.8;
      transition: opacity 100ms ease;
    }

    .group .run:hover {
      opacity: 1;
    }

    .editor {
      position: relative;
      min-height: 100px;
      width: 100%;
    }

    .editor.ace_dark.ace_editor {
      background-color: var(--secondary-color);
    }
    .editor.ace_dark .ace_gutter {
      background: var(--secondary-variant-color);
    }
    .editor.ace_dark .ace_gutter .ace_gutter-cell {
      color: var(--inner-color);
      opacity: 0.6;
    }

    .flex-rows {
      position: relative;
      display: block;
      width: 100%;
      padding-bottom: 1em;
    }

    .description {
      width: 94%;
      margin: 10px auto;
      padding: 0;

      align-items: center;
      line-height: 1.5;
    }

    .left {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    a.anchor {
      position: relative;
      color: currentColor;
      text-decoration: none;
    }

    a.anchor:hover::before {
      content: "🔗";
      color: currentColor;
      position: absolute;
      left: -2rem;
      top: 0;
      transform: scale(0.75, 0.75);
    }

    footer {
      font-size: 0.9rem;
      text-align: center;
      line-height: 2;

      background: var(--secondary-color);
    }

    footer span {
      vertical-align: middle;
    }

    span.icon {
      position: relative;
      display: inline-block;
      height: 1em;
      width: 1em;
    }
    svg.icon {
      position: absolute;
      pointer-events: none;
      left: 0;
      width: 100%;
      height: 100%;

      fill: var(--inner-color);
    }

    footer a {
      text-decoration: none;
      color: var(--inner-color);
      opacity: 0.85;
      will-change: opacity;
    }

    footer a:hover {
      opacity: 1;
    }

    .custom-canvas {
      margin-top: 30px;
      width: 100%;
      max-width: 1000px;
      height: 380px;
      background: var(--secondary-color);
    }

    @media (min-width: 44em) {
      .container {
        width: 95%;
      }

      .flex-rows {
        display: flex;
        flex-direction: row;
      }

      .description {
        width: 66%;
        padding: 0 0 0 1em;
      }
    }
  </style>

  <script>
    // this page is a demo that is not built, so fudge the module.exports support
    // define a global `module` so that the actual source file can use it
    window.module = {};
  </script>
  <script src="src/confetti.js"></script>
  <script>
    // define the `module.exports` as the `confetti` global, the way that the
    // cdn distributed file would
    window.confetti = module.exports;
  </script>

  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.0/ace.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
</head>
<body>

  <svg class="sprite" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="code" viewBox="0 0 14 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3 9.5 3ZM4.5 3L0 8 4.5 13 6 11.5 2.5 8 6 4.5 4.5 3 4.5 3Z"/>
      </symbol>

      <symbol id="heart" viewBox="0 0 12 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M11.2 3C10.68 2.37 9.95 2.05 9 2 8.03 2 7.31 2.42 6.8 3 6.29 3.58 6.02 3.92 6 4 5.98 3.92 5.72 3.58 5.2 3 4.68 2.42 4.03 2 3 2 2.05 2.05 1.31 2.38 0.8 3 0.28 3.61 0.02 4.28 0 5 0 5.52 0.09 6.52 0.67 7.67 1.25 8.82 3.01 10.61 6 13 8.98 10.61 10.77 8.83 11.34 7.67 11.91 6.51 12 5.5 12 5 11.98 4.28 11.72 3.61 11.2 2.98L11.2 3Z"/>
      </symbol>

      <symbol id="run" viewBox="0 0 10 10">
        <path d="M2 2L8 6L2 10" />
      </symbol>

      <symbol id="octo" viewBox="0 0 16 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
      </symbol>
    </defs>
  </svg>

  <header>
    <button id="themeToggle" title="Switch Theme" class="theme"></button>
    <a class="github-icon" title="Visit on GitHub" href="https://github.com/catdad/canvas-confetti" aria-label="View source on Github">
      <svg class="icon"><use xlink:href="#octo"></use></svg>
    </a>
  </header>

  <h1>Canvas Confetti</h1>

  <div class="container">
    <div class="group" data-name="cannon">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#basic" id="basic" class="anchor">Basic Cannon</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            The default mode... just your regular basic average blast of confetti. But it's still
            a little cool, right?
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="random">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#random" id="random" class="anchor">Random Direction</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Go crazy with some randomness. Shoot a random amount of confetti in random directions.
            (Go ahead... you know you want to click that button more than once.)
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="realistic">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#realistic" id="realistic" class="anchor">Realistic Look</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            If you happened to get curious and changed the particle count to 400 or so, you saw
            something disappointing. An even "flattened cone" look to the confetti, making it look
            way too perfect and ruining the illusion. We can fix that by mixing a few effects together.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="fireworks">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#fireworks" id="fireworks" class="anchor">Fireworks</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Why click a button repeatedly when you can have code do it for you? Shoot some firework
            of confetti from the sides of page so you can still read the content in the center.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="stars">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#stars" id="stars" class="anchor">Stars</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            You can combine multiple calls to confetti with any settings in order to create
            a more complex effect. Go ahead, combine different shapes, sizes, etc. Stagger them
            for an extra boost of excitement.
          </p>
          <p class="center">✨ Celebrate with a burst of stars! ✨</p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="snow">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#snow" id="snow" class="anchor">Snow</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            The effect is not limited to crazy rapid fire of confetti though. You can create a
            wintery mood with gently falling particles across the entire page.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="continuous">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#continuous" id="continuous" class="anchor">School Pride</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            But if you are into crazy rapid fire of confetti, what could be a better use than
            to show everyone what you are all about? Tell people where you are from with two
            confetti cannons from either side of the page.
          </p>
          <p class="center">🌰 Go Buckeyes! 🌰</p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="paths">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#paths" id="paths" class="anchor">Custom Shapes</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Celebrate some holidays with holiday-appropriate shapes! You can use any SVG path
            to make a confetti out of it. Go wild!
          </p>
          <p class="center">🎃🎄💜</p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="emoji">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#emoji" id="emoji" class="anchor">Emoji</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Don't know any custom shapes? That's okay, just use emoji instead! That's what they
            are for anyway. I mean... why do they even exist if we weren't supposed to make
            confetti out of them? Think about it.
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="custom">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#custom-canvas" id="custom-canvas" class="anchor">Custom Canvas</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            But if you just hate confetti all over the place, there's something here for you
            as well. You can limit where the confetti appear by providing your own canvas element.
          </p>
        </div>
      </div>
      <div class="editor"></div>
      <div class="flex-rows">
        <canvas id="my-canvas" class="custom-canvas"></canvas>
      </div>
    </div>
  </div>

  <footer>
    <a href="https://github.com/catdad">
      <span class="icon">
        <svg class="icon"><use xlink:href="#code"></use></svg>
      </span>
      <span> with </span>
      <span class="icon">
        <svg class="icon"><use xlink:href="#heart"></use></svg>
      </span>
      <span> by <b>catdad</b></span>
    </a>
  </footer>

  <script>
    var editors = [];
    var activeTheme = 'dark';
    var currentStep = parseInt(localStorage.getItem('canvas-confetti/theme'), 10) || 0;
    var prefersLightTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)');
    var themes = {
      light: 'ace/theme/xcode',
      dark: 'ace/theme/monokai'
    };

    var getPreferedTheme = function () {
      return prefersLightTheme ? prefersLightTheme.matches ? 'light' : 'dark' : 'dark';
    };

    var setTheme = function (isAuto, theme) {
      if (isAuto) {
        document.body.setAttribute('auto-theme', true);
        activeTheme = getPreferedTheme();
      } else {
        document.body.removeAttribute('auto-theme');
        activeTheme = theme;
      }

      document.body.setAttribute('data-theme', activeTheme);

      editors.forEach(function(editor) {
        editor.setTheme(themes[activeTheme]);
      });
    };

    var updateTheme = function (step) {
      currentStep = step;

      switch (step) {
        case 0:
          setTheme(true);
          prefersLightTheme && prefersLightTheme.addEventListener('change', setTheme);
          break;
        case 1:
        case 2:
          setTheme(false, step === 1 ? 'dark' : 'light');
          prefersLightTheme && prefersLightTheme.removeListener(setTheme);
          break;
      }

      localStorage.setItem('canvas-confetti/theme', currentStep);
    }

    updateTheme(currentStep);

    document.getElementById('themeToggle').addEventListener('click', function (event) {
      updateTheme(++currentStep % 3);
    });

    var modes = {
      cannon: function cannon() {
        confetti({
          particleCount: 100,
          spread: 70,
          origin: { y: 0.6 }
        });
      },
      random: function random() {
        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }

        confetti({
          angle: randomInRange(55, 125),
          spread: randomInRange(50, 70),
          particleCount: randomInRange(50, 100),
          origin: { y: 0.6 }
        });
      },
      realistic: function realistic() {
        var count = 200;
        var defaults = {
          origin: { y: 0.7 }
        };

        function fire(particleRatio, opts) {
          confetti({
            ...defaults,
            ...opts,
            particleCount: Math.floor(count * particleRatio)
          });
        }

        fire(0.25, {
          spread: 26,
          startVelocity: 55,
        });
        fire(0.2, {
          spread: 60,
        });
        fire(0.35, {
          spread: 100,
          decay: 0.91,
          scalar: 0.8
        });
        fire(0.1, {
          spread: 120,
          startVelocity: 25,
          decay: 0.92,
          scalar: 1.2
        });
        fire(0.1, {
          spread: 120,
          startVelocity: 45,
        });
      },
      fireworks: function fireworks() {
        var duration = 15 * 1000;
        var animationEnd = Date.now() + duration;
        var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }

        var interval = setInterval(function () {
          var timeLeft = animationEnd - Date.now();

          if (timeLeft <= 0) {
            return clearInterval(interval);
          }

          var particleCount = 50 * (timeLeft / duration);
          // since particles fall down, start a bit higher than random
          confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
          confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
        }, 250);
      },
      snow: function snow() {
        var duration = 15 * 1000;
        var animationEnd = Date.now() + duration;
        var skew = 1;

        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }

        (function frame() {
          var timeLeft = animationEnd - Date.now();
          var ticks = Math.max(200, 500 * (timeLeft / duration));
          skew = Math.max(0.8, skew - 0.001);

          confetti({
            particleCount: 1,
            startVelocity: 0,
            ticks: ticks,
            origin: {
              x: Math.random(),
              // since particles fall down, skew start toward the top
              y: (Math.random() * skew) - 0.2
            },
            colors: ['#ffffff'],
            shapes: ['circle'],
            gravity: randomInRange(0.4, 0.6),
            scalar: randomInRange(0.4, 1),
            drift: randomInRange(-0.4, 0.4)
          });

          if (timeLeft > 0) {
            requestAnimationFrame(frame);
          }
        }());
      },
      stars: function stars() {
        var defaults = {
          spread: 360,
          ticks: 50,
          gravity: 0,
          decay: 0.94,
          startVelocity: 30,
          colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
        };

        function shoot() {
          confetti({
            ...defaults,
            particleCount: 40,
            scalar: 1.2,
            shapes: ['star']
          });

          confetti({
            ...defaults,
            particleCount: 10,
            scalar: 0.75,
            shapes: ['circle']
          });
        }

        setTimeout(shoot, 0);
        setTimeout(shoot, 100);
        setTimeout(shoot, 200);
      },
      continuous: function continuous() {
        var end = Date.now() + (15 * 1000);

        // go Buckeyes!
        var colors = ['#bb0000', '#ffffff'];

        (function frame() {
          confetti({
            particleCount: 2,
            angle: 60,
            spread: 55,
            origin: { x: 0 },
            colors: colors
          });
          confetti({
            particleCount: 2,
            angle: 120,
            spread: 55,
            origin: { x: 1 },
            colors: colors
          });

          if (Date.now() < end) {
            requestAnimationFrame(frame);
          }
        }());
      },
      custom: function() {
        var canvas = document.getElementById('my-canvas');

        // you should  only initialize a canvas once, so save this function
        // we'll save it to the canvas itself for the purpose of this demo
        canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });

        canvas.confetti({
          spread: 70,
          origin: { y: 1.2 }
        });
      },
      paths: function() {
        // note: you CAN only use a path for confetti.shapeFrompath(), but for
        // performance reasons it is best to use it once in development and save
        // the result to avoid the performance penalty at runtime

        // pumpkin shape from https://thenounproject.com/icon/pumpkin-5253388/
        var pumpkin = confetti.shapeFromPath({
          path: 'M449.4 142c-5 0-10 .3-15 1a183 183 0 0 0-66.9-19.1V87.5a17.5 17.5 0 1 0-35 0v36.4a183 183 0 0 0-67 19c-4.9-.6-9.9-1-14.8-1C170.3 142 105 219.6 105 315s65.3 173 145.7 173c5 0 10-.3 14.8-1a184.7 184.7 0 0 0 169 0c4.9.7 9.9 1 14.9 1 80.3 0 145.6-77.6 145.6-173s-65.3-173-145.7-173zm-220 138 27.4-40.4a11.6 11.6 0 0 1 16.4-2.7l54.7 40.3a11.3 11.3 0 0 1-7 20.3H239a11.3 11.3 0 0 1-9.6-17.5zM444 383.8l-43.7 17.5a17.7 17.7 0 0 1-13 0l-37.3-15-37.2 15a17.8 17.8 0 0 1-13 0L256 383.8a17.5 17.5 0 0 1 13-32.6l37.3 15 37.2-15c4.2-1.6 8.8-1.6 13 0l37.3 15 37.2-15a17.5 17.5 0 0 1 13 32.6zm17-86.3h-82a11.3 11.3 0 0 1-6.9-20.4l54.7-40.3a11.6 11.6 0 0 1 16.4 2.8l27.4 40.4a11.3 11.3 0 0 1-9.6 17.5z',
          matrix: [0.020491803278688523, 0, 0, 0.020491803278688523, -7.172131147540983, -5.9016393442622945]
        });
        // tree shape from https://thenounproject.com/icon/pine-tree-1471679/
        var tree = confetti.shapeFromPath({
          path: 'M120 240c-41,14 -91,18 -120,1 29,-10 57,-22 81,-40 -18,2 -37,3 -55,-3 25,-14 48,-30 66,-51 -11,5 -26,8 -45,7 20,-14 40,-30 57,-49 -13,1 -26,2 -38,-1 18,-11 35,-25 51,-43 -13,3 -24,5 -35,6 21,-19 40,-41 53,-67 14,26 32,48 54,67 -11,-1 -23,-3 -35,-6 15,18 32,32 51,43 -13,3 -26,2 -38,1 17,19 36,35 56,49 -19,1 -33,-2 -45,-7 19,21 42,37 67,51 -19,6 -37,5 -56,3 25,18 53,30 82,40 -30,17 -79,13 -120,-1l0 41 -31 0 0 -41z',
          matrix: [0.03597122302158273, 0, 0, 0.03597122302158273, -4.856115107913669, -5.071942446043165]
        });
        // heart shape from https://thenounproject.com/icon/heart-1545381/
        var heart = confetti.shapeFromPath({
          path: 'M167 72c19,-38 37,-56 75,-56 42,0 76,33 76,75 0,76 -76,151 -151,227 -76,-76 -151,-151 -151,-227 0,-42 33,-75 75,-75 38,0 57,18 76,56z',
          matrix: [0.03333333333333333, 0, 0, 0.03333333333333333, -5.566666666666666, -5.533333333333333]
        });

        var defaults = {
          scalar: 2,
          spread: 180,
          particleCount: 30,
          origin: { y: -0.1 },
          startVelocity: -35
        };

        confetti({
          ...defaults,
          shapes: [ pumpkin ],
          colors: ['#ff9a00', '#ff7400', '#ff4d00']
        });
        confetti({
          ...defaults,
          shapes: [ tree ],
          colors: ['#8d960f', '#be0f10', '#445404']
        });
        confetti({
          ...defaults,
          shapes: [ heart ],
          colors: ['#f93963', '#a10864', '#ee0b93']
        });
      },
      emoji: function () {
        var scalar = 2;
        var unicorn = confetti.shapeFromText({ text: '🦄', scalar });

        var defaults = {
          spread: 360,
          ticks: 60,
          gravity: 0,
          decay: 0.96,
          startVelocity: 20,
          shapes: [unicorn],
          scalar
        };

        function shoot() {
          confetti({
            ...defaults,
            particleCount: 30
          });

          confetti({
            ...defaults,
            particleCount: 5,
            flat: true
          });

          confetti({
            ...defaults,
            particleCount: 15,
            scalar: scalar / 2,
            shapes: ['circle']
          });
        }

        setTimeout(shoot, 0);
        setTimeout(shoot, 100);
        setTimeout(shoot, 200);
      }
    };

    function pretty(val) {
      return js_beautify(val, { indent_size: 2, brace_style: 'preserve-inline', });
    }

    function getCode(name) {
      // pretty-print the code, since we will use minified code in production
      var code = pretty(modes[name].toString());
      // take out the function wrapper, trim all whitespace
      code = code.split('\n').slice(1).slice(0, -1).map(function (s) {
        return s.trim();
      }).join('\n');
      // pretty-print again
      return pretty(code);
    }

    window.onload = function () {
      [].forEach.call(document.querySelectorAll('.group'), function (group) {
        var name = group.getAttribute('data-name');
        var button = group.querySelector('.run');
        var codeElem = group.querySelector('.editor');

        var editor = ace.edit(codeElem);
        editor.setTheme(themes[activeTheme]);
        editor.session.setMode('ace/mode/javascript');
        editor.session.setUseSoftTabs(true);
        editor.session.setTabSize(2);

        editor.session.setValue(getCode(name));

        var count = editor.session.getLength();

        // set height so that all code is visible
        codeElem.style.minHeight = (14 * count) + 1 + 'px';
        codeElem.style.height = (count) + 'rem';

        button.onclick = function (ev) {
          // stop mobile browsers from zooming when clicking
          // buttons repeatedly really fast
          ev.preventDefault();

          try {
            eval(editor.getValue());
          } catch (e) {
            console.error(e);
          }
        };

        editors.push(editor);
      });
    };
  </script>

  <script>
    // render favicon live, because why not
    addEventListener("load", (event) => {
      const image = confetti.shapeFromText('🎊', { scalar: 512/10 });
      const canvas = new OffscreenCanvas(image.bitmap.width, image.bitmap.height);
      const ctx = canvas.getContext('bitmaprenderer');
      ctx.transferFromImageBitmap(image.bitmap);

      canvas.convertToBlob().then(blob => {
        const icon = document.getElementById('favicon');
        icon.setAttribute('href', URL.createObjectURL(blob));
      });
    });
  </script>

  <script src="/analytics.js" async></script>
</body>
</html>