Randomizing Conic Gradients with Javascript

October 28, 2022

I want to make a conic gradient that randomizes its values each time the page is reloaded, but nothing is happening. It just keeps the same original value.

No clue why, there are not even any error messages either.

Code Below:

function homePageStatsBarRandomTip() {

  var homePageStatsOneCircle = document.getElementById('homePageStatsOneCircle')

  let homePageStatsOneCircleRandom = Math.floor((Math.random() * 330) + 1)

  homePageStatsOneCircle.style.backgroundImage = 'conic-gradient(#7978FF 0deg, #7978FF ' + homePageStatsOneCircleRandom + 'deg, #d9d9d9' + homePageStatsOneCircleRandom + '270deg);'


}

.home-page-stats-circle-hole {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #fff;
}

.home-page-stats-one-circle {
  width: 172px;
  height: 172px;
  background-image: conic-gradient(#7978FF 0deg, #7978FF 270deg, #d9d9d9 270deg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<body onload="homePageStatsBarRandomTip()">
  <div class="home-page-stats-one home-page-stats-inners">
    <div class="home-page-stats-one-circle" id="homePageStatsOneCircle">
      <div class="home-page-stats-circle-hole"></div>
    </div>
  </div>
</body>

>Solution :

You were concatenating them incorrectly – the random degrees was being smushed up against the color, and you forgot to remove the default 270 degrees:

function homePageStatsBarRandomTip() {
    var homePageStatsOneCircle = document.getElementById('homePageStatsOneCircle')
    let homePageStatsOneCircleRandom = Math.floor((Math.random() * 330) + 1)
    homePageStatsOneCircle.style.backgroundImage = 'conic-gradient(#7978FF 0deg, #7978FF ' + homePageStatsOneCircleRandom + 'deg, #d9d9d9 ' +
        homePageStatsOneCircleRandom + 'deg)';
}

.home-page-stats-circle-hole {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #fff;
}

.home-page-stats-one-circle {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<body onload="homePageStatsBarRandomTip()">
  <div class="home-page-stats-one home-page-stats-inners">
    <div class="home-page-stats-one-circle" id="homePageStatsOneCircle">
      <div class="home-page-stats-circle-hole"></div>
    </div>
  </div>
</body>