JSFiddle - React, Tailwind, and code Playground

by roshan100kar

HTML

<body>
<div class="demo"></div>
</body>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.demo{
height: 200px;
width: 200px;
border: 1px solid grey;
margin: 20px auto;
border-radius: 50%;
}

JavaScript

let demo, arr, i;
arr = [];

demo = document.querySelector(".demo");

for(i = 0; i<=360; i++) {
    arr.push(`hsl(${i}, 100%, 50%)`);

}
arr = arr.toString();

demo.style.backgroundImage = `conic-gradient(${arr})`;