React - Animation(SVG)

const Wrapper = styled(motion.div)`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Svg = styled.svg`
  width: 300px;
  height: 300px;
  path {
    stroke: white;
    stroke-width: 2;
  }
`;
const svgVarient = {
  start: { pathLength: 0, fill: "rgba(255, 255, 255, 0)" },
  end: {
    pathLength: 1,
    fill: "rgba(255, 255, 255, 1)",
  },
};
function App() {
  return (
    <Wrapper>
      <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <motion.path
          variants={svgVarient}
          initial="start"
          animate="end"
          transition={{
            default: { duration: 3 },
            fill: { duration: 1, delay: 1 },
          }}
          d="~~~"
        />
      </Svg>
    </Wrapper>
  );
}

export default App;

transition을 세부적으로 나눌 수 있는데, default는 모든 요소에 적용되는 것이고, 나머지는 transition을 적용할
특성을 쓰면 그 항목에만 적용이 된다. fill을 썼으니 svg의 fill요소에만 해당 transition이 적용된 것이다.

svg는 path를 가지고있고 path는 fill특성을 가지고있다. 이 fill을 바꾸면 색상을 바꿀 수 있다. currentColor는 svg가 색상을 가질 것이라는 뜻이다.