| <!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> |
