2

I want to draw the circle behind the star on the image using HTML/CSS.

Tree

First I created a Js function to generate code for CSS:

function setCircle(){
  var a = "";
  for(var i = 0; i < 360; i += 5){
    a += "linear-gradient( " + i + "deg, "+ (i % 10 == 0 && i != 0 ? "green" : "lightgreen") +" 50%, transparent 50% ), ";
  }
  a += "linear-gradient( 355deg, green 50%, transparent 50% );";
  document.write(a);
}
function start(){
  setCircle();
}
start();

Every gradient is half green or lightgreen and half transparent.
Then, I put this into styles.

.star_back{
    background: linear-gradient( 0deg, lightgreen 50%, transparent 50% ), linear-gradient( 5deg, lightgreen 50%, transparent 50% ), linear-gradient( 10deg, green 50%, transparent 50% ), linear-gradient( 15deg, lightgreen 50%, transparent 50% ), linear-gradient( 20deg, green 50%, transparent 50% ), linear-gradient( 25deg, lightgreen 50%, transparent 50% ), linear-gradient( 30deg, green 50%, transparent 50% ), linear-gradient( 35deg, lightgreen 50%, transparent 50% ), linear-gradient( 40deg, green 50%, transparent 50% ), linear-gradient( 45deg, lightgreen 50%, transparent 50% ), linear-gradient( 50deg, green 50%, transparent 50% ), linear-gradient( 55deg, lightgreen 50%, transparent 50% ), linear-gradient( 60deg, green 50%, transparent 50% ), linear-gradient( 65deg, lightgreen 50%, transparent 50% ), linear-gradient( 70deg, green 50%, transparent 50% ), linear-gradient( 75deg, lightgreen 50%, transparent 50% ), linear-gradient( 80deg, green 50%, transparent 50% ), linear-gradient( 85deg, lightgreen 50%, transparent 50% ), linear-gradient( 90deg, green 50%, transparent 50% ), linear-gradient( 95deg, lightgreen 50%, transparent 50% ), linear-gradient( 100deg, green 50%, transparent 50% ), linear-gradient( 105deg, lightgreen 50%, transparent 50% ), linear-gradient( 110deg, green 50%, transparent 50% ), linear-gradient( 115deg, lightgreen 50%, transparent 50% ), linear-gradient( 120deg, green 50%, transparent 50% ), linear-gradient( 125deg, lightgreen 50%, transparent 50% ), linear-gradient( 130deg, green 50%, transparent 50% ), linear-gradient( 135deg, lightgreen 50%, transparent 50% ), linear-gradient( 140deg, green 50%, transparent 50% ), linear-gradient( 145deg, lightgreen 50%, transparent 50% ), linear-gradient( 150deg, green 50%, transparent 50% ), linear-gradient( 155deg, lightgreen 50%, transparent 50% ), linear-gradient( 160deg, green 50%, transparent 50% ), linear-gradient( 165deg, lightgreen 50%, transparent 50% ), linear-gradient( 170deg, green 50%, transparent 50% ), linear-gradient( 175deg, lightgreen 50%, transparent 50% ), linear-gradient( 180deg, green 50%, transparent 50% ), linear-gradient( 185deg, lightgreen 50%, transparent 50% ), linear-gradient( 190deg, green 50%, transparent 50% ), linear-gradient( 195deg, lightgreen 50%, transparent 50% ), linear-gradient( 200deg, green 50%, transparent 50% ), linear-gradient( 205deg, lightgreen 50%, transparent 50% ), linear-gradient( 210deg, green 50%, transparent 50% ), linear-gradient( 215deg, lightgreen 50%, transparent 50% ), linear-gradient( 220deg, green 50%, transparent 50% ), linear-gradient( 225deg, lightgreen 50%, transparent 50% ), linear-gradient( 230deg, green 50%, transparent 50% ), linear-gradient( 235deg, lightgreen 50%, transparent 50% ), linear-gradient( 240deg, green 50%, transparent 50% ), linear-gradient( 245deg, lightgreen 50%, transparent 50% ), linear-gradient( 250deg, green 50%, transparent 50% ), linear-gradient( 255deg, lightgreen 50%, transparent 50% ), linear-gradient( 260deg, green 50%, transparent 50% ), linear-gradient( 265deg, lightgreen 50%, transparent 50% ), linear-gradient( 270deg, green 50%, transparent 50% ), linear-gradient( 275deg, lightgreen 50%, transparent 50% ), linear-gradient( 280deg, green 50%, transparent 50% ), linear-gradient( 285deg, lightgreen 50%, transparent 50% ), linear-gradient( 290deg, green 50%, transparent 50% ), linear-gradient( 295deg, lightgreen 50%, transparent 50% ), linear-gradient( 300deg, green 50%, transparent 50% ), linear-gradient( 305deg, lightgreen 50%, transparent 50% ), linear-gradient( 310deg, green 50%, transparent 50% ), linear-gradient( 315deg, lightgreen 50%, transparent 50% ), linear-gradient( 320deg, green 50%, transparent 50% ), linear-gradient( 325deg, lightgreen 50%, transparent 50% ), linear-gradient( 330deg, green 50%, transparent 50% ), linear-gradient( 335deg, lightgreen 50%, transparent 50% ), linear-gradient( 340deg, green 50%, transparent 50% ), linear-gradient( 345deg, lightgreen 50%, transparent 50% ), linear-gradient( 350deg, green 50%, transparent 50% ), linear-gradient( 355deg, lightgreen 50%, transparent 50% ), linear-gradient( 355deg, green 50%, transparent 50% );
    border-radius: 50%;
    margin: 0 auto;
    width: 300px; height: 300px;
}
<div class="star_back"></div>

And here I stopped. The problem is that my gradients can draw only half of the circle, because every new covers another. How can I change it, so it can work? If I can't do this with gradients, then what the easiest way?

Ver Nick
  • 253
  • 8
  • 19

0 Answers0