<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:'100%',
        width:'100%',
          gap:100,
         display:'flex',
         justifyContent:'center',
         alignItems:'center'
      }}
  >
     <motion.svg
      width="200"
      height="200"
      viewBox="0 0 200 200"
      initial="hidden"
      animate="visible"
    >
      <motion.circle
        cx="100"
        cy="100"
        r="80"
        strokeWidth="10"
        stroke="#ffffff"
        fill='none'
        initial={{
           // pathSpacing
           pathSpacing:0.2,
             pathLength:0.1,

         }}
        animate={{
           pathSpacing:0.8,
             transition:{
               duration:2
             }
         }}
      />
</motion.svg>
 <motion.svg
      width="200"
      height="200"
      viewBox="0 0 200 200"
      initial="hidden"
      animate="visible"
    >
      <motion.circle
        cx="100"
        cy="100"
        r="80"
        strokeWidth="10"
        stroke="#ffffff"
        fill='none'
        initial={{
       // pathOffset
           pathOffset:0.2,
             pathLength:0.2,

         }}
        animate={{
           pathOffset:0.8,
             transition:{
               duration:2
             }
         }}
      />
</motion.svg>
</div>

  )
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.