Skip to content

Instantly share code, notes, and snippets.

@gemfarmer gemfarmer/18f-pride.svg
Last active Jun 1, 2017

Embed
What would you like to do?
18f pride logo
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.