https://github.com/vishwas567917/fire-effects

fire-effects
https://github.com/vishwas567917/fire-effects

firebase html-css-javascript realistic-effect

Last synced: 10 days ago
JSON representation

fire-effects

• Host: GitHub
• URL: https://github.com/vishwas567917/fire-effects
• Owner: Vishwas567917
• Created: 2024-05-04T05:20:30.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-05-04T05:24:36.000Z (7 months ago)
• Last Synced: 2024-05-04T07:27:01.090Z (7 months ago)
• Topics: firebase, html-css-javascript, realistic-effect
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fire Effects on Canvas

This repository contains a JavaScript and HTML5 canvas project that creates a fire-like visual effect. It uses a series of moving lines with various properties to simulate a dynamic fire effect on a canvas element.

## Preview

![Fire effects](https://github.com/Vishwas567917/Fire-Effects/assets/139749696/be666b9a-f894-41d5-86ad-262aaeec3865)

## Project Overview

The project uses JavaScript to manipulate a canvas element, creating a visually appealing fire effect. The key components of this project are:

- **Canvas Element:** The canvas provides the drawing surface for the fire effect.

- **Lines and Particles:** A collection of lines that move and change over time to simulate fire.

- **Dynamic Properties:** The effect uses various properties to control the color, light, and behavior of the lines to create a dynamic fire-like animation.

## Code Structure

- **HTML:** Defines the canvas element and includes the JavaScript script.

- **CSS:** Styles the canvas element and ensures proper layout.

- **JavaScript:** Contains the logic for generating the fire effect, including the lines' movement and color changes.

## Usage

To run the fire effect:

1. Clone or download the repository to your local environment.

2. Open the `index.html` file in a web browser.

3. The fire effect will start automatically, with lines and particles creating a dynamic visual.

4. Resize the browser window to see the effect adjust to the new dimensions.

## Contributing

Contributions are welcome! If you have suggestions for improving the effect or adding new features, please open an issue or submit a pull request.