JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<section>
<h1>
Dark Mode
</h1>
<svg id="darkMode" width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="sun" d="M55 27.5C55 42.6878 42.6878 55 27.5 55C12.3122 55 0 42.6878 0 27.5C0 12.3122 12.3122 0 27.5 0C42.6878 0 55 12.3122 55 27.5Z" fill="#F19F24"/>
</svg>

</section>

CSS

*{
  margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
  height: 100vh;
  background: #ababab;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
svg{
  cursor: pointer;
}

JavaScript

const moonPath="M15.5 28.1336C15.5 43.3215 28 55.6336 28 55.6336C12.8122 55.6336 0.5 43.3215 0.5 28.1336C0.5 12.9458 12.8122 0.633621 28 0.633621C28 0.633621 15.5 12.9458 15.5 28.1336Z";
const sunPath="M55 27.5C55 42.6878 42.6878 55 27.5 55C12.3122 55 0 42.6878 0 27.5C0 12.3122 12.3122 0 27.5 0C42.6878 0 55 12.3122 55 27.5Z";
const darkMode=document.querySelector('#darkMode');
console.log(darkMode);
let toggle=false;
darkMode.addEventListener("click",()=>{
console.log("heloo");
const timeline= anime({
 duration: 3000,
 easing: 'easeInOutQuad'
});
timeline.add({
targets:".sun",
d:[{value:moonPath}]
});
})