7. Advanced Topics: Gradients and Patterns

Beyond solid fills and strokes, SVG offers powerful ways to create rich visual textures using gradients and patterns. These advanced styling features allow for smooth color transitions and repeatable graphical fills, adding depth and sophistication to your designs. Gradients and patterns are typically defined within a <defs> section and then referenced by ID using the fill or stroke attribute.

7.1 Linear Gradients: <linearGradient>

A linear gradient transitions smoothly between two or more colors along a straight line.

Key Elements and Attributes:

• <linearGradient>: The container for a linear gradient definition.
  • id: A unique identifier to reference the gradient.
  • x1, y1, x2, y2: Define the gradient vector. These are coordinates within the gradient’s coordinate system (by default, 0 to 1 relative to the object bounding box, or user space if gradientUnits="userSpaceOnUse").
    • x1="0%" y1="0%" to x2="100%" y2="0%": Horizontal gradient (left to right).
    • x1="0%" y1="0%" to x2="0%" y2="100%": Vertical gradient (top to bottom).
  • gradientUnits: Determines the coordinate system for x1, y1, x2, y2.
    • objectBoundingBox (default): Relative to the bounding box of the element being painted (0 to 1).
    • userSpaceOnUse: Absolute coordinates within the current user coordinate system.
  • spreadMethod: How the gradient beyond its end points should be handled. pad (default), reflect, repeat.
  • gradientTransform: Apply a transformation to the gradient itself (like rotate, translate, scale).
• <stop>: Child elements of <linearGradient>, defining a color and its position along the gradient vector.
  • offset: A value from 0 to 1 (or 0% to 100%) indicating where the stop color begins.
  • stop-color: The color at this stop point.
  • stop-opacity: The opacity at this stop point.

Example: Horizontal Linear Gradient

<svg width="200" height="100" viewBox="0 0 200 100">
    <defs>
        <linearGradient id="horizontalGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="yellow" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>

    <rect x="0" y="0" width="200" height="100" fill="url(#horizontalGradient)" />
</svg>

Example: Vertical Linear Gradient with Transformation

<svg width="200" height="100" viewBox="0 0 200 100">
    <defs>
        <linearGradient
            id="verticalRotatedGradient"
            x1="0%"
            y1="0%"
            x2="0%"
            y2="100%"
            gradientTransform="rotate(45)"
        >
            <stop offset="0%" stop-color="#4CAF50" />
            <stop offset="100%" stop-color="#2196F3" />
        </linearGradient>
    </defs>

    <circle cx="100" cy="50" r="40" fill="url(#verticalRotatedGradient)" />
</svg>

7.2 Radial Gradients: <radialGradient>

A radial gradient transitions smoothly between colors emanating from a central point, spreading outwards in a circular or elliptical shape.

Key Elements and Attributes:

• <radialGradient>: The container for a radial gradient definition.
  • id: Unique identifier.
  • cx, cy: The x and y coordinates of the outermost circle’s center (the “focus” of the gradient).
  • r: The radius of the outermost circle.
  • fx, fy: The x and y coordinates of the gradient’s focal point (where the 0% offset color begins). Defaults to cx, cy. Moving this creates a “spotlight” effect.
  • gradientUnits, spreadMethod, gradientTransform: Same as for <linearGradient>.
• <stop>: Child elements of <radialGradient>, same as for linear gradients.

Example: Simple Radial Gradient

<svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="white" />
            <stop offset="50%" stop-color="purple" />
            <stop offset="100%" stop-color="black" />
        </radialGradient>
    </defs>

    <rect x="0" y="0" width="200" height="200" fill="url(#radialGradient)" />
</svg>

Example: Radial Gradient with Focus Shift

<svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <radialGradient id="spotlightGradient" cx="70%" cy="30%" r="80%" fx="50%" fy="50%">
            <stop offset="0%" stop-color="yellow" />
            <stop offset="60%" stop-color="orange" />
            <stop offset="100%" stop-color="red" />
        </radialGradient>
    </defs>

    <circle cx="100" cy="100" r="90" fill="url(#spotlightGradient)" />
</svg>

7.3 Patterns: <pattern>

The <pattern> element allows you to define a repeatable graphic that can be used to fill or stroke shapes. It’s like having a mini-SVG that gets tiled across your element.

Key Elements and Attributes:

• <pattern>: The container for the pattern definition.
  • id: Unique identifier.
  • x, y: The x and y coordinates of the top-left corner of the pattern tile within the pattern’s coordinate system.
  • width, height: The width and height of the pattern tile. These define the size of each repeat unit.
  • patternUnits: Determines the coordinate system for x, y, width, height.
    • userSpaceOnUse (default): Absolute coordinates.
    • objectBoundingBox: Relative to the bounding box of the element being painted (0 to 1).
  • patternContentUnits: Determines the coordinate system for content inside the pattern. userSpaceOnUse (default) or objectBoundingBox.
  • viewBox: (Optional) Defines a viewBox for the content inside the pattern, allowing it to scale independently within the pattern tile.
  • patternTransform: Apply transformations to the pattern’s tiling grid.
• Any SVG elements inside <pattern>: These elements define what the individual pattern tile looks like.

Example: Dot Pattern

<svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
        <pattern id="dotPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1" fill="gray" />
        </pattern>
    </defs>

    <rect x="10" y="10" width="100" height="80" fill="url(#dotPattern)" />
    <circle cx="180" cy="80" r="70" fill="url(#dotPattern)" />
</svg>

Example: Striped Pattern with Rotation

<svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
        <pattern
            id="stripedPattern"
            x="0"
            y="0"
            width="20"
            height="20"
            patternUnits="userSpaceOnUse"
            patternTransform="rotate(45)"
        >
            <rect x="0" y="0" width="10" height="20" fill="lightblue" />
            <rect x="10" y="0" width="10" height="20" fill="darkblue" />
        </pattern>
    </defs>

    <rect x="10" y="10" width="280" height="180" fill="url(#stripedPattern)" />
</svg>

Exercises/Mini-Challenges

1. Gradient Buttons:

   • Create three SVG rectangles that look like buttons.
   • Apply a linearGradient to the first, going from a light color to a darker shade of the same color.
   • Apply a radialGradient to the second, creating a subtle highlight effect in the center.
   • Make the third button change its gradient colors on hover using CSS transitions on the stop-color attributes (this requires defining CSS variables or animating the stop-color directly, often via JavaScript for older browsers, but modern CSS can handle it with @property). Start simpler if @property is too complex for now, just change fill to another gradient id.

2. Textured Backgrounds:

   • Define a <pattern> that creates a brick-like or honeycomb texture using rectangles or polygons.
   • Apply this pattern as the fill for a large SVG background element (e.g., a full-size rectangle).

3. Pie Chart with Gradients:

   • Using the arc command within a <path> (from the previous chapter) to create a segment of a pie chart.
   • Apply a unique linearGradient to each segment, making the chart visually appealing. You’ll need multiple <linearGradient> definitions.

4. Complex Pattern Icon:

   • Create a <pattern> that itself contains more than one simple shape (e.g., a small circle and a small square).
   • Apply this complex pattern to a larger SVG shape, like a large icon or a logo element.
   • Experiment with patternTransform to rotate or scale the entire pattern.

5. Reflecting Water (Bonus - spreadMethod):

   • Create a simple linear gradient.
   • Apply it to a long, narrow rectangle representing water.
   • Experiment with spreadMethod="reflect" or spreadMethod="repeat" to see how the gradient behaves when it extends beyond its defined vector, simulating a repeating water surface.