Pin Drop

<div class="nuda-pindrop">
  <svg viewBox="0 0 24 32" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linejoin="round">
    <path class="nuda-pindrop__pin"
          d="M12 1c-5.5 0-10 4.5-10 10 0 7 10 20 10 20s10-13 10-20c0-5.5-4.5-10-10-10z"
          fill="#e4ff54" stroke="#09090b" />
    <circle class="nuda-pindrop__dot" cx="12" cy="11" r="3.5" fill="#09090b" />
  </svg>
  <span class="nuda-pindrop__shadow"></span>
</div>

.nuda-pindrop {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  height: 50px;
}

.nuda-pindrop svg {
  width: 30px;
  height: 40px;
  animation: _pinFall .7s cubic-bezier(.34,1.56,.64,1);
}

.nuda-pindrop__pin {
  transform-origin: 12px 32px;
  animation: _pinSettle 1.2s cubic-bezier(.34,1.56,.64,1) .55s;
}

.nuda-pindrop__shadow {
  width: 18px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  filter: blur(2px);
  margin-top: -4px;
  animation: _pinShadow .7s ease-out;
}

@keyframes _pinFall {
  0% {
    transform: translateY(-26px) scale(.6);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(1.08);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes _pinSettle {
  0%,50%,100% {
    transform: scale(1);
  }
  25% {
    transform: scale(.94,1.06);
  }
  75% {
    transform: scale(1.04,.96);
  }
}

@keyframes _pinShadow {
  0% {
    transform: scale(.2);
    opacity: 0;
  }
  60% {
    transform: scale(.6);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pindrop svg,.nuda-pindrop__pin,.nuda-pindrop__shadow {
    animation: none;
  }
}