https://github.com/eee-n/dots-background

https://github.com/eee-n/dots-background

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/eee-n/dots-background
• Owner: eee-n
• Created: 2025-01-12T20:07:54.000Z (10 days ago)
• Default Branch: main
• Last Pushed: 2025-01-12T20:13:45.000Z (10 days ago)
• Last Synced: 2025-01-12T21:21:30.296Z (10 days ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Interactive dots background 


A dynamic interactive dot background using HTML canvas and JavaScript. 


## Configuration 


You can customize the following parameters in the JavaScript file: 


- `dotMargin`: Margin for dots before interaction.

- `dotDiameter`: Diameter of the dots.

- `interactionCircleHitboxRadius`: Radius of the interaction circle hitbox.

- `interactionCircleColor`: Color of the interaction circle hitbox.

- `singleDotHitboxColor`: Color of the single dot hitbox.

- `dotColor`: Default color of dots.

- `dotTouchColor`: Color of dots when touched by the interaction circle.

- `pullStrength`: Strength of dot pull to interaction hitbox. (Negative for bulge, positive for pinch)

- `moveDistance`: Distance the dot moves when touched by the single dot hitbox.

- `singleDotHitboxRadius`: Radius for the single dot hitbox.

## Usage 


You can toggle the debug setting by setting debug to true or false with the following command: `isDebug = true` 
 


You must add a HTML5 canvas with the dots class and the recommended CSS: `` 
 

## Example 


https://jsfiddle.net/yh1etzfg/8/ 
 


Credit when used is very appreciated