Gradients and Patterns

In addition to plain colors, the SVGs can use gradients and patterns to fill shapes. This allows for great freedom when building graphic designs. Usually, these elements are created within the defs, although it is unnecessary to place them there.

We can use them for .fill() and .stroke() values with the gradient's and pattern's method .url(). This method return the element's unique id reference with the pseudo-function url().

Gradients

Linear Gradients

linearGradient changes color uniformly along a straight line based on each of the color points (stop) and the transition between them. By default, the gradient is from left to right; if you need another angle (for example, 45), you can use .gradientTransform(rotate(45)).

The stop element is defined with an .offset() than receive a percentage, and .stop_color () and .stop_opacity() for define the color reference for that point.

<div id="example1" style="text-align: center; width: 200px;"></div>
<script type="module">
  import gySVG from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';

  const svg      = gySVG ().viewBox (0, 0, 100, 100).width(200).height(200);
  const defs     = svg.add ('defs');
  const gradient = defs.add ('linearGradient').gradientTransform ('rotate(45)');
  gradient.add ('stop').offset ('5%').stop_color ('gold');
  gradient.add ('stop').offset ('95%').stop_color ('red');

  const circle = svg.add ('circle').cx (50).cy (50).r (50).fill (gradient.url ());
  svg.attachTo ('#example1');
  window.gySVG = gySVG;

</script>

<svg viewBox="0,0,100,100" width="200" height="200">
  <defs>
    <linearGradient gradientTransform="rotate(45)" id="gySVGObject74io2djkqjo">
      <stop offset="5%" stop-color="gold"></stop>
      <stop offset="95%" stop-color="red"></stop>
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="50" fill="url(#gySVGObject74io2djkqjo)"></circle>
</svg>

Radial Gradients

radialGradient is very similar to linearGradient, but in this case, the coordinates for the gradient are different, now is circular, from the center to the edge.

<div id="example2" style="text-align: center; width: 200px;"></div>
<script type="module">
  import gySVG from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';

  const svg      = gySVG ().viewBox (0, 0, 100, 100).width (200).height (200);
  const defs     = svg.add ('defs');
  const gradient = defs.add ('radialGradient');
  gradient.add ('stop').offset ('5%').stop_color ('gold');
  gradient.add ('stop').offset ('95%').stop_color ('red');

  const circle = svg.add ('circle').cx (50).cy (50).r (50).fill (gradient.url ());
  svg.attachTo ('#example2');
  window.gySVG = gySVG;
</script>

<svg viewBox="0,0,100,100" width="200" height="200">
  <defs>
    <radialGradient id="gySVGObjectbr7ijfp4igg">
      <stop offset="5%" stop-color="gold"></stop>
      <stop offset="95%" stop-color="red"></stop>
    </radialGradient>
  </defs>
  <circle cx="50" cy="50" r="50" fill="url(#gySVGObjectbr7ijfp4igg)"></circle>
</svg>

Patterns

pattern defines a graphics object which can be redrawn on intervals into the SVG. It has its own .viewBox() bound reference, and its size is defined by .width() and .height(). The behaviour of width and height depends on .patternUnits() configuration (by default is 'objectBoundingBox'), but we usually need to configure it as 'userSpaceOnUse'. With this configuration, height and width are references to the element's coordinate system that uses the pattern.

<div id="example3"></div>
<script type="module">
  import gySVG from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';

  const svg     = gySVG ().viewBox (0, 0, 100, 100).width (200).height (200);
  const defs    = svg.add ('defs');
  const pattern = defs.add ('pattern').viewBox(0,0,10,10)
    .patternUnits('userSpaceOnUse').width("5").height("5");
  pattern.add('circle').cx(5).cy(5).r(4).fill('none').stroke_width(1).stroke('red');

  const circle = svg.add ('circle').cx (50).cy (50).r (48)
      .fill (pattern.url ())
      .stroke('red').stroke_width(1);
  svg.attachTo ('#example3');
  window.gySVG = gySVG;
</script>

<svg viewBox="0,0,100,100" width="200" height="200">
  <defs>
    <pattern viewBox="0,0,10,10" patternUnits="userSpaceOnUse" width="5" height="5"
             id="gySVGObjectrlkvc7i9eq">
      <circle cx="5" cy="5" r="4" fill="none" stroke-width="1" stroke="red"></circle>
    </pattern>
  </defs>
  <circle cx="50" cy="50" r="48" fill="url(#gySVGObjectrlkvc7i9eq)" stroke="red"
          stroke-width="1"></circle>
</svg>