[object Object]

by Sebastian Kay

HTML

<svg id="svg-stage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
  <path id="diamond" fill="url(#grad)" d="M46.57 1.4 C55.29 1.2 64.01 1 72.73 0.8 69.42 13.04 66.11 25.27 62.8 37.51 67.54 37.71 72.29 37.91 77.03 38.1 61.74 58.53 46.45 78.96 31.17 99.39 35.88 83.74 40.59 68.09 45.3 52.45 39.64 52.25 33.97 52.05 28.31 51.85 34.4 35.03 40.48 18.21 46.57 1.4 z" data-original="M50,1l49,49L50,99L1,50L50,1z"></path>
  <path id="lightning" fill="transparent" d="M47.1,0.8 73.3,0.8 61.9,37.2 77.1,37.2 30.7,99.4 45.8,51.9 29,51.9z"></path>
</svg>


<svg id="gradient" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
  <defs>
    <linearGradient id="grad" x1="0" y1="0" x2="99" y2="99" gradientUnits="userSpaceOnUse">
      <stop offset="0.2" stop-color="rgb(255, 135, 9)"></stop>
      <stop offset="0.7" stop-color="rgb(247, 189, 248)"></stop>
    </linearGradient>
  </defs>
</svg>
  <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MorphSVGPlugin.min.js"></script>

CSS

body {
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #0e100f;
  overflow: hidden;
}

.container {
  position: relative;
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 9px;
}

#svg-stage {
  width:60%;
  max-height:60vh;
  max-width:500px;
  overflow:visible;
}

#gradient {
  height: 0;
}

JavaScript

gsap.to("#diamond", {
  morphSVG: "#lightning",
  duration: 2,
  ease: "expo.inOut",
  repeat: -1,
  yoyo: true });