Random point inside SVG <path>

Question

The problem is really simple to describe. I have a simple SVG closed shape, like this:

<path d="M435.95,147.99l0.33,0.49l-0.11,1.07l-0.39,0.04l-0.29,-0.15l0.21,-1.4l0.25,-0.05Z"></path>

I want to draw a point at random, somewhere inside this shape.

How to do that? I am hoping for a solution to be as simple as possible.

Answer 1

You could use getBBox to get the bounding box of the path and generate a random point in that range. Then use elementFromPoint with the random point to check that you really are over the shape.

If any elements cover the path then set them to pointer-events="none" so that they are ignored when you do this.