/* 💡 CSS Nugget: Анимированные иллюстрации с clip-path */
/* 🔗 https://s-sd.ru/blog_studio_design/animirovannye-illyustracii-s-clip-path/ */

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

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

.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: grey;
}

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