// 💡 CSS Nugget: Animated Illustrations with clip-path
// ℹ️ Move cursor over the square to trigger the animation
// 🔗 https://codyhouse.co/nuggets/animated-illustrations-clip-path

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.img-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #071b24;
}

.img-wrapper:hover .mountain {
  clip-path: polygon(15% 85%, 30% 60%, 41% 74%, 61% 40%, 85% 85%);
}

.sun {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: 100px;
  left: 64px;
  background-color: violet;
}

.mountain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: violet;
  clip-path: polygon(0% 100%, 0% 0%, 50% 0%, 100% 0%, 100% 100%);
  transition: .3s var(--ease-out);
}