<div id="app">
  
</div>              

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #f08, #d0e);
}

import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion} from "https://esm.sh/framer-motion@8.3.3";


const App = function() {
  
  return (
<div 
  style={{
        height:1200,
        width:1200,

         display:'flex',
         justifyContent:'center',
         alignItems:'center'
      }}
  >
    <motion.svg   width="1000" height="800" viewBox="0 0 300 100" style={{
      border:'white solid 1px'
    }} xmlns="http://www.w3.org/2000/svg">
   <motion.radialGradient cx="25%" id="myGradient">
    <motion.stop offset="0"    stopColor="white" />
    <motion.stop offset="50%" stopColor="black" animate={{
           transition:{
            duration:2
          },
         offset:'100%'
       }}/>
  </motion.radialGradient>

 <motion.rect  width="20" height="80" x="100" fill="#008d46" animate={{
          width:100,
            fill:'#ff0000',
            
          transition:{
            duration:2
          }
        }}/>
  <circle  cx="50" cy="50" r="45"/>
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</motion.svg>

</div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)