<template>
  <svg
    class="logo"
    viewBox="0 0 24 24"
    width="16"
    height="16"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      class="fill-current"
      d="M2.534 9.287C2.534 15.46 7.56 24 12 24c4.18 0 9.466-8.539 9.466-14.713C21.467 3.113 17.228 0 12 0 6.772 0 2.534 3.113 2.534 9.287zm11.926 4.565a4.649 4.649 0 014.257-1.261 4.649 4.649 0 01-1.262 4.256 4.649 4.649 0 01-4.257 1.262 4.649 4.649 0 011.262-4.257zm-9.177-1.261a4.649 4.649 0 014.258 1.261 4.649 4.649 0 011.261 4.257 4.649 4.649 0 01-4.257-1.262 4.649 4.649 0 01-1.262-4.256z"
    />
  </svg>
</template>

<style scoped lang="scss">
.logo {
  animation: 200ms appear;
}

@keyframes appear {
  0% {
    @apply opacity-0;
  }
  100% {
    @apply opacity-100;
  }
}
</style>
