18F/18f.gsa.gov

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="18F-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 333 333" enable-background="new 0 0 333 333" xml:space="preserve" width="40" height="40">
  <title>18F pride logo</title>
  <style>
    .logo-path {
      cursor: pointer;
      stroke-width: 1px;
    }
  </style>
  <path class="logo-path logo-wrapper" fill="#000000" d="M327.3,0H5.7C2.5,0,0,2.5,0,5.7v321.6c0,3.1,2.5,5.7,5.7,5.7h321.6c3.1,0,5.7-2.5,5.7-5.7V5.7
    C333,2.5,330.5,0,327.3,0z"/>
  <path class="logo-path logo" fill="#FFFFFF" d="M98,229.3c0,1.1-0.9,2-2,2H83.5c-1.1,0-2-0.9-2-2V117.4H65.2c-1.1,0-2-0.9-2-2v-11.9c0-1.1,0.9-2,2-2h30.8
    c1.1,0,2,0.9,2,2V229.3z"/>
  <path class="logo-path logo" fill="#FFFFFF" d="M269.8,115.4c0,1.1-0.9,2-2,2h-34.4v39h28.3c1.1,0,2,0.9,2,2v11.9c0,1.1-0.9,2-2,2h-28.3v57.1
    c0,1.1-0.9,2-2,2h-12.5c-1.1,0-2-0.9-2-2V103.5c0-1.1,0.9-2,2-2h48.9c1.1,0,2,0.9,2,2V115.4z"/>
  <path class="logo-path logo" fill="#FFFFFF" d="M157.5,233.4c-21.9,0-39.8-17.9-39.8-39.8c0-13.2,6.4-25.1,17.1-32.5c-7.7-6.6-12.3-16.3-12.3-26.4
    c0-19.3,15.7-35,35-35c19.3,0,35,15.7,35,35c0,10.2-4.6,19.8-12.3,26.4c10.7,7.4,17.1,19.4,17.1,32.5
    C197.3,215.5,179.4,233.4,157.5,233.4z M157.5,169.6c-13.2,0-23.9,10.7-23.9,23.9c0,13.2,10.7,23.9,23.9,23.9
    c13.2,0,23.9-10.7,23.9-23.9C181.4,180.4,170.7,169.6,157.5,169.6z M157.5,153.8c10.6,0,19.1-8.6,19.1-19.1
    c0-10.6-8.6-19.1-19.1-19.1s-19.1,8.6-19.1,19.1C138.4,145.2,146.9,153.8,157.5,153.8z"/>
  <script>
  document.addEventListener("DOMContentLoaded", function(event) {
    function generateRandomColor() {
      return "000000".replace(/0/g,function() { return (~~(Math.random()*16)).toString(16); });
    }

    function randomNumberFloored(len) {
      return Math.floor(Math.random() * len);
    }

    // swaps elements at index i and j in array this
    // swapping is easy on js 1.7 (feature detection)
    Array.prototype.swap = (function () {
      var i = 0,
        j = 1;
      try { [i, j]=[j, i]; }
      catch (e) {}
      if (i) {
        return function(i,j) {
          [this[i], this[j]] = [this[j], this[i]];
          return this;
        }
      } else {
        return function(i,j) {
          var temp = this[i];
          this[i] = this[j];
          this[j] = temp;
          return this;
        }
      }
    })();

    // shuffles array this
    Array.prototype.shuffle = function() {
      for(var i=this.length; i>1; i--) {
        this.swap(i - 1, Math.floor(i * Math.random()));
      }
      return this;
    }

    var allPaths = document.querySelectorAll('.logo-path');
    var logoWrapper = document.querySelector('.logo-wrapper');
    var logoLetters = document.querySelectorAll('.logo');

    function randomPrideColor(number) {
      var LGBTQA = ['750787', "004DFF", "008026", "FFED00", "FF8C00", "E40303"];
      var shuffledList = LGBTQA.shuffle();
      var index = randomNumberFloored(LGBTQA.length);
      return number ? shuffledList.slice(0, number) : LGBTQA[index];
    }

    function getContrastYIQ(hexcolor){
      var r = parseInt(hexcolor.substr(0, 2), 16);
      var g = parseInt(hexcolor.substr(2, 2), 16);
      var b = parseInt(hexcolor.substr(4, 2), 16);
      var yiq = ((r * 299)+(g * 587)+(b * 114)) / 1000;
      return (yiq >= 128) ? '#000' : '#fff';
    }

    function updateAllLogoColors(number) {
      var randomColors = randomPrideColor(number);
      logoWrapper.style.fill = '#' + randomColors[0];
      var contrast = getContrastYIQ(randomColors[0]);
      logoLetters.forEach(function(p, i) {
        p.style.fill = '#' + randomColors[i + 1];
        p.style.stroke = contrast;
      });
    }

    setInterval(function() {
      logoLetters.forEach(function(path) {
        updateAllLogoColors(allPaths.length);
      })
    }, 5000);

    allPaths.forEach(function(path) {
      path.addEventListener("click", function() {
        updateAllLogoColors(allPaths.length);
      });
    });
  });

  </script>
</svg>