Creating a static website utilizing React.
Description
I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below.
visual effect
The goal is to design a rectangular background with triangles cut out from it (ensuring at least two vertices of the triangle lie on the edge before cutting), creating a pattern like the shaded area in the image.
These cut-out triangles should then float randomly around the page.
In addition, I want the content section in the middle, also a rectangle, to remain intact without any cuts (only the outer padding should be affected).
Existing Efforts
I have experimented with generating the vertex coordinates for the polygons post-cutting and the triangles, then styling them using css clip-path and animation. However, developing a practical algorithm for vertex generation has proven challenging.