Skip to content

Temperature mode

Latest

Choose a tag to compare

@graphieros graphieros released this 19 Feb 18:40

Temperature Mode

  • Temperature mode sets the path gradient in the bounds of 2 extreme colors.
  • Available modes: null (default), "vertical", "horizontal"
Vertical Horizontal
image image

Usage:

const path = `
  M 50 250
  L 120 200
  L 200 230
  L 300 140
  L 380 260
  L 470 110
  L 560 190
  L 650 150
  L 740 240
  L 850 130
`;

const splineTemperatureVertical = SvgPathGradient(
  path,
  null, // colors array can be set to null when temperature mode is enabled
  {
    temperatureMode: 'vertical',
    temperatureColors: ['#00ff00', '#ff0000'],
    attrs: {
      'stroke-width': '12',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round'
    },
    groupAttrs: { id: 'spline-temperature-vertical' }
  }
);