How to add a repeating-conic-gradient to a pattern

The easiest solution would be to make the body background background-attachment:fixed (on body{}) which I thought you were doing in the real page to avoid the background sliding up when there was overflow.

If that’s not the case then you will need ot match the pseudo element to the body background like this.

:root {
  --color-a: teal;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

html,body {margin:0;padding:0;}
html{height:100%;}
body{min-height:100%;}

body {
  background-size: 165px 165px;
  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
  position:relative;
}

body:before {
  content: "";
  position: absolute;
  /*background-size: 15px 13px;*/
  background-repeat: repeat;
  background-image: repeating-radial-gradient(
    0.00085px  0.00085px,
    rgba(20, 5, 25, 1),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.6) 29%
  );

  left: 0;
  right:0;
  top: 0;
  bottom:0;
}

However I think you will find that when content makes the page scroll the redraw will be a bit laggy with all that’s going on in there and the fixed background may be better.

You also need to test at wider screens as the black circle was appearing so try increasing the 9% as I have done in that example above.

Just play around with it until you find something that suits your purpose.

Back tomorrow now.

1 Like

What if I do it this way instead? https://jsfiddle.net/81tam5L7/

Am I able to do that?

:root {
  --color-a: teal;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

body {
    background-image: repeating-radial-gradient(0.00085px,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)),
      
     linear-gradient(var(--color-a) 5px, #0000 5px),
     linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

     linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
     linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
  
     linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
     linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
     
     linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
     linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
     
     linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
     linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),

     linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
     linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
 
     linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
     linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),

     linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
     linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),

     linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
     linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),

     linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
     linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),

     linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
     linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),

     linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
     linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),

     linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
     linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),

     linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
     linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),

     linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
     linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),

     linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
     linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),

     linear-gradient(var(--color-a), var(--color-a));
   background-size: 165px 165px;
 }

That doesn’t seem to work in Firefox and completely crashes Safari for some reason. It just makes Safari lock up!

1 Like

That’s weird.

I thought it would be fine, I never thought it would be an issue in other browsers.

It seemed like a better way because it was only adding 1 line of code.

Maybe the whole idea of adding a gradient over another gradient, is not a good idea.

There’s a bug in Safari documented here. The small angle is treated as zero so you would need to increase the number. Firefox 's problem is much the same and needs a larger number.

This (0.0085px) is about the smallest that satisfies Firefox and Safari.


body {
    background-image: repeating-radial-gradient(0.0085px,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)),

etc,,,,

Of course it doesn’t look as good as the smaller value does in Chrome.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.