maplibre/mapbox gl animated glsl shader at specific map coordinates using javascript

I have these two glsl shader examples:
https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-visuals/
and
https://www.shadertoy.com/view/3djSDD, the first one actually being on an arcgis map and the second just being a link to another “ping” on the shadertoy website.

I am trying to take the glsl shader from either of these and implement it into my own maplibre map (which is different from the arcgis example).

I am currently able to use a very basic glsl shader which draws a triangle at specific coordinates but I’m a complete GLSL novice and don’t know exactly how to adjust the glsl and javascript code to make it work.

Here’s what I have (locally) that draws the square:
https://maplibre.org/maplibre-gl-js-docs/example/custom-style-layer/

I should be able to simply draw the “ping” glsl shader at a location like:

lng: 25.004,
lat: 60.239

… but I’m not sure how to modify the array buffer(s) to make it actually draw the “ping”