18f pride logo

18f-pride.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>