How to make animated path on a circle with framer motion?

Question

I have this issue: I am making a circle and it animates like if it would have 2 strokes. Also, the animation has 2 starting points. any idea what's wrong?

https://codesandbox.io/s/silly-bohr-fo5bs?file=/src/App.js

import { motion } from "framer-motion";
import styled from "styled-components";

const Circle = styled(motion.path)`
  stroke: #301240;
  stroke-width: 0.5;
  fill: none;
`;
const Line = styled.line`
  fill: none;
  stroke: #301240;
  stroke-miterlimit: 10;
  stroke-width: 0.74px;
`;
const Svg = styled(motion.svg)`
  margin: 10px;
  width: 100px;
`;

const circleVariants = {
  hidden: {
    opacity: 1,
    pathLength: 0
  },
  visible: {
    opacity: 1,
    pathLength: 1,
    transition: {
      duration: 4,
      ease: "easeInOut"
    }
  }
};

const Close = () => {
  return (
    <>
      <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.49 86.49">
        <Circle
          variants={circleVariants}
          initial="hidden"
          animate="visible"
          d="M43.25.25a43,43,0,1,1-43,43,43,43,0,0,1,43-43m0-.25A43.25,43.25,0,1,0,86.49,43.25,43.25,43.25,0,0,0,43.25,0Z"
          fill="none"
        />
        <Line x1="35.31" y1="35.31" x2="51.18" y2="51.18" />
        <Line x1="51.18" y1="35.31" x2="35.31" y2="51.18" />
      </Svg>
    </>
  );
};

export default Close;

Answer 1

Your circle had 2 strokes in it's path, use this value instead:

      d="M43.25.25a43,43,0,1,1-43,43,43,43,0,0,1,43-43"