https://github.com/maurerkrisztian/canvasshapesbackground

Animated circles with Canvas
https://github.com/maurerkrisztian/canvasshapesbackground

animation htmlcanvas

Last synced: 7 days ago
JSON representation

Animated circles with Canvas

• Host: GitHub
• URL: https://github.com/maurerkrisztian/canvasshapesbackground
• Owner: MaurerKrisztian
• Created: 2020-03-13T19:56:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-06T12:18:01.000Z (over 2 years ago)
• Last Synced: 2023-03-10T07:16:45.360Z (over 1 year ago)
• Topics: animation, htmlcanvas
• Language: TypeScript
• Homepage:
• Size: 208 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# canvas-shapes-background.

### Animated shapes with Canvas

## Live demo: https://canvas-shapes-background.netlify.app/

##  Example usage:

```html

    

    Title

    

    createShapeCanvas("myCanvas", {

        modelNumbers: 11,

        colors: ['blue', 'red', 'green', 'yellow'],

        backgroundColor: 'black', //'none',

        enabledModels: ['Triangle', 'Circle', 'Rect'],

        minSpeed: 11,

        maxSpeed: 11,

        lineWidth: 3,

        sizeMultiplier: 2,

        startPosition: 'random', //  'middle' | 'random',

        isFullScreen: true,

    })

```

blog post: https://dev.to/maurerkrisztian/bouncing-shapes-background-with-canvas-30pf