New examples

Author: yuanchuan

index.html

@@ -2473,6 +2473,6 @@ <h2>Dedicated to people who <span><css-doodle use="var(--heart)"></css-doodle> C
   </footer>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/mode/css/css.min.js"></script>
-  <script src="main.js?ef18a59ce3dcbb3c050ef8e92c46e677"></script>
+  <script src="main.js?18265d4d1d5da3a856f31915f063ee81"></script>
 </body>
 </html>

main.js

@@ -188,14 +188,22 @@
       transform: rotate(@r(360deg));
     `),
     tiled: indent(`
-      /* 10 PRINT */
-
-      @grid: 16 / 320px;
-
-      @size: 1px calc(141.4% + 1px);
-      transform: rotate(@p(±45deg));
-      background: #AEACFB;
-      margin: auto;
+      @grid: 1 / 90%;
+
+      @content: @svg(
+        viewBox: 0 0 16 16 p 1;
+        stroke: #aeacfb;
+        stroke-width: .1;
+        stroke-linecap: round;
+        line*16x16 {
+          draw: @r(2s);
+          x1, y1, x2, y2: @p(
+            @nx(-1) @ny(-1) @nx @ny,
+            @nx @ny(-1) @nx(-1) @ny,
+            @nx @ny(-1) @nx @ny
+          );
+        }
+      );
     `),
     border: indent(`
       @grid: 14 / 80%;
@@ -219,17 +227,16 @@
     `),
 
     bud: indent(`
-      @grid: 1 / 70%;
+      @grid: 1 / 70% auto;
 
       background: radial-gradient(
-        yellow, #E91F63, #fff
+        pink, yellow, red, red
       );
 
-      clip-path: @shape(
-        fill-rule: evenodd;
-        split: 500;
-        scale: .6;
-        r: cos(7t)^2 + sin(7t) + .3;
+      mask: @svg-polygon(
+        split: 400;
+        scale: .7;
+        r: cos(7t)^4 + sin(7t) +.3;
       );
     `),