Light/Dark Toggle

index.html

<svg class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="75" height="75" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff">
  <mask id="m">
    <circle class="masker" cx="7.5" cy="7.5" r="8.5" fill="#fff" />
  </mask>
  <g mask="url(#m)">
    <path class="sun" d="M7.5 1.5v-1m0 13.99v-.998m6-5.997h1m-13 0h-1m2-4.996l-1-1m12 0l-1 1m-10 9.993l-1 1m12 0l-1-1m-2-4.997a2.999 2.999 0 01-3 2.998 2.999 2.999 0 113-2.998z" />  
  </g>
  <path class="moon" d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" />  
</svg>

light-dark-toggle.markdown

Light/Dark Toggle

A Pen by Matt Daniel Brown on CodePen.

License.

script.js

gsap.timeline()
    .set('body', {backgroundColor:'#000'})
    .set('.btn', {left:'50%', xPercent:-50, top:'50%', yPercent:-50, position:'absolute', cursor:'pointer'})
    .set('.moon', {scale:0, transformOrigin:'66% 66%'})

$('.btn').on('click', (e)=>{
  if (gsap.getProperty('body', 'backgroundColor')=='rgb(0, 0, 0)'){
    gsap.timeline({defaults:{duration:0.5, ease:'expo', overwrite:'auto'}})
        .to('.btn', {attr:{stroke:'#000'}}, 0)
        .to('.masker', {attr:{r:0}}, 0)
        .to('.sun', {scale:2.5, transformOrigin:'50% 50%', attr:{'stroke-width':0.25}}, 0)
        .fromTo('.moon', {scale:0},{scale:1}, 0)
        .to('body', {backgroundColor:'#eee', ease:'power3.inOut'}, 0)
  } else {
    gsap.timeline({defaults:{duration:0.5, ease:'expo', overwrite:'auto'}})
        .to('.btn', {attr:{stroke:'#fff'}}, 0)
        .to('.masker', {attr:{r:9}, ease:'power2.inOut'}, 0)    
        .to('.sun', {scale:1, transformOrigin:'50% 50%', attr:{'stroke-width':1}, duration:0.4, ease:'back.inOut(1.5)'}, 0)
        .to('.moon', {scale:0, duration:0.01}, 0)
        .to('body', {backgroundColor:'#000', ease:'power3.inOut'}, 0)
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

style.css

html, body {
  width:100%;
  height:100%;
}