Conic gradient

The registerPaint() draw a conical gradient using the Lea Verou’s polyfill from the worklet. We are using colors from the arguments’ paint() function

For progressive enhancement, we also use speced conic-gradient() from CSS, and use Lea Verou’s polyfill from the client.

.el {
  background: conic-gradient(red, magenta, blue, cyan, lime, yellow, red);
}
@supports (background: paint(id, foo)) {
  .el.is-loaded {
    background: paint(conic-gradient, red magenta blue cyan lime yellow red);
  }
}

// Lea Verou polyfill
var gradient = new ConicGradient({
  stops: "red, magenta, blue, cyan, lime, yellow, red"
});

if (!CSS.supports('background', 'paint(id, foo)')) {
  el.style.background = 'url(' + gradient.dataURL + ')'
}