css-doodle

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. Stops without offsets are spread evenly.

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

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 10;
  circle {
    cx, cy, r: 5;
    fill: @linearGradient(45deg, #000, #e6437d);
  }
);
Open in playground

An offset and an opacity on a stop:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 10;
  rect { width, height: 10; fill: #ebbf4d }
  rect {
    width, height: 10;
    fill: @linearGradient(#000 0% 0, #000);
  }
);
Open in playground

A radial gradient, with a few explicit offsets:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 10;
  circle {
    cx, cy, r: 5;
    fill: @radialGradient(#fff, #ebbf4d 30%, #e6437d 65%, #000);
  }
);
Open in playground

See also