Help to generate diagonal procedural patterns for UI

Hello there!

For my immediate UI library, I want to implement procedural backgrounds, but I'm having trouble with diagonal patterns. My goal is to achieve the example image shown here. If the lines arent diagonal, the solution is really just a signed distance line combined with tiling. However, when I have slanted (or diagonal) lines, I just cant figure out how to make them repeat and have rounded edges. My current attempt is just a diagonal gradient, but I'm missing the rounded lines and the nice edge alignment so they dont get just cut off: // float spacing = ... float diagonal = uv.x + uv.y; float lines = frac(diagonal / spacing); float distFromLineCenter = abs(lines - 0.5);

Does anyone recognize this pattern or can help me out? Thanks.