stipple-maplibre 0.1.1 → 0.2.0

package/README.md

@@ -8,9 +8,10 @@ It supports geometric patterns, repeated text, and SVG symbols. Patterns can
 be configured in JavaScript or prepared in the playground and exported as
 MapLibre code.
 
-<p align="center"><strong><a href="https://stipple.pages.dev/">Run the playground</a></strong></p>
+<img width="1456" alt="Stipple playground showing pattern customization on a MapLibre map" src="./assets/readme/playground.png" />
+
+<p align="center"><strong><a href="https://stipple.pages.dev/">➞ Run the playground</a></strong></p>
 
-<img width="1456" height="858" alt="Stipple playground showing a patterned polygon on a MapLibre map" src="https://github.com/user-attachments/assets/f7d28a0f-267a-4bd3-b7a2-30b49eabf709" />
 
 ## What problem does it solve?
 
@@ -20,8 +21,7 @@ map, and kept at an appropriate resolution when the display or style changes.
 
 Stipple generates this image from a small set of pattern parameters. It draws
 the tile in the browser, installs it with MapLibre's public `addImage` API,
-and provides the corresponding `fill-pattern` value. It does not patch or
-fork MapLibre.
+and provides the corresponding `fill-pattern` value.
 
 ## What can I make with it?
 
@@ -30,6 +30,47 @@ fork MapLibre.
 - SVG fills: repeat one of the bundled symbols or bring your own SVG.
 - A background colour and polygon outline to go with the pattern.
 
+### Examples
+
+<table>
+  <tr>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-solid.png" alt="Polygon with a solid fill" width="100%"><br>
+      <sub><em>Solid</em></sub>
+    </td>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-stipple.png" alt="Polygon filled with a stipple pattern" width="100%"><br>
+      <sub><em>Stipple</em></sub>
+    </td>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-hatches.png" alt="Polygon filled with diagonal hatches" width="100%"><br>
+      <sub><em>Hatches</em></sub>
+    </td>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-dots.png" alt="Polygon filled with a regular dot pattern" width="100%"><br>
+      <sub><em>Dots</em></sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-grid.png" alt="Polygon filled with a grid pattern" width="100%"><br>
+      <sub><em>Grid</em></sub>
+    </td>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-font-fill.png" alt="Polygon filled with repeated text" width="100%"><br>
+      <sub><em>Font fill</em></sub>
+    </td>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-svg-symbol.png" alt="Polygon filled with a bundled SVG motif" width="100%"><br>
+      <sub><em>SVG fill</em></sub>
+    </td>
+    <td align="center" width="25%">
+      <img src="./assets/readme/example-custom-svg.png" alt="Polygon filled with a custom SVG motif" width="100%"><br>
+      <sub><em>Or even your custom SVG</em></sub>
+    </td>
+  </tr>
+</table>
+
 You can change the colour, opacity, spacing, weight, angle, scale, and layout.
 Font fills also let you choose the typeface, style, and letter spacing. SVG
 fills can use regular rows, offset rows, or a more natural-looking seeded
@@ -39,7 +80,6 @@ The playground includes 34 SVG motifs covering vegetation, trees,
 agriculture, water, terrain, land use, and simple shapes. The same seed always
 produces the same arrangement.
 
-<!-- Add a small gallery here: geometric, font, SVG, and custom SVG. -->
 
 ## But can’t I just ask AI to do this?
 
@@ -64,16 +104,17 @@ locally in the browser and are not uploaded to a server.
 
 ### Run it locally
 
-To work from the source repository, install the dependencies and build the
-library:
+From a clone of this repository, install the development dependencies and
+build Stipple:
 
 ```sh
 npm install
 npm run build
 ```
 
-Then open the local [`demo/index.html`](./demo/index.html) file in your
-browser.
+The repository itself is the `stipple-maplibre` package, so you do not need to
+install it separately. Then open the local
+[`demo/index.html`](./demo/index.html) file in your browser.
 
 ## Supported file formats
 
@@ -117,7 +158,7 @@ map.on("load", () => {
   syncPatternTexture(map, {
     imageId: "my-hatches",
     pattern: "hachures",
-    size: 16,
+    size: 33,
     color: "#2c6a5b",
     weight: 2,
     angle: 45,
@@ -280,7 +321,7 @@ in Node.
 
 ## Project status
 
-Version `0.1.1` is available on
+Version `0.2.0` is available on
 [npm](https://www.npmjs.com/package/stipple-maplibre). The whole-symbol
 scatter API is the only part currently marked experimental.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stipple-maplibre",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Runtime-generated geometric and SVG fill patterns for MapLibre GL JS, with deterministic styling and a visual playground.",
   "license": "MIT",
   "type": "module",