Small example that uses a WebGl to render many points and lines.
Basically it uses the OL default shaders for this but adapts the one for points to use a SDF to look like a point instead of a rectangle. This technique can also be used to make the lines look like arrows.
npm install
npm run serveThe chapter Algorithmic Drawing is of interest.
Functions for constructing various 2d shapes.
https://iquilezles.org/articles/distfunctions2d/
MDN Best Practices, contains tips to ensure compatability across devices.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices