@linearGradient, @radialGradient

Syntax

• @linearGradient([<transform>, ]<stop>, ...)
• @radialGradient([<transform>, ]<stop>, ...)

The result is a linearGradient { … } or radialGradient { … } block, which @svg places in <defs> and references by a generated id. Write that block yourself when you need extra attributes such as gradientUnits.

Angle

An angle first, such as 45deg, .25turn or a bare number in degrees, rotates the gradient. There is no CSS to right. The same angle on both shapes, with the stops reversed, makes each circle look cut into its tile:

@grid: 6 / 60vmin;
background: @svg(
  viewBox: 10;
  rect {
    width, height: 10;
    fill: @linearGradient(45deg, #000, #e6437d, #ebbf4d);
  }
  circle {
    cx, cy: 5;
    r: @r(1.5, 4);
    fill: @linearGradient(45deg, #ebbf4d, #e6437d, #000);
  }
);

Transforms

An SVG transform such as rotate(30), scale(1.5) or translate(.1, .1) works in the same place. The angle turns the gradient around the top-left corner of the shape, so rotate(a, .5, .5) turns it around the center:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: -5 -5 10 10;
  fill: none;
  stroke-width: .25;
  stroke-linecap: round;
  circle*12 {
    r: @n(*.38);
    stroke-dasharray: @r(2, 10) @r(1, 4);
    stroke: @linearGradient(
      rotate(@r(360), .5, .5),
      #000, #e6437d, #ebbf4d
    );
  }
);

translate moves the center of a radial gradient, here up and left like a light on a sphere:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 100;
  circle*40 {
    cx: @r(100);
    cy: @r(100);
    r: @r(3, 12);
    fill: @radialGradient(
      translate(-.2, -.2),
      #fff, @p(#e6437d, #ebbf4d) 40%, #000
    );
  }
);

Stops

A stop is a color, then an optional offset and opacity: red 30% .5. A stop without an offset sits at its place in the list, as if all stops were evenly spaced. A last stop at opacity 0 fades each circle into a glow:

@grid: 1 / 60vmin;
background: #000 @svg(
  viewBox: 100;
  circle*60 {
    cx: @r(100);
    cy: @r(100);
    r: @r(4, 20);
    fill: @radialGradient(
      @p(#e6437d, #ebbf4d, #fff),
      #000 100% 0
    );
  }
);

Stops that rise to the middle of the ring and fall again shade it like a tube, and the first stop, at opacity 0, leaves the center empty. A fill on g fits the gradient to each circle, and every tile turns by 0° or 90°, so the arcs join up:

@grid: 6 / 60vmin;
background: @svg(
  viewBox: 10;
  g {
    transform: rotate(@p(0, 90) 5 5);
    fill: @radialGradient(
      #000 43% 0, #000 43%, #e6437d 57%,
      #ebbf4d 71%, #e6437d 86%, #000
    );
    circle { r: 7 }
    circle { cx, cy: 10; r: 7 }
  }
);

One argument that holds a comma list, such as $colors after --colors: #000, #e6437d, #ebbf4d, is split into stops.

See also

• @svg
• @stripe