Create Random Dot Patterns with Dotsy JavaScript Library

Dotsy is a lightweight JavaScript library that generates customizable, non-overlapping dots positioned randomly within a container. You control the container’s dimensions, dot radius, and color. Dotsy handles the calculations and HTML creation.

This library can help anyone create dynamic dot patterns. By specifying the container size and dot attributes, you can quickly generate the necessary HTML. No SVG, Canvas, or Images needed.

How to use it:

1. Install the package and import it into your project.

npm i dotsy

// ES Module
import * as dotsy from 'dotsy';
// CommonJS
const dotsy = require('dotsy');
// Browser
<script src="/path/to/dist/dotsy.es2015-iife.min.js"></script>

2. Set up your Dotsy settings. Here, you define the container’s width and height, along with the unit type (vmin, px, etc.).

let settings = new dotsy.Settings();
settings.width = 100;
settings.height = 50;
settings.unit = 'vmin';

3. Generate the HTML and append the dots to your target element:

let html = dotsy.getHtml(settings);
document.getElementById("yourElement").innerHTML = html;

How it works:

The library operates through several key components:

1. Settings class stores configuration for width, height, unit measurement, and dot collection

2. Coordinate calculation:

• Creates a grid of x,y positions
• Calculates initial distances from boundaries
• Maintains spacing between dots

3. Dot placement algorithm:

• Filters coordinates based on dot radius
• Selects random valid positions
• Updates available space after each placement
• Generates HTML with absolute positioning