Let’s start from the bottom with the “oceans” style, which contains all large bodies of water. From a visual perspective, this style is relatively simple and made up of four different elements that we need to replicate with SVG styles: Dark blue deep sea, transitioning over a lighter blue Continental shelf to an even brighter area of coastal waters before reaching the solid blue shoreline.

Deep sea

The lowest layer of the map, geographically and also in the svg. It can be represented by a solid blue (#c2d6ed) background area.

Continental shelf

The transition from deepsea to the lighter blue (#cce3f7) continental shelf is smooth and can easilt be recreated with a Gaussian blur filter. The distance of the shelf to the actual coastline varies, so the shelf will need to have its own svg path. Thanks to the large blur, that path can be very coarse.

Coastal shelf

The bright blue (#dfeef7) coastal waters border the actual coastline with a rather consistent width and cane therefore be created directly from the land svg path. Small variations in width and color are added with a turbulence filter to keep the map from looking to sterile.

Coastline

The actual coastline is simple a thick blue outline (#bad9e8) around any land area. Technically, it could be represented by an svg stroke around the “land” paths.

However, one of the goals of this project is to rely on polyline paths with sharp corners (i.e. no spline curves). This keeps the map data in line with the topojson/geojson format and also simplifies data editing since there are no spline handles. We can avoid jagged outlines by applying a slight blur to the path followed by a thresholding filter. This smoothing does not transfer over to svg strokes, so we create the matching coastline by morphologically growing the area by half the line width and then subtracting a shrunken area from it. Right under this narrow coastline layer we create another one with the same outline smoothing but a solid fill, as a placeholder for the future land/plains style. (Land and coastline might be merged into a single layer in the end, but there might be interactions with the rivers style, so they will stay separated for now.)

What about lakes and islands?

Lakes are visually very similar to oceans, yet they are not “cut-out” from the land area (and the more complex styles on it) and are stand-alone overlays instead. Lake coastlines are defined by the outline of the lakes’ paths, so the coastal water filter needs to be applied to the inverted lake area to work like in the ocean case. For simplicity, any body of water that contains islands or deep sea is represented as an ocean. On the Faerun continent map, the Sea of Fallen Stars is the only inland body of water that needs to be changed to ocean, but adding detail maps might require more changes.

Up next will be the Plains and Grassland terrains, to add some more color to the continent!