Motion: [BUG] motion.circle and other components aren't recognizable by browser

[SergChr]

Describe the bug
The <motion.div> works only, but if I'm trying to render <motion.circle> (as well as <motion.path>) I get the error:

Warning: The tag <circle> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in circle (created by RenderComponent)
    in RenderComponent (created by ForwardRef(MotionComponent))
    in ForwardRef(MotionComponent) (at App.js:7)
    in div (at App.js:6)
    in App (at src/index.js:7)

My code was taken from examples:

import React from 'react';
import { motion } from 'framer-motion';

function App() {
  return (
    <div className="App">
      <motion.circle
        style={{ scale: 2, originX: "100px", originY: "100px" }}
      />
    </div>
  );
}

export default App;

To Reproduce
Steps to reproduce the behavior:

1. Run the code sample provided above
2. See error

Expected behavior
<motion.{anything}> shouldn't cause the error.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Browser: Chrome
• Version 74.0.3729.131 (Official Build) (64-bit)

[mattgperry]

Hey there. The problem here is SVG elements like path and circle need to be rendered within SVGs.

There’s no difference if you were to use circle or motion.circle.

Here’s a good SVG reference https://developer.mozilla.org/en-US/docs/Web/SVG/Element