Replicating fence X svg pattern as a gradient

asasass · December 3, 2021, 5:18pm

svg fence x
width: 10px;
height: 10px;

To do this, all that is needed here is to create the x pattern shape made up of 16 tiny 1px squares and a bigger one 2px in the middle.

https://jsfiddle.net/9af7vk06/

Blown up in size it looks like this.

The gradient would be made of the darker shaded square spots.

Here is the Fence pattern: I want to make using a gradient replicating the svg.

https://jsfiddle.net/ef46pxbz/1/

body {
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path stroke="rgb(113, 121, 126)" d="m10 .15-4.85 4.85 4.85 4.85v.15h-.13l-4.86-4.86-4.86 4.86h-.15v-.14l4.87-4.86-4.87-4.87v-.13h.15l4.86 4.86 4.85-4.86h.14z"/></svg>');
}

PaulOB · December 3, 2021, 6:12pm

Is this close enough?

The top one is the linear gradient and the bottom one is your svg.

asasass · December 3, 2021, 6:27pm

Can the color that is not white or gray be made transparent?

PaulOB · December 3, 2021, 6:44pm

It is transparent. I think that’s just the way the browser anti aliases the diagonal line otherwise it wouldn’t look smooth.

The svg is exactly the same.

I think this is one of the rare occasions where you can use fractions of a pixel.

e.g.

.test1 {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      transparent 7.5px,
      transparent 10px
    ),
    linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      transparent 7.5px,
      transparent 10px
    );
  background-size: 10px 10px;
}

asasass · December 3, 2021, 6:53pm

With the svg, I am not able to see through the gray.

Why is part, or, all of the fence transparent?

Why am I able to see through the gray?

https://jsfiddle.net/brzt230o/

PaulOB · December 3, 2021, 7:10pm

Try adjusting the pixel measurements.

e.g.

  background-image: 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
    );

That gives me this:

I’m sure that’s close enough.

asasass · December 3, 2021, 9:36pm

How do I adjust the code, there’s supposed to be 4 1px squares, not 3?

I think never mind.

When there is only 1 X there are 4 1px squares, when they multiply, then only 3 are visible.

I’m right.

PaulOB · December 3, 2021, 11:29pm

Obviously when you repeat the pattern the pattern repeats at each edge so you get the adjacent pixels touching.

You got exactly what you asked for.

If you want a seamless join then you’d have to leave off the last right pixels and the bottom pixels. Effectively 9 x 9 instead of 10 x 10.

The repeating part of the gradient should not be wholly symmetrical otherwise you get a double pixel each time it repeats.

That should have been blatantly obvious before you started so I assumed that’s what you wanted.

asasass · December 3, 2021, 11:37pm

Now I want to see what a seamless join looks like.

leave off the last right pixels and the bottom pixels.

Which are which? https://jsfiddle.net/2kjxpwr8/1/

I can create a .test3 in there.

  background-image: 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
    );

PaulOB · December 4, 2021, 12:42am

Have a look at repeating linear gradients instead.

Here’s a start.

I’m offline now until tomorrow.

PaulOB · December 4, 2021, 10:06am

I don’t think you can get perfect lines at 45 degrees. This is close but still some double pixels.

Looks perfect on a phone.

asasass · December 4, 2021, 11:17am

Is this one able to use a repeating gradient instead?

Would there be that same issue with this one?

.test {
  width: 100px;
  height: 100px;
  background-image: 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;
}

asasass · December 4, 2021, 11:52am

Is it more than just changing linear-gradient to repeating?

There is no difference in how the code is written?

background-image: repeating-linear-gradient(

.test3 {
  width: 100px;
  height: 100px;
  background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    ),
    repeating-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;
}

PaulOB · December 4, 2021, 12:52pm

Yes, the repeating gradient doesn’t use background-size as that breaks the repeating pattern. The last color/position specified is used as the repeat. If you use background-size then you get the edge pixels repeated as they butt together.

You can read the details on repeating linear gradients here:

However I believe I have already given you as close as you can get. Browsers can’y seem to handle 45 degree lines efficiently without some sort of anti aliasing.

I think number 1 here is as close as you can get so that no one in the world will notice. If you are going to magnify it a 1000 times then expect it to look odd.

https://codepen.io/paulobrien/pen/gOGagLg

PaulOB · December 4, 2021, 1:54pm

To see what I mean look at the first item here that is made as square boxes so there is no pixellation but once you rotate them the pixels are anti aliased and moved around.

asasass · December 4, 2021, 3:38pm

How would I change the color of the intersecting squares in the middle?

https://jsfiddle.net/vexf0pn1/

.test {
  width: 100px;
  height: 100px;
  background-image: 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;
}

PaulOB · December 4, 2021, 4:26pm

I can’t make it square in the middle but I can make it round.

asasass · December 4, 2021, 4:49pm

To change the color in the middle it needs to be a circle?

PaulOB · December 4, 2021, 5:02pm

I can’t find a way to do it yet but there probably is a method.

It’s almost impossible to tell if its a circle or a square anyway at that size.

asasass · December 4, 2021, 5:03pm

What about using a conic-gradient? https://jsfiddle.net/j4ntv0y2/

Would that work?

Not that exact thing, but something like it.

It creates a square.

body {
  background: conic-gradient(at 85px 85px, #3f48cc 0deg 90deg, #f00 90deg 180deg, #ff0 180deg 270deg, #99D9EA 270deg 360deg);
  background-size: 165px 165px;
}