Skip to content

Instantly share code, notes, and snippets.

@spencerthayer

spencerthayer/head-waters-logo.markdown

Created May 14, 2024 16:48
Show Gist options
  • Save spencerthayer/b7031411f8badb8e91da55a216a5eaf8 to your computer and use it in GitHub Desktop.
Save spencerthayer/b7031411f8badb8e91da55a216a5eaf8 to your computer and use it in GitHub Desktop.
Download ZIP
Head Waters - Logo
Raw
index.html
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 580 280">
<defs>
<clipPath id="clippath">
<path class="cls-2" d="M0,0v111.39h8.68c.05,0,.1-.02.15-.02h5.26c1.14,0,2.07-.93,2.07-2.07V34.08h0c0-1.15-.93-2.07-2.07-2.07h-4.93c-1.14,0-2.06-.93-2.06-2.07v-14.65h0c0-1.14.92-2.07,2.07-2.07h26.41c1.14,0,2.06.93,2.06,2.07v40.57c0,.44.14.87.4,1.23.67.92,1.96,1.12,2.88.45,4.06-3,10.14-5.72,19.71-5.72,16.78,0,25.84,10.57,25.84,30.71v13.48h12.16c-.09-1.39-.14-2.81-.14-4.25,0-21.48,12.42-39.94,36.25-39.94s33.06,16.95,33.06,33.56c-.03,3.56-.34,7.11-.9,10.63h13.57c6.13-6.76,17.83-9.46,33.31-10.47l6-.39h0c.97-.06,1.72-.86,1.72-1.83v-10.37c0-1.01-.82-1.84-1.84-1.83h-15.96c-1.01,0-1.84.82-1.84,1.83v6.23c0,1.01-.82,1.83-1.84,1.83h-16.35c-.69,0-1.33-.37-1.65-.98-1.44-2.81-2.17-5.93-2.15-9.09,0-10.91,9.9-19.13,31.88-19.13s31.88,5.54,31.88,28.35v15.84h15.77c-.09-1.49-.13-3.03-.13-4.61,0-25.17,11.41-39.77,31.88-39.77,5.33-.15,10.61,1.08,15.32,3.58.52.29,1.1.44,1.69.43,1.92,0,3.46-1.56,3.46-3.48v-17.02c0-1.92-1.56-3.48-3.48-3.48h-6.79c-1.92,0-3.48-1.56-3.48-3.48v-11.66c0-1.92,1.56-3.48,3.48-3.48h28.27c1.92,0,3.48,1.56,3.48,3.48v76.67c0,.99-.25,1.96-.7,2.82h8.37c-.08-.18-.13-.37-.13-.58v-6.69c0-.37.15-.72.41-.98l.94-.94L415.08,13.72h0c.54-.54,1.42-.54,1.96,0l46.05,46.04c.34.34.47.82.38,1.27-.03.15-.09.3-.17.43l-.94,1.58-.91,6.4s33.63-33.44,33.8-33.61l1.83-1.81c.46-.45,1.19-.45,1.65,0l71.24,71.24,10.02-.27V0H0Z"/>
</clipPath>
</defs>
<g id="Logo">
<g id="Law_Group" data-name="Law Group">
<path id="p" class="cls-4" d="M545.94,266.67c-.28,0-.47-.19-.47-.47v-30.03c0-.28.19-.47.47-.47h3.01c.28,0,.47.19.47.47v2.12h.05c1.08-1.79,3.01-3.1,6.39-3.1,3.9,0,6.63,1.83,7.75,5.4.61,1.79.8,3.57.8,6.34s-.19,4.61-.8,6.39c-1.13,3.57-3.85,5.4-7.75,5.4-3.38,0-5.31-1.36-6.39-3.15h-.05v10.62c0,.28-.19.47-.47.47h-3.01ZM559.85,251.63c.38-1.17.52-2.63.52-4.7s-.14-3.48-.52-4.7c-.75-2.21-2.44-3.38-4.93-3.38s-4.23,1.13-4.98,3.38c-.38,1.13-.52,2.44-.52,4.7s.14,3.62.52,4.7c.75,2.26,2.49,3.43,4.98,3.43s4.18-1.22,4.93-3.43Z"/>
<path id="u" class="cls-4" d="M534.29,258.21c-.28,0-.47-.19-.47-.47v-2.12h-.05c-1.17,1.88-3.24,3.1-6.16,3.1-4.93,0-7.8-3.38-7.8-8.51v-14.05c0-.28.19-.47.47-.47h3.01c.28,0,.47.19.47.47v13.11c0,3.67,1.64,5.78,4.98,5.78,3.05,0,5.08-2.16,5.08-5.55v-13.35c0-.28.19-.47.47-.47h3.01c.28,0,.47.19.47.47v21.57c0,.28-.19.47-.47.47h-3.01Z"/>
<path id="o" class="cls-4" d="M495.28,252.66c-.52-1.55-.75-3.1-.75-5.73s.23-4.14.75-5.69c1.22-3.85,4.51-6.06,8.88-6.06s7.66,2.21,8.88,6.06c.52,1.55.75,3.1.75,5.69s-.24,4.18-.75,5.73c-1.22,3.81-4.51,6.06-8.88,6.06s-7.66-2.26-8.88-6.06ZM509.24,251.53c.38-1.22.52-2.44.52-4.61s-.14-3.34-.52-4.56c-.75-2.26-2.58-3.53-5.08-3.53s-4.32,1.27-5.08,3.53c-.38,1.22-.52,2.4-.52,4.56s.14,3.38.52,4.61c.75,2.26,2.58,3.53,5.08,3.53s4.32-1.27,5.08-3.53Z"/>
<path id="r" class="cls-4" d="M477.94,258.21c-.28,0-.47-.19-.47-.47v-21.57c0-.28.19-.47.47-.47h3.01c.28,0,.47.19.47.47v2.3h.05c.99-1.93,2.96-3.29,5.97-3.29,1.79,0,3.48.66,4.61,1.69.23.24.28.42.09.66l-1.74,2.3c-.19.24-.42.28-.66.09-1.03-.66-2.16-1.08-3.48-1.08-3.43,0-4.84,2.68-4.84,6.58v12.31c0,.28-.19.47-.47.47h-3.01Z"/>
<path id="G" class="cls-4" d="M447.34,242.23c0-5.26.28-7.19.85-9.02,1.6-4.94,5.55-7.47,10.95-7.47s9.02,2.82,10.62,6.34c.14.28.09.52-.14.66l-2.82,1.36c-.28.14-.52.05-.66-.24-1.55-2.87-3.62-4.23-7-4.23-3.62,0-5.92,1.69-6.91,4.75-.42,1.17-.66,2.96-.66,7.85s.24,6.67.66,7.85c.99,3.05,3.29,4.75,6.91,4.75,3.24,0,5.88-1.6,6.86-4.61.33-1.08.61-2.63.61-5.03,0-.19-.09-.28-.28-.28h-6.2c-.28,0-.47-.19-.47-.47v-2.73c0-.28.19-.47.47-.47h10.2c.28,0,.47.19.47.47v2.4c0,2.87-.33,5.5-.8,7.05-1.55,4.84-5.55,7.57-10.86,7.57s-9.35-2.54-10.95-7.47c-.56-1.83-.85-3.76-.85-9.02Z"/>
<path id="w" class="cls-4" d="M421.44,258.21c-.28,0-.47-.19-.56-.47l-5.08-16.12h-.09l-5.12,16.12c-.09.28-.28.47-.56.47h-2.73c-.28,0-.47-.19-.56-.47l-7.05-21.57c-.09-.28.05-.47.33-.47h3.2c.33,0,.47.09.61.47l4.98,16.26h.09l5.08-16.26c.09-.33.28-.47.56-.47h2.44c.28,0,.52.14.61.47l5.12,16.26h.09l4.84-16.26c.09-.38.28-.47.61-.47h3.2c.28,0,.42.19.33.47l-7.1,21.57c-.09.28-.23.47-.56.47h-2.68Z"/>
<path id="a" class="cls-4" d="M391.41,258.21c-.28,0-.47-.19-.47-.47v-1.97h-.05c-1.03,1.69-3.24,2.96-6.67,2.96-4.28,0-7.57-2.21-7.57-6.77s3.29-6.96,8.79-6.96h5.12c.19,0,.28-.09.28-.28v-1.64c0-3.1-1.22-4.42-5.41-4.42-2.54,0-4.14.66-5.45,1.6-.24.19-.52.19-.66-.05l-1.27-2.16c-.14-.28-.09-.47.09-.66,1.69-1.32,4.32-2.21,7.66-2.21,6.39,0,8.84,2.11,8.84,7.66v14.9c0,.28-.19.47-.47.47h-2.77ZM390.85,250.92v-2.49c0-.19-.09-.28-.28-.28h-4.51c-3.9,0-5.59,1.13-5.59,3.67,0,2.3,1.69,3.52,4.7,3.52,3.52,0,5.69-1.64,5.69-4.42Z"/>
<path id="L" class="cls-4" d="M352.59,226.72c0-.28.19-.47.47-.47h3.24c.28,0,.47.19.47.47v27.31c0,.19.09.28.28.28h15.23c.28,0,.47.19.47.47v2.96c0,.28-.19.47-.47.47h-19.22c-.28,0-.47-.19-.47-.47v-31.02Z"/>
</g>
<g id="head_waters" data-name="head waters">
<g id="waters">
<path id="s" class="cls-5" d="M551.58,169.27l-11.41-3.52c-5.2-1.68-5.87-4.03-5.87-6.88,0-3.52,2.51-6.37,7.55-6.37,2.79-.07,5.57.38,8.19,1.32.55.22.96.69,1.11,1.26l1.75,6.61c.21.81.95,1.37,1.78,1.37h13.85c1.02,0,1.85-.83,1.85-1.85h0v-17.74c0-.74-.43-1.41-1.11-1.7-6.7-2.75-17.75-4.55-27.59-4.55-25.17,0-31.71,13.59-31.71,24.33,0,11.75,6.71,19.3,20.64,23.66l12.25,3.86c4.03,1.34,5.7,4.2,5.7,6.71,0,4.2-3.19,6.55-8.39,6.55-3.3.05-6.58-.52-9.67-1.68-.48-.21-.84-.62-1-1.12l-2.51-7.52c-.25-.75-.96-1.26-1.75-1.26h-13.83c-1.02,0-1.85.83-1.85,1.85,0,.03,0,.07,0,.1l1,18.34c.04.73.5,1.37,1.17,1.63,7.92,3.06,16.57,4.59,28.59,4.59,25.84,0,32.89-12.75,32.89-24.16,0-12.08-6.88-19.29-21.65-23.83"/>
<path id="r-2" data-name="r" class="cls-5" d="M500.89,137.68c-3.27-.34-7.18-.46-9.88-.46-7.5,0-14.29,6.18-18.26,12.09-.56.8-1.66,1-2.46.44-.48-.33-.76-.88-.75-1.46v-7.62c0-.98-.79-1.77-1.77-1.77h-27.17c-.98,0-1.77.79-1.77,1.77v15.25c0,.98.79,1.77,1.77,1.77h7.2c.98,0,1.77.79,1.77,1.77h0v34.35c0,.77-.5,1.46-1.24,1.69l-8.26,2.58c-.74.23-1.24.92-1.24,1.69v13.88c0,.98.79,1.77,1.77,1.77h45.12c.98,0,1.77-.79,1.77-1.77v-15.09c0-.98-.79-1.77-1.77-1.77h-12.74c-.98,0-1.77-.79-1.77-1.77v-26.5c0-.39.12-.76.34-1.08,3.05-4.19,8.35-6.69,15.02-7.22.16-.01.32,0,.48.02l11.93,1.99c.96.16,1.88-.49,2.04-1.45,0-.06.02-.11.02-.17l1.43-21.04c.07-.95-.63-1.79-1.59-1.89"/>
<path id="e" class="cls-5" d="M395.87,137.22c-23.83,0-36.24,18.46-36.24,39.94,0,23.32,11.74,40.1,38.76,40.1,9.37-.17,18.59-2.43,26.98-6.6,1.36-.67,1.97-2.27,1.4-3.67l-4.89-11.76c-.59-1.44-2.24-2.14-3.68-1.55-.03.01-.06.03-.1.04-6.12,2.87-12.78,4.37-19.54,4.4-8.43,0-13.69-3.65-15.28-10.01-.39-1.54.54-3.1,2.07-3.49.23-.06.46-.09.69-.09h39.07c1.39,0,2.58-1.01,2.81-2.38.64-3.76.97-7.57,1-11.38,0-16.61-8.89-33.56-33.06-33.56M407.78,168.43h-21.52c-1.59,0-2.86-1.3-2.86-2.88,0-.22.03-.45.08-.66,1.32-5.55,5.01-9.71,12.39-9.71,5.87,0,12.08,3.19,12.08,11.24,0,.68-.05,1.35-.17,2.01"/>
<path id="t" class="cls-5" d="M350.49,196.18c-3.37.37-7.54.6-9.49.6-4.19,0-7.88-1.51-7.88-7.38v-29.98c0-.96.77-1.73,1.73-1.73h13.32c.96,0,1.73-.78,1.73-1.73v-15.33c0-.96-.78-1.73-1.73-1.73h-13.31c-.96,0-1.73-.77-1.73-1.73h0v-27.64c0-.74-.6-1.33-1.33-1.33-.35,0-.69.14-.94.39l-32.61,32.61c-.34.34-.52.79-.53,1.27v13.49c0,.96.78,1.73,1.73,1.73h10.3c.96,0,1.73.78,1.73,1.73v33.17c0,13.93,6.04,24.66,22.48,24.66,5.75-.09,11.48-.7,17.12-1.84.79-.18,1.34-.88,1.34-1.69v-15.83c0-.95-.77-1.73-1.73-1.73-.06,0-.13,0-.19.01"/>
<path id="a-2" data-name="a" class="cls-5" d="M291.82,197.37c-.05,0-.1.01-.15.01-3.11.22-5.81-2.12-6.04-5.24-.01-.15-.02-.29-.01-.44v-26.14c0-22.82-10.4-28.36-31.88-28.36s-31.88,8.22-31.88,19.13c-.02,3.16.72,6.27,2.15,9.08.32.61.96.99,1.65.99h16.34c1.02,0,1.84-.82,1.84-1.84v-6.22c0-1.02.82-1.84,1.84-1.84h15.96c1.01,0,1.84.82,1.83,1.84v10.37c0,.97-.75,1.77-1.72,1.83l-6,.39c-23.32,1.51-38.09,6.88-38.09,24.16,0,13.76,9.06,22.15,22.65,22.15,10.71,0,18.26-4.5,22.65-9.87.64-.76,1.78-.86,2.55-.21.21.18.38.41.49.67,2.25,5.11,7.35,8.58,16.26,8.58,3.37.02,6.74-.23,10.07-.73.88-.15,1.52-.92,1.51-1.82v-14.66c0-1.02-.82-1.84-1.84-1.84-.06,0-.12,0-.18,0M263.47,192.53c0,.57-.25,1.11-.7,1.46-4.16,3.28-9.27,5.14-14.57,5.31-4.7,0-7.39-1.85-7.39-6.04s2.35-6.71,14.94-8.06l5.68-.62c1.01-.11,1.92.62,2.03,1.63,0,.07.01.13.01.2v6.11Z"/>
<path id="w-2" data-name="w" class="cls-5" d="M210.58,138.89h-37.19c-1.13,0-2.05.92-2.05,2.05v14.7c0,1.13.92,2.05,2.05,2.05h5.97c1.13,0,2.04.91,2.04,2.04,0,.15-.02.31-.05.46l-6.19,27.36c-.25,1.1-1.34,1.79-2.44,1.54-.7-.16-1.27-.67-1.49-1.36l-15.53-47.43c-.28-.84-1.06-1.41-1.94-1.41h-17.86c-1.13,0-2.04.92-2.04,2.05,0,.21.03.42.1.62l4.63,14.43c.14.45.13.93-.04,1.37l-12.32,31.72c-.41,1.05-1.59,1.58-2.65,1.17-.62-.24-1.09-.77-1.25-1.42l-7.06-28.6c-.27-1.1.4-2.2,1.5-2.47.16-.04.33-.06.49-.06h6.42c1.13,0,2.04-.92,2.04-2.05v-14.7c0-1.13-.91-2.05-2.04-2.05,0,0,0,0,0,0h-37.53c-1.13,0-2.04.92-2.04,2.05h0v14.7c0,1.13.91,2.05,2.04,2.05h4.66c.9,0,1.7.59,1.96,1.46l16.41,54.81c.26.87,1.05,1.46,1.96,1.46h21.42c.84,0,1.59-.51,1.9-1.29l12.43-31.28c.42-1.05,1.61-1.56,2.66-1.14.54.22.97.66,1.17,1.21l11.27,31.17c.29.81,1.06,1.35,1.92,1.35h22.02c.91,0,1.72-.61,1.97-1.49l15.6-54.75c.25-.88,1.05-1.48,1.97-1.48h5.14c1.13,0,2.05-.92,2.05-2.05h0v-14.7c0-1.13-.92-2.05-2.05-2.05h0"/>
</g>
<g id="head">
<path id="d" class="cls-5" d="M297.13,130.92c.61-.12,1.16-.42,1.6-.85l8.48-8.48,24.13-24.13c1.13-1.13,1.77-2.67,1.77-4.28V16.52c0-1.92-1.56-3.48-3.48-3.48h-28.27c-1.92,0-3.48,1.56-3.48,3.48v11.66c0,1.92,1.56,3.48,3.48,3.48h6.79c1.92,0,3.48,1.56,3.48,3.48v17.02c0,1.92-1.54,3.47-3.46,3.48-.59,0-1.17-.15-1.69-.43-4.71-2.5-9.99-3.73-15.32-3.58-20.47,0-31.88,14.6-31.88,39.77s11.58,40.27,31.04,40.27c1.89,0,3.77-.17,5.62-.51.07-.01.65-.13,1.18-.23M297.54,111.19c-12.08,0-15.77-8.56-15.77-19.8s3.86-19.29,15.77-19.29c4.1-.09,8.17.72,11.92,2.38,1.22.58,2.01,1.81,2.01,3.16v27.06c.01,1.1-.51,2.14-1.4,2.79-3.73,2.42-8.08,3.71-12.53,3.7"/>
<path id="a-3" data-name="a" class="cls-5" d="M219.78,85.14l-6,.39c-23.32,1.51-38.09,6.88-38.09,24.16,0,13.76,9.06,22.15,22.65,22.15,10.71,0,18.26-4.5,22.65-9.88.65-.76,1.79-.86,2.55-.21.21.18.38.41.49.66,2.24,5.12,7.34,8.58,16.25,8.58,3.37.02,6.74-.23,10.07-.73.88-.15,1.52-.92,1.51-1.82v-14.67c0-1.01-.82-1.83-1.84-1.83-.06,0-.12,0-.18,0h-.16c-3.11.23-5.81-2.11-6.03-5.22-.01-.15-.01-.29-.01-.44v-26.14c0-22.82-10.4-28.35-31.88-28.35s-31.88,8.22-31.88,19.13c-.02,3.16.72,6.27,2.15,9.09.32.61.96.99,1.65.98h16.35c1.01,0,1.83-.82,1.83-1.83v-6.23c0-1.01.82-1.84,1.84-1.83h15.96c1.01,0,1.84.82,1.84,1.83v10.37c0,.97-.75,1.77-1.72,1.83M221.5,107.12c0,.57-.25,1.1-.7,1.45-4.16,3.28-9.27,5.15-14.57,5.32-4.7,0-7.38-1.85-7.38-6.04s2.35-6.71,14.93-8.05l5.68-.62c1.01-.11,1.91.62,2.02,1.62,0,.07.01.13.01.2v6.12Z"/>
<path id="e-2" data-name="e" class="cls-5" d="M137.26,131.85c9.59-.17,19.02-2.53,27.56-6.89,1.03-.56,1.47-1.81,1.01-2.89l-5.31-12.78c-.5-1.17-1.85-1.71-3.02-1.21-.04.02-.08.04-.12.05-6.23,3-13.04,4.57-19.96,4.6-8.82,0-14.18-4-15.48-10.93-.21-1.25.63-2.42,1.88-2.63.13-.02.26-.03.39-.03h40.23c1.09,0,2.03-.76,2.24-1.83.7-3.94,1.07-7.93,1.1-11.93,0-16.61-8.9-33.56-33.06-33.56s-36.25,18.46-36.25,39.94c0,23.32,11.74,40.1,38.76,40.1M122.16,80.35c1.14-5.97,4.81-10.58,12.58-10.58,5.87,0,12.08,3.19,12.08,11.24,0,.68-.05,1.35-.17,2.02h-22.23c-1.26,0-2.29-1.01-2.29-2.27,0-.13.01-.27.03-.4"/>
<path id="h" class="cls-5" d="M95.7,127.94v-14.49c0-1.14-.93-2.07-2.07-2.07h-5.09c-1.14,0-2.07-.92-2.07-2.06v-26.79c0-20.14-9.06-30.71-25.84-30.71-9.58,0-15.66,2.72-19.72,5.72-.92.67-2.21.47-2.88-.45-.26-.36-.4-.78-.4-1.23V15.29c0-1.14-.92-2.07-2.06-2.07,0,0,0,0,0,0H9.17c-1.14,0-2.07.92-2.07,2.06,0,0,0,0,0,0v14.65c0,1.14.92,2.07,2.06,2.07,0,0,0,0,0,0h4.93c1.14,0,2.07.92,2.07,2.07,0,0,0,0,0,0v75.23c0,1.14-.93,2.07-2.07,2.07h-5.26c-1.14,0-2.07.92-2.07,2.06v14.49c0,1.14.92,2.07,2.07,2.07h36.63c1.14,0,2.07-.93,2.07-2.07v-14.49c0-1.14-.93-2.06-2.07-2.06h-5.76c-1.14,0-2.07-.93-2.07-2.07h0v-31.4c0-.72.37-1.39.99-1.77,3.92-2.35,8.37-3.68,12.94-3.86,9.9,0,13.26,4.36,13.26,12.75v24.28c0,1.14-.92,2.07-2.07,2.07h-5.93c-1.14,0-2.07.93-2.07,2.07v14.49c0,1.14.93,2.07,2.07,2.07h36.81c1.14,0,2.07-.93,2.07-2.07"/>
</g>
</g>
<g id="Mountain">
<path id="Right_Mountain" data-name="Right Mountain" class="cls-5" d="M419.32,95.81c-9.41,4.1-14.6,6.36-14.6,11.15,0,6.46,9.62,7.34,31.56,7.81,2.43.05,4.53.1,6.1.17,15.2.67,114.96.17,126.85.11.64,0,1.16-.53,1.16-1.17v-7.74c0-.31-.12-.61-.34-.82l-71.3-71.3c-.45-.45-1.19-.46-1.65,0l-1.83,1.81c-.17.17-16.96,16.77-33.8,33.61-14.2,14.2-31.01,21.53-42.13,26.37M497.07,44.62c.46-.45,1.19-.45,1.64,0l61,61c.46.45.47,1.19.02,1.65-.22.22-.52.35-.83.35-37.73.21-101.8.46-116.18-.18-1.66-.07-3.8-.12-6.27-.17-3.77-.08-11.41-.24-17.33-.76-.64-.06-1.12-.62-1.06-1.27.04-.42.3-.79.69-.96,1.18-.53,2.4-1.06,3.58-1.57,11.64-5.07,29.24-12.74,44.45-27.95,12.26-12.26,24.49-24.39,30.29-30.14"/>
<path id="Left_Mountain" data-name="Left Mountain" class="cls-5" d="M568.71,133.06c.77,0,1.39-.62,1.39-1.39h0v-4.74c0-.77-.62-1.39-1.39-1.39h-183.37c-17.17,0-25.27-4.31-25.69-8.59-.47-4.77,8.22-13.69,28.35-17.67,59.15-11.69,73.79-35.26,74.38-36.26l.94-1.58c.33-.55.24-1.25-.21-1.7l-46.05-46.04c-.54-.54-1.42-.54-1.96,0,0,0,0,0,0,0l-74.02,74.02c-.26.26-.41.61-.41.98v6.69c0,.77.62,1.39,1.39,1.39.37,0,.72-.15.98-.41l72.06-72.06c.54-.54,1.42-.54,1.96,0,0,0,0,0,0,0l36.15,36.15c.53.53.55,1.39.03,1.94-3.29,3.37-6.95,6.36-10.92,8.9-17.12,11.29-39.78,17.42-55.78,20.58-21.31,4.21-35.44,14.81-34.37,25.77.45,4.62,4.59,15.37,33.17,15.37h183.37Z"/>
</g>
</g>
<g id="Animation">
<g class="cls-1">
<path id="Sun" class="cls-4" d="M469.94,28.69c0-11.05-8.95-20-20-20-11.05,0-20,8.95-20,20s8.95,20,20,20h0c11.05,0,20-8.95,20-20"/>
<g id="Moon">
<path class="cls-3" d="M459.94,37.69c-8.28,0-15-6.72-15-15,0-3.31,1.08-6.36,2.9-8.84-7.29,1.02-12.9,7.27-12.9,14.84,0,8.28,6.72,15,15,15,4.98,0,9.37-2.43,12.1-6.16-.69.1-1.39.16-2.1.16Z"/>
</g>
</g>
</g>
</svg>
</div>
Raw
script.js
document.addEventListener('DOMContentLoaded', function () {
// Animation settings
const seconds = 6;
const radius = 92;
const centerX = 0;
const centerY = 85;
const angleIncrement = Math.PI / (seconds * 60);
const numStars = 16;
let sunAngle = 0;
let moonAngle = Math.PI;
const sunColor1 = [219, 103, 23]; // #DB6717
const sunColor2 = [250, 164, 26]; // #faa41a
const moonColor1 = [33, 141, 149]; // #218D95
const moonColor2 = [38, 170, 129]; // #26AA81
// Ensure elements are correctly targeted
const sun = document.getElementById('Sun');
const moon = document.getElementById('Moon');
const lawElements = document.querySelectorAll('#Law_Group .cls-4');
// Interpolate color based on the current angle
function interpolateColor(color1, color2, angle) {
const ratio = (Math.cos(angle) + 1) / 2;
const r = Math.round(color1[0] + (color2[0] - color1[0]) * ratio);
const g = Math.round(color1[1] + (color2[1] - color1[1]) * ratio);
const b = Math.round(color1[2] + (color2[2] - color1[2]) * ratio);
return `rgb(${r}, ${g}, ${b})`;
}
// Function to generate a star shape
function generateStarShape(numPoints, innerRadius, outerRadius) {
const angle = Math.PI / numPoints;
const points = [];
for (let i = 0; i < 2 * numPoints; i++) {
const radius = i % 2 === 0 ? outerRadius : innerRadius;
const x = radius * Math.cos(i * angle);
const y = radius * Math.sin(i * angle);
points.push(`${x},${y}`);
}
return `<polygon points="${points.join(' ')}" />`;
}
// Function to generate a random star shape
function generateRandomStar() {
const numPoints = Math.floor(Math.random() * 5) + 4; // Random number of points (4-9)
const size = Math.random() * 2 + 1; // Random size between 1 and 3
return generateStarShape(numPoints, size * 0.5, size);
}
// Create a canvas to check point inside path
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const clipPathElement = document.querySelector('#clippath path');
const clipPathData = clipPathElement.getAttribute('d');
// Draw the clip path on the canvas
function drawClipPath() {
const path = new Path2D(clipPathData);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(1, 1); // Adjust this scale if your SVG is using a different viewBox
ctx.fill(path);
ctx.restore();
}
drawClipPath();
// Function to generate random star positions within the clip path
function generateStarPositions(numStars) {
const stars = [];
const bounds = clipPathElement.getBBox();
const padding = 4;
while (stars.length < numStars) {
const x = Math.random() * (bounds.width - 2 * padding) + bounds.x + padding;
const y = Math.random() * (bounds.height - 2 * padding) + bounds.y + padding;
if (ctx.isPointInPath(new Path2D(clipPathData), x, y)) {
stars.push({ x, y });
}
}
return stars;
}
// Function to add stars to the SVG within the clip path
function addStars(numStars) {
const starPositions = generateStarPositions(numStars);
const svgElement = document.querySelector('svg'); // Select the SVG element
let starsContainer = document.getElementById('stars-container');
if (!starsContainer) {
starsContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
starsContainer.setAttribute('id', 'stars-container');
starsContainer.setAttribute('clip-path', 'url(#clippath)');
svgElement.insertBefore(starsContainer, svgElement.firstChild); // Ensure stars are behind everything
}
starPositions.forEach(star => {
const starElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');
starElement.innerHTML = generateRandomStar();
starElement.setAttribute('transform', `translate(${star.x}, ${star.y})`);
starElement.setAttribute('fill', '#218D95');
starElement.setAttribute('class', 'star');
starsContainer.appendChild(starElement);
});
}
// Function to make stars twinkle
function twinkleStars() {
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
const currentScale = star.getAttribute('data-original-scale') || 1;
const minSize = currentScale * 0.75;
const maxSize = currentScale * 1.25;
const newSize = Math.random() * (maxSize - minSize) + minSize;
star.setAttribute('transform', `translate(${star.getAttribute('transform').match(/translate\((.*?)\)/)[1]}) scale(${newSize})`);
});
}
// Function to check moon position and regenerate stars
function checkMoonPositionAndRegenerateStars() {
if (moonAngle >= -Math.PI * 0.0 && moonAngle < -Math.PI * 1.5 + angleIncrement) {
const starsContainer = document.getElementById('stars-container');
if (starsContainer) {
while (starsContainer.firstChild) {
starsContainer.firstChild.remove();
}
}
addStars(numStars); // Use the constant here
const stars = document.querySelectorAll('.star');
stars.forEach(star => {
const originalScale = parseFloat(star.getAttribute('transform').match(/scale\((.*?)\)/)[1]);
star.setAttribute('data-original-scale', originalScale);
});
}
}
// Add a flag to manage star regeneration
let regenerateStars = true;
function animateSunAndMoon() {
const sunX = centerX + radius * Math.cos(sunAngle);
const sunY = centerY + radius * Math.sin(sunAngle);
const sunColor = interpolateColor(sunColor1, sunColor2, sunAngle);
sun.setAttribute('transform', `translate(${sunX} ${sunY})`);
sun.style.fill = sunColor;
const moonX = centerX + radius * Math.cos(moonAngle);
const moonY = centerY + radius * Math.sin(moonAngle);
const moonColor = interpolateColor(moonColor1, moonColor2, moonAngle);
moon.setAttribute('transform', `translate(${moonX} ${moonY})`);
moon.style.fill = moonColor;
lawElements.forEach(element => {
const lawColor = sunAngle > -Math.PI ? sunColor : moonColor;
element.style.fill = lawColor;
});
if (moonAngle > -Math.PI * 1.50 && moonAngle < -Math.PI * 0.00) {
const starsContainer = document.getElementById('stars-container');
if (starsContainer) {
starsContainer.style.visibility = 'visible';
}
twinkleStars();
} else {
const starsContainer = document.getElementById('stars-container');
if (starsContainer) {
starsContainer.style.visibility = 'hidden';
}
}
// Check if moon angle passes the critical angle to trigger star regeneration
if (moonAngle < -Math.PI * 1.5 && regenerateStars) {
regenerateStars = false; // Reset the flag
checkMoonPositionAndRegenerateStars();
}
if (moonAngle > -Math.PI * 0.0) {
regenerateStars = true; // Set the flag when the moon angle resets
}
sunAngle -= angleIncrement;
moonAngle -= angleIncrement;
if (sunAngle < -2 * Math.PI) {
sunAngle = 0;
moonAngle = Math.PI;
}
requestAnimationFrame(animateSunAndMoon);
}
// Start the animation
animateSunAndMoon();
// Add initial stars
addStars(numStars);
});
Raw
style.css
html, body {
height: 100%;
width: 100%;
background: #0C3D32;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 75vw;
}
.box svg {
width: 100%;
height: auto;
}
.cls-1 {
clip-path: url(#clippath);
}
.cls-2 {
fill: none;
}
.cls-2, .cls-3, .cls-4, .cls-5 {
stroke-width: 0px;
}
.cls-3 {
fill: #25aa81;
}
.cls-4 {
fill: #faa41a;
transition: fill 0.5s ease-in-out;
}
.cls-5 {
fill: #f2efee;
}
.star {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment