JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://codepen.io/basement/pen/qXMRxX.css">
</head>

<body>
  <div class="wrp">

    <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="45 49 50 50"
         width="100" height="100"
         class="canvas"
    > <!-- How do I zoom 50% and keep viewBox centered on point ( 75, 80 )? -->

      <script xlink:href="https://codepen.io/basement/pen/qXMRxX.js"></script>

      <circle cx="70" cy="74" r="0.5" fill="#f46" />
      <circle cx="70" cy="74" r="0.5" fill="#f46" />
    </svg>

  </div>
</body>

CSS

circle {
  animation-name: pulse;
  animation-duration: 4s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: 50% 50%;
}
circle + circle {
  transform: scale( 0.25 );
  animation-duration: 8s;
}
@keyframes pulse {
  100% {
    transform: scale( 2 );
    opacity: 0;
  }
}