Batlogo using Clippath

by Aashish Manandhar

HTML

<div class="bats" />

<svg>
  <defs>
    <clipPath id="logo">
      <path d="M134.6 15.2c-.2 1.3-.9 7.4-1.5 13.6-1.1 12.3-3 17.7-8 23.4-4.3 4.9-7.8 6.2-16 5.6-4.9-.4-8.2-1.3-12-3.4-12.7-6.9-14.2-17.3-4.4-30.5 2.3-3.3 4.3-6.1 4.3-6.3 0-1.6-32.4 9.6-42.5 14.7C38 40.6 22 54.5 16.5 65.5c-2.7 5.3-3 7-3 15.1 0 8.5.2 9.5 3.9 16.9 4.9 9.8 16.7 22.2 27.2 28.4 8.3 4.9 25.4 12.5 30.3 13.6l3.5.7-4.2-4.7c-9-10.2-13.5-25.1-9.8-32.2C67.1 98 70.5 96 77.1 96c7.1 0 14.5 3 22.7 9.3 3.1 2.3 6.3 4.6 7 5.1.9.5 2.7-.8 5.6-3.8 4.9-5.3 7.6-5.8 12.7-2.3 4.7 3.1 9.5 9.9 17.5 24.3 3.8 6.8 7.1 12 7.5 11.6.3-.4 2.1-3.4 3.9-6.7 10.4-19.3 16.1-27.5 21-30 4.8-2.5 7-1.8 11.8 3.2 3.1 3.2 4.9 4.3 5.7 3.7.7-.5 3.4-2.6 6.1-4.6 7.7-5.9 15.1-9.1 21.9-9.5 7.1-.4 10 .8 13.3 5.7 4.8 7.1 1.4 20.5-8.2 32.4l-4.8 5.8 3.4-.7c4.9-1.1 22.1-8.8 29.7-13.4 13.3-8.1 21.3-16.3 27.8-28.6 3.7-6.8 3.8-7.4 3.8-17 0-9.5-.2-10.3-3.4-15.9-7.4-12.8-22.1-25.1-40.4-33.6-9.7-4.5-29.4-11.4-35.6-12.5l-4.4-.7 3.5 4.3c7.1 8.8 9.1 15.9 6.4 22.4-2.2 5.3-4.2 7.3-10.1 10.2-5.2 2.7-15.1 4.1-19.9 2.9-4.1-1-9.2-6.2-12.1-12.3-2.1-4.6-2.9-8.1-3.7-18.2-.6-7-1.4-13-1.9-13.5-.4-.5-1.8 1.2-3 3.8l-2.3 4.6H140.3l-1.8-4c-2.3-5-3.3-5.8-3.9-2.8z" />
    </clipPath>
  </defs>
</svg>

SCSS

.bats {
  margin: 30vh auto;
  clip-path: url(#logo);
  -webkit-clip-path: url(#logo);
  background: #242424;
  width: min-content;
  cursor: pointer;
  transition: background 0.3s ease-in;
  &:hover {
    background: #FFC107;
  }
}