5

Am I able to have this linear-gradient pattern be reduced in size further than what I was able to achieve?

Is it possible to do?

In my 1st example, the code is really long, in my 2nd example I was able to make the code smaller/shorter.

I wanted to know if it can be made shorter/smaller than what I was able to do.

All I am doing, or trying to do is reduce the number of lines there are in the css linear-gradient pattern code.

In your answer you can provide examples of how either 1 or both of my 2 code examples can be made shorter.

Or, if you have an idea on how to recreate the same pattern a different way using a different method using css gradient.

enter image description here

Code 1 https://jsfiddle.net/t1n3jh0d/

     body {
       background-image:
         linear-gradient(to bottom, teal 5px, #0000 5px),
         linear-gradient(to right, teal 5px, #0000 5px),
    
         linear-gradient(to bottom, black 10px, #0000 10px),
         linear-gradient(to left, black 5px, #0000 5px),
         linear-gradient(to top, black 5px, #0000 5px),
         linear-gradient(to right, black 10px, #0000 10px),
    
         linear-gradient(to bottom, orange 15px, #0000 15px),
         linear-gradient(to left, orange 10px, #0000 10px),
         linear-gradient(to top, orange 10px, #0000 10px),
         linear-gradient(to right, orange 15px, #0000 15px),
    
         linear-gradient(to bottom, black 20px, #0000 20px),
         linear-gradient(to left, black 15px, #0000 15px),
         linear-gradient(to top, black 15px, #0000 15px),
         linear-gradient(to right, black 20px, #0000 20px),
    
         linear-gradient(to bottom, teal 25px, #0000 25px),
         linear-gradient(to left, teal 20px, #0000 20px),
         linear-gradient(to top, teal 20px, #0000 20px),
         linear-gradient(to right, teal 25px, #0000 25px),
    
         linear-gradient(to bottom, black 30px, #0000 30px),
         linear-gradient(to left, black 25px, #0000 25px),
         linear-gradient(to top, black 25px, #0000 25px),
         linear-gradient(to right, black 30px, #0000 30px),
    
         linear-gradient(to bottom, orange 35px, #0000 35px),
         linear-gradient(to left, orange 30px, #0000 30px),
         linear-gradient(to top, orange 30px, #0000 30px),
         linear-gradient(to right, orange 35px, #0000 35px),
    
         linear-gradient(to bottom, black 40px, #0000 40px),
         linear-gradient(to left, black 35px, #0000 35px),
         linear-gradient(to top, black 35px, #0000 35px),
         linear-gradient(to right, black 40px, #0000 40px),
    
         linear-gradient(to bottom, teal 45px, #0000 45px),
         linear-gradient(to left, teal 40px, #0000 40px),
         linear-gradient(to top, teal 40px, #0000 40px),
         linear-gradient(to right, teal 45px, #0000 45px),
    
         linear-gradient(to bottom, black 50px, #0000 50px),
         linear-gradient(to left, black 45px, #0000 45px),
         linear-gradient(to top, black 45px, #0000 45px),
         linear-gradient(to right, black 50px, #0000 50px),
    
         linear-gradient(to bottom, orange 55px, #0000 55px),
         linear-gradient(to left, orange 50px, #0000 50px),
         linear-gradient(to top, orange 50px, #0000 50px),
         linear-gradient(to right, orange 55px, #0000 55px),
    
         linear-gradient(to bottom, black 60px, #0000 60px),
         linear-gradient(to left, black 55px, #0000 55px),
         linear-gradient(to top, black 55px, #0000 55px),
         linear-gradient(to right, black 60px, #0000 60px),
    
         linear-gradient(to bottom, teal 65px, #0000 65px),
         linear-gradient(to left, teal 60px, #0000 60px),
         linear-gradient(to top, teal 60px, #0000 60px),
         linear-gradient(to right, teal 65px, #0000 65px),
    
         linear-gradient(to bottom, black 70px, #0000 70px),
         linear-gradient(to left, black 65px, #0000 65px),
         linear-gradient(to top, black 65px, #0000 65px),
         linear-gradient(to right, black 70px, #0000 70px),
    
         linear-gradient(to bottom, orange 75px, #0000 75px),
         linear-gradient(to left, orange 70px, #0000 70px),
         linear-gradient(to top, orange 70px, #0000 70px),
         linear-gradient(to right, orange 75px, #0000 75px),
    
         linear-gradient(to bottom, black 80px, #0000 80px),
         linear-gradient(to left, black 75px, #0000 75px),
         linear-gradient(to top, black 75px, #0000 75px),
         linear-gradient(to right, black 80px, #0000 80px),
    
         linear-gradient(to bottom, teal 85px, #0000 85px),
         linear-gradient(to left, teal 85px, #0000 85px);
       background-size: 165px 165px;
     }

Code 2 https://jsfiddle.net/koqy9hp0/

    body {
       background-image:
         linear-gradient(teal 5px, #0000 5px),
         linear-gradient(90deg, teal 5px, #0000 5px),
    
         linear-gradient(black 10px, #0000 10px 160px, black 160px),
         linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
      
         linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
         linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
         
         linear-gradient(black 20px, #0000 20px 150px, black 150px),
         linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
         
         linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
         linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    
         linear-gradient(black 30px, #0000 30px 140px, black 140px),
         linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
     
         linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
         linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    
         linear-gradient(black 40px, #0000 40px 130px, black 130px),
         linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    
         linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
         linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    
         linear-gradient(black 50px, #0000 50px 120px, black 120px),
         linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    
         linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
         linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    
         linear-gradient(black 60px, #0000 60px 110px, black 110px),
         linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    
         linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
         linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    
         linear-gradient(black 70px, #0000 70px 100px, black 100px),
         linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    
         linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
         linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    
         linear-gradient(black 80px, #0000 80px 90px, black 90px),
         linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    
         linear-gradient(teal, teal);
       background-size: 165px 165px;
     }
jaco0646
  • 15,303
  • 7
  • 59
  • 83
  • Is it about the size send to the client, or about maintainability? – t.niese Oct 09 '21 at 11:53
  • I want to keep using linear-gradient, but I'm trying to have it use less code is what I am trying to do. –  Oct 09 '21 at 11:58
  • That does not answer my question. Do you want to have less code send to the client to save bandwidth? Or do you want to have less code in your file so that it is easier to maintain? – t.niese Oct 09 '21 at 11:59
  • 2
    Easier to maintain. –  Oct 09 '21 at 12:24
  • For maintainability you might want to have everything as a variable - colors/dimensions. However that leads to even nastier looking CSS although simpler to change. How about a bit of Javascript to create the CSS? would be easier to maintain and just a few lines. – A Haworth Oct 09 '21 at 13:01
  • Less code to send to the client to save bandwidth, maybe that is what I am trying to do. All I am doing is making the code smaller in size using a css linear-gradient. –  Oct 09 '21 at 13:18
  • 3
    You aren't sending much in the way of code in these linear-gradients - nothing compared to even a small image say - however it is messy to maintain or make any slight change like the width of a band or if you decided you wanted it to not be of fixed width. Is JS an option or not? – A Haworth Oct 09 '21 at 13:28
  • If it is about `Easier to maintain` you might want to check if utilizing something like SASS might help you there. `Less code to send to the client to save bandwidth, maybe that is what I am trying to do. All I am doing is making the code smaller in size using a css linear-gradient.` well you need to know what the purpose of making the code smaller is. – t.niese Oct 09 '21 at 13:29
  • 2
    All I am doing, or trying to do is reduce the number of lines there are in the css linear-gradient code. –  Oct 09 '21 at 13:33
  • You can use SASS to reduce the number of lines in **your** code making it easier to maintain. But after you run SASS on that file it generates the CSS file that you will send to the client, and that one will have the same amount of lines as you have now (which might be ok depending on what you want to achieve). That's why I ask that question. – t.niese Oct 09 '21 at 13:36
  • 2
    I am just trying to reduce the number of lines there are inside either of the 2 jsfiddle code examples I provided. –  Oct 09 '21 at 14:31
  • Is there a reason that you want to continue to make it smaller? Consider using responsive measurements instead of px to define the size of the gradient. – Carlitos Oct 09 '21 at 12:01
  • 2
    How come I am able to find numerous css gradient pattern codes that use way less amount of lines than my code has? –  Oct 11 '21 at 01:34
  • Sorry, does it have to be css? – mm4096 Oct 12 '21 at 02:54
  • Yes, it has to be css. –  Oct 12 '21 at 03:09
  • What about saving this pattern as an image, then use it as background repeated x and y. So it can be solved using one line :) – Waleed Jubeh Oct 13 '21 at 10:01
  • css gradient pattern only. –  Oct 13 '21 at 17:49
  • What is the reason you need it to be CSS and specifically linear-gradient? Or is this just a puzzle for the community to solve with your own rules without any real-world application? – Stan Oct 16 '21 at 12:03
  • 2
    If you have an answer, you can provide yours. –  Oct 16 '21 at 15:02

3 Answers3

7

An idea using mask and 2 gradients:

body::before,
body::after {
  content: "";
  --g: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--g)) 0 0/85px 100%;
}

body::after {
  background: repeating-linear-gradient(var(--g)) 0 0/100% 85px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)0 0/170px 170px;
}

Or

body::before,
body::after {
  content: "";
  --g: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--g)) 0 0/80px 100%;
}

body::after {
  background: repeating-linear-gradient(var(--g)) 0 0/100% 80px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/160px 160px;
}

Also like below:

body::before,
body::after {
  content: "";
  --g: 
    teal 0 5px , black 0 10px, orange 0 15px, black 0 20px,
    teal 0 25px, black 0 30px, orange 0 35px, black 0 40px,
    teal 0 45px, black 0 50px, orange 0 55px, black 0 60px,
    teal 0 65px, black 0 70px, orange 0 75px, black 0 80px,
    teal 0 85px,
    teal 0 90px, black 0 95px, orange 0 100px, black 0 105px,
    teal 0 110px, black 0 115px, orange 0 120px, black 0 125px,
    teal 0 130px, black 0 135px, orange 0 140px, black 0 145px,
    teal 0 150px, black 0 155px, orange 0 160px, black 0 165px;
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, var(--g)) 0 0/165px 100%;
}

body::after {
  background:linear-gradient(var(--g)) 0 0/100% 165px;
  -webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/165px 165px;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    Can you edit code snippets 1 & 2 so that the image is the same as your 3rd code snippet? –  Oct 14 '21 at 14:58
  • 2
    @user17109244 I can't because I made each one to create a different pattern on purpose. You have 3 different patterns made with 3 different snippets – Temani Afif Oct 14 '21 at 15:06
1

The smartest thing would be to make the background an svg.

CSS:

body {
    background-image:url('./bg.svg');
    background-size: 165px 165px;
}

For the svg file, create the file, and paste this inside:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165">
    <defs>
        <style>.cls-1{fill:teal;}.cls-2{fill:#ffa600;}</style>
    </defs>

    <rect class="cls-1" width="165" height="165"/>
    <rect x="5" y="5" width="160" height="160"/>
    <rect class="cls-2" x="10" y="10" width="150" height="150"/>
    <rect x="15" y="15" width="140" height="140"/>
    <rect class="cls-1" x="20" y="20" width="130" height="130"/>
    <rect x="25" y="25" width="120" height="120"/>
    <rect class="cls-2" x="30" y="30" width="110" height="110"/>
    <rect x="35" y="35" width="100" height="100"/>
    <rect class="cls-1" x="40" y="40" width="90" height="90"/>
    <rect x="45" y="45" width="80" height="80"/>
    <rect class="cls-2" x="50" y="50" width="70" height="70"/>
    <rect x="55" y="55" width="60" height="60"/>¨
    <rect class="cls-1" x="60" y="60" width="50" height="50"/>
    <rect x="65" y="65" width="40" height="40"/>
    <rect class="cls-2" x="70" y="70" width="30" height="30"/>
    <rect x="75" y="75" width="20" height="20"/>
    <rect class="cls-1" x="80" y="80" width="10" height="10"/>
</svg>
Noex98
  • 166
  • 6
0

I don't know that you can make it shorter without using a preprocessor like SCSS or one of the methods suggested by @Temani, but if the main goal is to make it easier to maintain, you can use custom properties

In the example, you can change the width, colors and background size by changing just one value, rather than having to adjust each linear-gradient individually

body {
  --width: 5px;
  --backgroundSize: calc(var(--width) * 33);
  --color1: teal;
  --color2: black;
  --color3: orange;
  --transparent: rgba(255, 255, 255, 0);

  background-size: var(--backgroundSize) var(--backgroundSize);
  background-image:
   linear-gradient(to bottom, var(--color1) var(--width), var(--transparent) var(--width)),
   linear-gradient(to right, var(--color1) var(--width), var(--transparent) var(--width)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to left, var(--color2) var(--width), var(--transparent) var(--width)),
   linear-gradient(to top, var(--color2) var(--width), var(--transparent) var(--width)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to top, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
   linear-gradient(to right, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),

   linear-gradient(to bottom, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to left, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to top, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
   linear-gradient(to right, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),

   linear-gradient(to bottom, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),
   linear-gradient(to left, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to top, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
   linear-gradient(to right, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),

   linear-gradient(to bottom, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17)),
   linear-gradient(to left, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17));
}

edit example of 2nd code sample with custom properties:

body {
  --width: 5px;
  --backgroundSize: calc(var(--width) * 33);
  --color1: teal;
  --color2: black;
  --color3: orange;
  --transparent: rgba(255, 255, 255, 0);

  background-size: var(--backgroundSize) var(--backgroundSize);
  background-image:
    linear-gradient(var(--color1) var(--width), var(--transparent) var(--width)),
    linear-gradient(90deg, var(--color1) var(--width), var(--transparent) var(--width)),
    linear-gradient(var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
    linear-gradient(var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
    linear-gradient(var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
    linear-gradient(var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
    linear-gradient(var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
    linear-gradient(var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
    linear-gradient(var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
    linear-gradient(var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
    linear-gradient(var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
    linear-gradient(var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
    linear-gradient(var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
    linear-gradient(var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
    linear-gradient(90deg, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
    linear-gradient(var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
    linear-gradient(var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
    linear-gradient(90deg, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
    linear-gradient(var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
    linear-gradient(90deg, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
    linear-gradient(var(--color1), var(--color1));
}
D-Money
  • 2,375
  • 13
  • 27
  • 2
    Can you show in an answer how that would be done with the 2nd Code example? https://jsfiddle.net/koqy9hp0/ –  Oct 13 '21 at 22:35
  • 3
    Sure, edited my answer above to include the 2nd example – D-Money Oct 14 '21 at 10:54
  • 2
    How would that be done with an svg, but with just a single pattern? I was only able to do the colors. https://jsfiddle.net/ugopkdb7/ –  Oct 14 '21 at 13:29
  • 2
    How are custom properties given to the others? height/width, x/y, viewBox? –  Oct 14 '21 at 14:48
  • 2
    Are custom properties able to be given to the height/width, x/y, viewBox of an svg? https://jsfiddle.net/ugopkdb7/ –  Oct 15 '21 at 20:10