Last active
June 1, 2017 16:57
-
-
Save gemfarmer/e573a5c5cbfc834ce64550af553db051 to your computer and use it in GitHub Desktop.
18f pride logo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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>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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment