18f pride logo

18f-pride.svg

<?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">
   <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) ? 'black' : 'white';
  }

  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>

pride-18F.html

<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" style="fill: rgb(0, 77, 255);"></path> <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" style="fill: rgb(117, 7, 135); stroke: rgb(255, 255, 255);"></path> <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" style="fill: rgb(228, 3, 3); stroke: rgb(255, 255, 255);"></path> <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" style="fill: rgb(255, 140, 0); stroke: rgb(255, 255, 255);"></path> <script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script><script async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="https://www.google-analytics.com/analytics.js"></script><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&gt;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 &gt;=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>