Expira e Inspira

import "./styles.css"

export default function App() {
  return (
    <div className="main">
      <div className="breathing" />
    </div>
  )
}

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

.breathing {
  animation: breathing 4s ease-out infinite normal;
  background-color: red;
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,110 Q15,90,15,45 Z"
  );
  height: 120px;
  width: 150px;
}

@keyframes breathing {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(2);
  }

  100% {
    transform: scale(1);
  }
}