red and white L-shaped gradient

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"> <!-- Step-by-Step Analysis 1) Overall composition: an abstract L-shape occupying the top and left edges. 2) Color behavior: a smooth gradient that starts pale white at the top-left corner and becomes vibrant red as it extends downward and to the right. 3) Shape construction: create an L by combining two rectangles (top bar + left bar), then subtracting the overlapping square so the corner isn't double-darkened. 4) Background: transparent everywhere else (especially bottom-right), so only the L is visible. --> <defs> <!-- Diagonal-ish gradient: white at top-left -> red toward bottom-right --> <linearGradient id="lGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="35%" stop-color="#ffe6e6" stop-opacity="1"/> <stop offset="70%" stop-color="#ff6b6b" stop-opacity="1"/> <stop offset="100%" stop-color="#e00000" stop-opacity="1"/> </linearGradient> <!-- Mask to create a clean L-shape: - Start with full transparent - Paint the L region as opaque - Remove the overlap square to avoid double intensity at the corner --> <mask id="lMask"> <rect width="800" height="800" fill="black"/> <!-- L components --> <rect x="0" y="0" width="800" height="220" fill="white"/> <rect x="0" y="0" width="220" height="800" fill="white"/> <!-- Remove overlap (top-left square) so it's not "double painted" --> <rect x="0" y="0" width="220" height="220" fill="black"/> <!-- Add back a single corner square for uniform coverage --> <rect x="0" y="0" width="220" height="220" fill="white"/> </mask> </defs> <!-- Paint a full gradient field, then mask it into an L. Everything outside the L remains transparent. --> <rect x="0" y="0" width="800" height="800" fill="url(#lGrad)" mask="url(#lMask)"/> </svg>