How to render "paths" like the iOS game "FROST"

Hi there,

I'm curious what the approach is to rendering "organic" looking paths/areas in the game FROST. (on the left in the first image, on the right in the second image). In particular, I'm curious how the shape of the area is formed, as well as the how the border is created (the light edge, dark region near border, slightly lighter center region). I'm not interested in the particles in the center of the path.

My initial thought is that these regions are represented by a set of discs (point & radius). In a fragment shader, a pixel calculates the signed distance to its nearest disc, and outputs a color based on that signed distance (thin color border vs dark region vs lighter center). I'm not entirely sure how to find the nearest disc in the fragment shader however. Perhaps these "paths" are split into different meshes, and only a subset of discs are passed to each mesh?

Another approach I'm thinking of is to use some sort of jump flood algorithm. This article ( https://bgolus.medium.com/the-quest-for-very-wide-outlines-ba82ed442cd9 ) has a reference to creating 2D SDFs using JFA. However, I notice that these techniques use full-screen effects, and I'm weary of that working on a mobile device.

Perhaps I'm way off base and there is another approach?

Thanks!

 

After looking at some more screenshots, I'm starting to think that they are forming a mesh around the stroke, and using barycentric coordinates to determine if a pixel is on the border or not...(somewhat akin to this article: https://catlikecoding.com/unity/tutorials/advanced-rendering/flat-and-wireframe-shading/)


Perhaps the mesh is constructed like this crude sketch I made?