Welcome to the SVG sine waves generator! 🌊

• Live app
• Figma design
• Complete breakdown on Medium

📘 About the project

A simple sine waves generator built with Svelte. Use it for all of your Front-end and designs projects 🎨

Challenges faced

• Export SVG path while HTML Canvas render raster images -> Use canvas2svg library.
• Use a global state for slider values to access states from any component -> Use Svelte stores.
• Test the app on real mobile device without deploying it -> Use Cloudflare tunnels.

🔨 Built with

• SvelteKit
• canvas2svg
• Anime.js

Utility tools used

• Figma -> Design
• Visual Studio Code -> Code editing
• Linear -> Project management
• Sizzy -> Emulating browsers

✨ Run it locally on your computer

Prerequisites

You need npm package manager before starting. Run the following command in your terminal.

npm install npm@latest -g

Installation

1. Create a new folder and clone the repo by runnning this command

   git clone https://github.com/Hugo-Dz/Sinwaver.git

2. Install NPM packages

   npm install

3. Start the app

   npm run dev

📝 Licence

Distributed under the GNU GPLv3 License. See LICENSE.txt for more information.

🎈 Drop me a line

• My Twitter
• My Dribbble
• Email: [email protected]