Use small gradient at particle edges

This reduces the jaggedness of streamlines.

src/lib/streamlines/layer.ts

@@ -50,7 +50,7 @@ function mapBoundsToEpsg3857BoundingBox(
 
 export class WMSStreamlineLayer implements CustomLayerInterface {
   private static readonly MAX_PARTICLE_DISPLACEMENT = 2
-  private static readonly PARTICLE_TEXTURE_SIZE = 8
+  private static readonly PARTICLE_TEXTURE_SIZE = 32
 
   public readonly renderingMode = '2d'
   public readonly type = 'custom'

src/lib/streamlines/visualiser.ts

@@ -375,11 +375,18 @@ export class StreamlineVisualiser {
       throw new Error('Could not initialise 2D offscreen canvas.')
     }
 
-    context.beginPath()
     const x = radius
     const y = radius
+    const gradient = context.createRadialGradient(x, y, 0, x, y, radius)
+
+    const particleColor = this.options.particleColor ?? 'black'
+    gradient.addColorStop(0, particleColor)
+    gradient.addColorStop(0.8, particleColor)
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
+
+    context.beginPath()
     context.arc(x, y, radius, 0, 2 * Math.PI, false)
-    context.fillStyle = this.options.particleColor ?? 'black'
+    context.fillStyle = gradient
     context.fill()
 
     const data = context.getImageData(0, 0, width, height).data