Create

Function

@linearGradient, @radialGradient

SVG linear and radial gradients written like CSS color stops, for fill or stroke inside @svg.

Syntax

  • @linearGradient([<transform>, ]<stop>, ...)
  • @radialGradient([<transform>, ]<stop>, ...)
transform
Optional. An angle — 45deg, .25turn, or a bare number in degrees — becomes rotate. Any SVG transform function is accepted too: rotate(30), scale(1.5), translate(50, 50). There is no CSS to right; the rotation is around the origin of the gradient.
stop
A color, optionally followed by an offset and an opacity: red, red 30%, red 30% .5. A stop without an offset sits at its place in the list, i / (n − 1), as if all stops were evenly spaced; offsets on other stops do not move it.

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

Examples

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);
  }
);
Open in playground

A gradient on stroke. rotate(a, .5, .5) turns it around the center of the shape, and @r gives each ring its own angle: 

@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
    );
  }
);
Open in playground

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. 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 }
  }
);
Open in playground

A last stop with an opacity of 0 fades each circle into a soft 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
    );
  }
);
Open in playground

translate moves the center of the radial gradient 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
    );
  }
);
Open in playground

See also