conic-gradient-positioning.html | Explore in Territory

<!DOCTYPE html>

<style>
div {
  width: 78px;
  height: 78px;
  border: 1px solid grey;
  display: inline-block;
  margin: 2px;
}
</style>

<body>
<script>
  function appendConicGradient(pos) {
    var div = document.createElement('div');

    div.setAttribute('style', 'background: conic-gradient(' + pos + ', red, yellow, lime, aqua, blue, magenta, red)');
    document.body.appendChild(div);
  }

  var pos = [ '25%', 'center', '75%' ];
  var rot = [ '0', '20deg', '40deg', '60deg', '80deg' ];

  rot.forEach(function(r) {
    pos.forEach(function(x) {
      pos.forEach(function(y) {
        appendConicGradient('from ' + r + ' at ' + x + ' ' + y);
      });
    });
    document.body.appendChild(document.createElement('br'));
  });
  
</script>
</body>

chromium/third_party/blink/web_tests/fast/gradients/conic-gradient-positioning.html