Breaking News: Grepper is joining You.com. Read the official announcement!

svg animation using framer motion react

Shirshak Kandel answered on October 3, 2022 Popularity 3/10 Helpfulness 7/10

answer svg animation using framer motion react

svg animation using framer motion react

Comment

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

const Wave = () => (
  <WaveSvg
    viewBox="0 0 1440 363"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <motion.path
      initial={{ pathLength: 0, pathOffset: 1 }}
      animate={{ pathLength: 1, pathOffset: 0 }}
      transition={{ duration: 1 }}
      d="M1440 27.4774C1352.73 19.8184 1122.41 49.0556 899.331 227.276C620.48 450.052 354.282 355.647 170.328 185.318C23.165 49.0556 -4.21721 8.32998 0.487081 5"
      stroke="#D96ED4"
      strokeOpacity="0.5"
      strokeWidth="10"
    />
  </WaveSvg>
);

const WaveSvg = styled.svg`
  position: absolute;
  left: 0;
  z-index: 1;
`;

export default Wave;

Popularity 3/10 Helpfulness 7/10 Language typescript

Source: Grepper

Tags: animation framer-motion svg typescript using

Link to this answer
Share Copy Link

Contributed on Oct 03 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

svg animation using framer motion react

Contents

More Related Answers

svg animation using framer motion react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.