another pattern

index.html

@@ -27,7 +27,7 @@
   		<h1><span>C</span><span>S</span><span>S</span> Pattern</h1>
   		<p>powered by CSS gradients</p>
         <h2>the biggest collection of background Patterns</h2>
-        <p>Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.<br> I also have <a href="https://animated.css-pattern.com/" target="_blank">a collection of animated CSS Patterns</a></p>
+        <p>Explore 145 CSS-only patterns made with CSS gradients and optimized with CSS variables.<br> I also have <a href="https://animated.css-pattern.com/" target="_blank">a collection of animated CSS Patterns</a></p>
   	</header>
     <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
     <div class="adaptive" data-ea-publisher="css-challengescom" id="css-pattern" data-ea-type="text" data-ea-style="fixedfooter"></div>
@@ -2434,20 +2434,6 @@ <h2>the biggest collection of background Patterns</h2>
     repeating-linear-gradient(45deg,var(--c),#D3643B 0 70%);
   background-size: var(--s) var(--s);
 }
-</style><button>Copy the CSS</button>  
-    </section>
-    <section id="g142">
-      <style>#g142 {
-  --s: 100px; /* control the size */
-
-  --c:#88C425;
-  --g:#1B676B -5% 5%,#0000 0 45%;
-  background:
-    linear-gradient(45deg,#0000 10%,var(--c) 0 40%,#0000 0),
-    repeating-linear-gradient( 45deg,var(--g)),
-    repeating-linear-gradient(-45deg,var(--g)) var(--c);
-  background-size: var(--s) var(--s);
-}
 </style><button>Copy the CSS</button>  
     </section>
     <section id="g143">
@@ -2462,6 +2448,20 @@ <h2>the biggest collection of background Patterns</h2>
     repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%);
   background-size: calc(10*var(--s)) calc(6*var(--s));
 }
+</style><button>Copy the CSS</button>  
+    </section>
+    <section id="g142">
+      <style>#g142 {
+  --s: 100px; /* control the size */
+
+  --c:#88C425;
+  --g:#1B676B -5% 5%,#0000 0 45%;
+  background:
+    linear-gradient(45deg,#0000 10%,var(--c) 0 40%,#0000 0),
+    repeating-linear-gradient( 45deg,var(--g)),
+    repeating-linear-gradient(-45deg,var(--g)) var(--c);
+  background-size: var(--s) var(--s);
+}
 </style><button>Copy the CSS</button>  
     </section>
     <section id="g144">
@@ -2477,6 +2477,24 @@ <h2>the biggest collection of background Patterns</h2>
     repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%);
   background-size: calc(10*var(--s)) calc(6*var(--s));
 }
+</style><button>Copy the CSS</button>  
+    </section>
+    <section id="g145">
+      <style>#g145 {
+  --s: 90px; /* control the size */
+  --c1: #ECF081;
+  --c2: #AB3E5B;
+
+  --g:/calc(2*var(--s)) calc(2*var(--s)) 
+    conic-gradient(at 18.75% 18.75%,#0000 75%,var(--c2) 0);
+  background:
+    radial-gradient(50% 50%,var(--c1) 24%,var(--c2) 26% 74%,#0000 76%) 
+     0 0/var(--s) var(--s),
+    calc(  var(--s)/8) calc(  var(--s)/8) var(--g),
+    calc(3*var(--s)/2) calc(  var(--s)/8) var(--g),
+    calc(  var(--s)/8) calc(3*var(--s)/2) var(--g),
+    calc(3*var(--s)/2) calc(3*var(--s)/2) var(--g) var(--c1);
+}
 </style><button>Copy the CSS</button>  
     </section>
     <section>