https://github.com/scar17off/animation-previewer
A dynamic animation previewer that generates mesmerizing mathematical patterns using React and Canvas. Create and customize various geometric animations with real-time controls for speed, radius, and point density.
https://github.com/scar17off/animation-previewer
animation animation-library canvas creative-coding generative-art geometric-patterns html5-canvas interactive javascript mathematics react visualization web-animation
Last synced: about 1 year ago
JSON representation
A dynamic animation previewer that generates mesmerizing mathematical patterns using React and Canvas. Create and customize various geometric animations with real-time controls for speed, radius, and point density.
- Host: GitHub
- URL: https://github.com/scar17off/animation-previewer
- Owner: scar17off
- License: mit
- Created: 2025-02-27T06:48:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-27T07:01:41.000Z (over 1 year ago)
- Last Synced: 2025-02-27T09:21:05.866Z (over 1 year ago)
- Topics: animation, animation-library, canvas, creative-coding, generative-art, geometric-patterns, html5-canvas, interactive, javascript, mathematics, react, visualization, web-animation
- Language: JavaScript
- Homepage: https://scar17off.github.io/animation-previewer/
- Size: 416 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Animation Previewer
A React-based interactive animation previewer that demonstrates various mathematical patterns and animations using canvas.
## Features
- Multiple animation patterns including:
- Circle
- Expanding Circle
- Wave
- Figure Eight
- Triangle
- Spiral
- Heart
- Square
- And many more...
- Real-time control over:
- Number of points (3-100)
- Animation radius (10-200)
- Animation speed (0.01-0.2)
- Frame rate (1-60 FPS)
- Visual coordinate system
- Smooth animations with customizable parameters
## Getting Started
1. Clone the repository
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## Built With
- React
- HTML Canvas
- JavaScript
## License
This project is open source and available under the MIT License.