8000 GitHub - imadx/svg-sine-anim-revamp: An SVG path animation of a sine wave propogation using Javascript
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

imadx/svg-sine-anim-revamp

BranchesTags

Repository files navigation

demo.mp4

SVG Sine Animation - Revamp

This is a fun project to revamp the original SVG Sine Animation. The goal is to provide a more structured and reusable component for generating animated SVG curves using React.

Demo: https://svg-sine-anim-revamp.vercel.app/

Original implementation can still be found here https://github.com/imadx/svg-sine-anim

Run the Project Locally

pnpm install
pnpm dev

SvgCurve Component

This React component generates an animated SVG curve. It utilizes quadratic Bezier curves to create a smooth, flowing shape that can be customized through props.

eg:

<path d="M -2000 300 q 500 0 1000 200 t 1000 0 t 1000 0 t 1000 0 t 1000 0 t 1000 0 t 1000 0 t 1000 0" fill="none" stroke="hsl(150, 100%, 50%)" stroke-width="10" stroke-linecap="round"></path>

Explanation of the SVG Path Commands:

  • M - Move to the starting point
  • q - Quadratic Bezier curve
  • t - Smooth quadratic Bezier curve

Read more on MDN

About

An SVG path animation of a sine wave propogation using Javascript

svg-sine-anim-revamp.vercel.app

Topics

react svg typescript svg-path sine sine-wave svg-animation sine-wave-generator

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Languages
0