Replicating fence X svg pattern as a gradient

[asasass]

I’m confused, radial-gradient

But these are red squares, not circles.

Why did you say round for?

I don’t see anything round.

[PaulOB]

@asasass

Why did you say round for?

They are round if you increase their size but at the small size a circle is square as you can’t make a circle out of 1 square pixel (or 4 square pixels). You need enough size to offset the pixels to make it look round and then anti alias the edges. You can see it better in someone else’s pen here.

At the small size it still looked circular to me but as you say if you increase the image size in a paint package you can see its square at that size. That’s why I think you make too much fuss about these things as no one can see the difference anyway.

That seems to be exactly what you asked for

[PaulOB]

And just to confirm that on a device with enough resolution the dots will be circles.

Here’s it zoomed on my phone.

[asasass]

Zooming in inside chrome I see circles now.

I was zooming in outside of my browser before.

I saved a screenshot image of it, then I zoomed in on it outside of my browser.

Maybe that is why I was seeing a square and not a circle.

[PaulOB]

@asasass

Zooming in inside chrome I see circles now.

Zooming in the browser is not the same as enlarging an image in a paint package.

When you zoom in the browser you get a re-render of the layout at a larger size. That means you are not getting a larger copy of what it looked like at a smaller size. At the smaller size the red is indeed a square (except on double density devices) but when you zoom in the browser there are more pixels available for the circle to be rendered as a circle. Its the same as if you had created the gradient at a larger size.

That’s why zoom breaks layouts in some cases because it is not simply an enlarged version but a complete re-render of the layout at the larger size. It is not a means to see the previous pixels at a larger size.

Your paint package gives the true rendering of the screen when you enlarge in the paint package.

[asasass]

This was an attempt at using a conic-gradient: https://jsfiddle.net/y43uqgfr/

Can that be fixed?

.test {
  width: 100px;
  height: 100px;
  background-image: conic-gradient(red 90deg, transparent 90deg 270deg),
  linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 0 0, -5px -5px, 0 0, 0 0;
}

[PaulOB]

This seems to achieve the effect but seems a bit long-winded.

.test {
  width: 100px;
  height: 100px;
  background-image: 
  conic-gradient(red 9deg, transparent 0 180deg),
  conic-gradient(red 9deg, transparent 0 180deg),
  conic-gradient(red 9deg, transparent 0 180deg),
  conic-gradient(red 9deg, transparent 0 180deg),
  linear-gradient(45deg,
  
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 44px -11px,15px -11px, 20px -6px,9px -6px, -5px -5px, 0 0, 0 0;
}

[asasass]

This css stripe generator is good at making different repeating-linear-gradient cross patterns.

CSS STRIPE GENERATOR