Shader Story

Patterns & Shapes: Stripes

frac(), step(), and multiplicative masking are used here to generate a clean, tileable stripes pattern. Perfect for procedural scanlines, stylized grid overlays, or patterned transitions.

half2 uvTiled = frac(uv * tiling + offset);
half2 maskA = step(edge, uvTiled);
half2 maskB = step(edge, 1.0 - uvTiled);
half col_output = maskA.x * maskA.y * maskB.x * maskB.y;

---

Visual demo

This pattern uses fractional tiling of UVs to repeat a shape, then masks out the center of each tile using step() against both sides.

---

URP Shader Code

Shader "DecompiledArt/Patterns/Stripes/Stripes"
{
    Properties
    {
        _Tiling_XY_Offset_ZW("Tiling_XY_Offset_ZW", Vector) = (5.0, 5.0, 0.0, 0.0)
        _EdgeOffset("EdgeOffset", Range(0.0, 0.5)) = 0.15
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" "RenderPipeline" = "UniversalPipeline" }

        Pass
        {            
            ...
            

            half4 frag(Varyings IN) : SV_Target
            {
                half2 uvs = frac(IN.uvs * _Tiling_XY_Offset_ZW.xy + _Tiling_XY_Offset_ZW.zw);

                half2 a = step(_EdgeOffset, uvs);
                half2 b = step(_EdgeOffset, (1 - uvs));
                half col_output = a.x * a.y * b.x * b.y;

                return half4(col_output.xxx, 1.0);

            }

            ENDHLSL
        }
    }
}

URP Shader graph

---

🔗 Related Functions

Frac • Step

---

❤️ Support Shader Story

If this article helped you, consider supporting the project on Patreon - you'll get access to the related source files, reference cheat-sheets, and other exclusive resources:

Your support helps keep this library open, growing, and free for everyone.