Transform origin?

[KevinBurton]

I have a Gatsby app that the landing page looks like:

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      <Bio />
      <Goo>
        <svg width="192" height="192">
          <g style={{ animation: 'left 4s linear infinite' }}>
            <circle cx="37%" cy="37%" fill="orchid" r="32" style={{ animation: 'right 1s linear infinite' }}/>
            <circle cx="63%" cy="63%" fill="mediumorchid" r="32"/>
          </g>
        </svg>
      </Goo>
    </Layout>
  )
}

Just exactly as the tutorial But it appears that the continuous transformation is about the upper left hand corner of the rectangle rather than the middle. Basically I want to shift the SVG over so that it appears like the turtorial. Right now I only see what appears when the transform takes the display to the 'lower right quadrant'

Thank you

[luukdv]

Good catch, I've added it to https://gooey-react.netlify.app/tutorial/. Let me know if that solves it for you.