feat: add "dithering" shape

Author: TomBor

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 No changes yet.
 
+## [0.1.5] - 2026-03-05
+
+- New shape available : `dithering` as a 4x4 Bayer matrix.
+
 ## [0.1.1] - 2026-03-02
 
 ### Fixed

README.md

@@ -116,21 +116,21 @@ Creates a pattern that can be used in SVG or Canvas.
 
 #### Options
 
-| Option         | Type     | Default         | Description                                                                                         |
-| -------------- | -------- | --------------- | --------------------------------------------------------------------------------------------------- |
-| `type`         | string   | `"line"`        | Pattern type: "line", "plaid", "circle", "plus", "cross", "triangle", "square", "diamond", "custom" |
-| `scale`        | number   | `1`             | Scale of the tile (multiplier)                                                                      |
-| `size`         | number   | `20`            | Shape size as a percentage of tile area (0-100)                                                     |
-| `angle`        | number   | `0`             | Rotation angle in degrees (0-360)                                                                   |
-| `fill`         | string   | `"black"`       | Fill color (CSS color)                                                                              |
-| `stroke`       | string   | `"transparent"` | Stroke color (CSS color)                                                                            |
-| `strokeWidth`  | number   | `0`             | Stroke width in pixels                                                                              |
-| `dash`         | number[] | `[]`            | Dash pattern for stroke (e.g., `[5, 5]`)                                                            |
-| `background`   | string   | `"white"`       | Background color of the pattern tile                                                                |
-| `border`       | number   | `0`             | Border width around tile edges                                                                      |
-| `patchSize`    | boolean  | `false`         | Intelligently swap foreground/background for better appearance at high sizes                        |
-| `custom.shape` | function | -               | Custom shape function (for type: "custom")                                                          |
-| `custom.patch` | number   | `50`            | Patch size for custom shapes                                                                        |
+| Option         | Type     | Default         | Description                                                                                                      |
+| -------------- | -------- | --------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `type`         | string   | `"line"`        | Pattern type: "line", "plaid", "circle", "plus", "cross", "triangle", "square", "diamond", "dithering", "custom" |
+| `scale`        | number   | `1`             | Scale of the tile (multiplier)                                                                                   |
+| `size`         | number   | `20`            | Shape size as a percentage of tile area (0-100)                                                                  |
+| `angle`        | number   | `0`             | Rotation angle in degrees (0-360)                                                                                |
+| `fill`         | string   | `"black"`       | Fill color (CSS color)                                                                                           |
+| `stroke`       | string   | `"transparent"` | Stroke color (CSS color)                                                                                         |
+| `strokeWidth`  | number   | `0`             | Stroke width in pixels                                                                                           |
+| `dash`         | number[] | `[]`            | Dash pattern for stroke (e.g., `[5, 5]`)                                                                         |
+| `background`   | string   | `"white"`       | Background color of the pattern tile                                                                             |
+| `border`       | number   | `0`             | Border width around tile edges                                                                                   |
+| `patchSize`    | boolean  | `false`         | Intelligently swap foreground/background for better appearance at high sizes                                     |
+| `custom.shape` | function | -               | Custom shape function (for type: "custom")                                                                       |
+| `custom.patch` | number   | `50`            | Patch size for custom shapes                                                                                     |
 
 #### Return Value
 
@@ -211,6 +211,14 @@ motif({ type: "square", size: 25 });
 motif({ type: "diamond", size: 25 });
 ```
 
+### Dithering
+
+Dithering pattern. Due to the 4x4 Bayer matrix, the `size` option is limited to only 16 values/steps (multiples of 4).
+
+```typescript
+motif({ type: "dithering", scale: 2, size: 30 });
+```
+
 ### Custom
 
 Define your own pattern shape

demo/src/components/AttentionPoints.svelte

@@ -15,6 +15,7 @@
     "triangle",
     "square",
     "diamond",
+    "dithering",
   ];
   const patchSizes = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   let patchEnabled = $state(true);

demo/src/components/Generator.svelte

@@ -27,6 +27,7 @@
     "triangle",
     "square",
     "diamond",
+    "dithering",
   ];
 
   let dash = $derived(

demo/src/lib/presets.ts

@@ -42,6 +42,10 @@ export const presets: Preset[] = [
     name: "Plus",
     options: { type: "plus", scale: 4, size: 21, angle: 15, fill: "#f08080", stroke: "#000000", strokeWidth: 2  }
   },
+  {
+    name: "Dithering",
+    options: { type: "dithering", scale: 2, size: 30  }
+  },
   {
     name: "Royal blue",
     options: { type: "square", scale: 2.5, size: 5, angle: 45, fill: "#ffd700", background: "#00009D" }

src/motif.ts

@@ -24,7 +24,7 @@ const DEFAULT_DPI_MULTIPLIER = 2;
 const CROSS_DIAMOND_ROTATION = 45;
 const TILE_BASE_SIZE = 10;
 
-export type PatternType = "line" | "plaid" | "circle" | "plus" | "cross" | "triangle" | "square" | "diamond" | "custom";
+export type PatternType = "line" | "plaid" | "circle" | "plus" | "cross" | "triangle" | "square" | "diamond" | "dithering" | "custom";
 
 export type CustomShapeFnSVG = (t: number, shapeArea: number) => string;
 export type CustomShapeFnCanvas = (t: number, shapeArea: number, context: Path) => Path;
@@ -134,6 +134,47 @@ function square(t: number, shapeArea: number): string {
           Z`;
 }
 
+function dithering(t: number, shapeArea: number): string {
+  // 1. Calcul du ratio de remplissage (entre 0 et 1)
+  // t * t est l'aire totale de la tuile
+  const ratio = Math.max(0, Math.min(1, shapeArea / (t * t)));
+
+  // 2. Matrice de Bayer 4x4 (valeurs de 0 à 15)
+  // Elle définit l'ordre dans lequel les pixels s'allument
+  const bayer = [
+     0,  8,  2, 10,
+    12,  4, 14,  6,
+     3, 11,  1,  9,
+    15,  7, 13,  5
+  ];
+
+  const gridSize = 4; // Grille de 4x4 pixels
+  const pixelSize = t / gridSize; // Taille d'un "pixel"
+  let path = '';
+
+  // 3. Boucle sur la grille pour construire le chemin SVG
+  for (let y = 0; y < gridSize; y++) {
+    for (let x = 0; x < gridSize; x++) {
+      // On normalise le seuil entre 0 et 1 
+      // (+ 0.5 pour centrer l'activation sur les classes de ok-palette)
+      const threshold = (bayer[y * gridSize + x] + 0.5) / (gridSize * gridSize);
+
+      if (ratio >= threshold) {
+        // Coordonnées du coin supérieur gauche du pixel
+        // On part de -t/2 pour respecter le centrage de motif.js
+        const px = -t / 2 + x * pixelSize;
+        const py = -t / 2 + y * pixelSize;
+
+        // Ajout du petit carré au chemin SVG global
+        path += `M ${px} ${py} h ${pixelSize} v ${pixelSize} h ${-pixelSize} Z `;
+      }
+    }
+  }
+
+  // Si l'aire est très proche de 0, on retourne un chemin vide
+  return path.trim() || 'M 0 0'; 
+}
+
 export function motif(options: PatternOptions = {}): PatternResult {
   let {
     type = "line",
@@ -164,6 +205,7 @@ export function motif(options: PatternOptions = {}): PatternResult {
     ["triangle", triangle],
     ["square", square],
     ["diamond", square],
+    ["dithering", dithering],
     ["custom", custom?.shape as CustomShapeFn]
   ]);
 
@@ -177,6 +219,7 @@ export function motif(options: PatternOptions = {}): PatternResult {
     ["cross", 55],
     ["square", 50], // arbitrary
     ["diamond", 50],
+    ["dithering", 100],
     ["custom", custom?.patch ?? 50]
   ]);