https://github.com/jxmked/canvas-shaped-background

Random shape animation in canvas
https://github.com/jxmked/canvas-shaped-background

animation canvas canvas2d javascript portfolio-include typescript

Last synced: 9 days ago
JSON representation

Random shape animation in canvas

• Host: GitHub
• URL: https://github.com/jxmked/canvas-shaped-background
• Owner: jxmked
• License: mit
• Created: 2023-01-10T00:23:12.000Z (almost 2 years ago)
• Default Branch: xio
• Last Pushed: 2024-05-20T01:04:23.000Z (6 months ago)
• Last Synced: 2024-05-21T02:17:36.333Z (6 months ago)
• Topics: animation, canvas, canvas2d, javascript, portfolio-include, typescript
• Language: TypeScript
• Homepage: https://jxmked.github.io/canvas-shaped-background/
• Size: 1.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# canvas-shaped-background

Random shape animation in canvas

Currently, it does not use physics for boudary collision

and does not have object to object collision.

# Current Features

- Random shapes may appear on click event

- Uses 2 canvas. (For background and foreground)

  - Where background is blurry and out of focus.

  - Where foreground is focused and interact with click event

### Available shapes

 - Circle

 - Square

 - Octagon

 - Hexagon

 - Cross

 - Triangle

# Installation

`npm install`

# Dev Mode

`npm run dev` or `npm start`

# Build

`npm run build`

# Lint

`npm run lint:tsc` or `npm run lint` - to lint all

## Socials

- [Github](https://github.com/jxmked)

- [Facebook](https://www.facebook.com/deguia25)