It turns out that SVG has a built-in mechanism to build repeating patterns that virtually cost nothing performance-wise, and it is awesome. Check it out:
1
In both JavaScript and Rust (considering GPUI), a common approach would be to use an array and map/iterate over it to draw an arbitrary number of icons until the design looks good. While this is certainly a valid way to go, it has the obvious performance drawback of adding a large number of repeated elements to the render/DOM.
SVG, however, has this functionality just there, built-in through the pattern tag. This tag can be passed as a URL in the fill attribute of the <rect> container, providing a much simpler solution.
And if you combine that with a mask and linear gradient, you can create a super common fading-off pattern effect, without probably sacrificing virtually nothing in performance.
1
Huge thanks to Agus for showing me this!