another pattern

Author: Afif13

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 138 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 139 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>
@@ -2377,6 +2377,21 @@ <h2>the biggest collection of background Patterns</h2>
     </section>
     <section id="g138">
       <style>#g138 {
+  --s: 46px; /* control the size */
+  
+  --c:#9D2053 99%,#0000 101%;
+  background:
+    radial-gradient(var(--s) at 100% 100%,var(--c)),
+    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
+    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
+    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0
+    #B5D8EB;
+  background-size: calc(3*var(--s)) calc(5*var(--s)/2);
+}
+</style><button>Copy the CSS</button>  
+    </section>
+    <section id="g139">
+      <style>#g139 {
   --s: 90px; /* control the size */
   --c:#C2CBCE;