SVG Morph

Morphing SVG shape using SMIL.

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="moonBTN">
  <svg viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
	<!-- Internal style-sheet of SVG -->
	<style type="text/css">
      .moonPath {
        fill: #FF3000;
      }
    </style>
	<!-- This is the round moon path -->
    <path id="circle" class="moonPath" d="M918.64,773.39c-150.99,231.21-461.4,295.86-693.32,144.41C-8.09,765.37-69.63,457.82,81.36,226.61
	S544.7-67.99,772.1,80.52C1004.02,231.98,1069.63,542.18,918.64,773.39z">
	<!-- Animates the path to a crescent shape -->
      <animate id="animation-to-crescent"
	  	begin="indefinite"
		fill="freeze"
		dur="250ms"
		attributeName="d"
		to="M918.64,773.39c-150.99,231.21-461.4,295.86-693.32,144.41c77.3-13.4,320.34-58.17,471.33-289.38
	s101.99-466.69,75.46-547.9C1004.02,231.98,1069.63,542.18,918.64,773.39z" />
    </path>
  </svg>
</div>

CSS

#moonBTN {
	width: 20%;
	cursor: pointer;
}

JavaScript

animationToCrescent = document.getElementById("animation-to-crescent");

document.addEventListener('click', function(e) {
  e.preventDefault();
  animationToCrescent.beginElement();
}, false);