{"loaderData":{"0":null,"0-2":{"total":6509,"projects":[{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"c91789","snapshot":"https://s1.qingting.work/runjs/fa7f9f449691.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by catraco","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":228,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n orange,\n orange 10px,\n orangered 10px,\n orangered 20px\n )\n orange;\n background-blend-mode: overlay;\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"3defef","snapshot":"https://s1.qingting.work/runjs/9faae6375b95.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":795,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --s: 140px; /* control the size */\n --c1: #ab3e5b;\n --c2: #ffbe40;\n\n --_g: #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,\n var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%,\n #0000 575%;\n --_s: calc(25% / 3) calc(25% / 4) at 50%;\n background: radial-gradient(var(--_s) 100%, var(--_g)),\n radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s) / 2)\n calc(3 * var(--s) / 4),\n radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s) / 2) 0,\n radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3 * var(--s) / 4),\n repeating-linear-gradient(\n 90deg,\n #accec0 calc(25% / -6) calc(25% / 6),\n #61a6ab 0 calc(25% / 2)\n );\n background-size: var(--s) calc(3 * var(--s) / 2);\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"0a3f69","snapshot":"https://s1.qingting.work/runjs/172700f2d529.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":389,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n position: relative;\n background: #fff;\n filter: contrast(7);\n --mask: linear-gradient(red, rgba(0, 0, 0, 0.45));\n}\n\n.container::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: radial-gradient(#000, transparent) 0 0/1em 1em space;\n -webkit-mask: var(--mask);\n mask: var(--mask);\n content: \"\";\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"2855b4","snapshot":"https://s1.qingting.work/runjs/b13c8b9705e1.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Ratinax","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":165,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 100%;\n height: 100%;\n /* Add your background pattern here */\n background: linear-gradient(45deg,black, white);\n background-size: 1em 1em;\n}"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"a59f5e","snapshot":"https://s1.qingting.work/runjs/931a0731d0b1.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --s: 150px; /* control the size */\n --c1: #f7d2a1;\n --c2: #05057e;\n\n --_g: var(--c1) 0% 5%, var(--c2) 6% 15%, var(--c1) 16% 25%, var(--c2) 26% 35%,\n var(--c1) 36% 45%, var(--c2) 46% 55%, var(--c1) 56% 65%, var(--c2) 66% 75%,\n var(--c1) 76% 85%, var(--c2) 86% 95%, #0000 96%;\n background: radial-gradient(50% 50% at 100% 0, var(--_g)),\n radial-gradient(50% 50% at 0 100%, var(--_g)),\n radial-gradient(50% 50%, var(--_g)),\n radial-gradient(50% 50%, var(--_g)) calc(var(--s) / 2) calc(var(--s) / 2)\n var(--c1);\n background-size: var(--s) var(--s);\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"aaa26d","snapshot":"https://s1.qingting.work/runjs/7010c556edd1.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by catraco","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":397,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 45deg,\n orange 25%,\n transparent 25%,\n transparent 75%,\n orange 75%,\n orange\n ),\n linear-gradient(\n 45deg,\n orange 25%,\n transparent 25%,\n transparent 75%,\n orange 75%,\n orange\n );\n background-size: 20px 20px;\n background-position: 0 0, 10px 10px;\n}\n"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"8056d7","snapshot":"https://s1.qingting.work/runjs/39f11afa8d0b.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Ratinax","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":146,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 100%;\n height: 100%;\n background: repeating-radial-gradient(red 55%, white 56%);\n animation: rotate 2s linear infinite;\n}"},{"created":"2024-01-22T17:22:25.000Z","isPrivate":0,"projectId":"0bb709","snapshot":"https://s1.qingting.work/runjs/7d38fdc5a573.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by catraco","updated":"2024-01-22T19:24:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":232,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n 5deg,\n orange 50%,\n orangered 60%,\n orange 50%\n );\n background-color: orange;\n background-size: 1em 1em;\n background-repeat: space;\n}\n"},{"created":"2024-01-22T17:22:24.000Z","isPrivate":0,"projectId":"80f409","snapshot":"https://s1.qingting.work/runjs/e18109029d6b.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by themrsami","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":215,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle, black 10%, transparent 10%);\n background-size: 30px 30px;\n}\n"},{"created":"2024-01-22T17:22:24.000Z","isPrivate":0,"projectId":"63da65","snapshot":"https://s1.qingting.work/runjs/6b47f2afc1ab.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by catraco","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":233,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n 40deg,\n orange 50%,\n orangered 55%,\n orange 55%\n );\n background-size: 2em 2em;\n background-repeat: round;\n background-color: orange;\n}\n"},{"created":"2024-01-22T17:22:24.000Z","isPrivate":0,"projectId":"5dddbc","snapshot":"https://s1.qingting.work/runjs/3ed24a0702e4.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by mobinkakei","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":4094,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --sz: 4px; /*** size ***/\n --sp: 5s; /*** speed ***/\n --b1: #211e1e; /*** color ***/\n --b2: #1c1b18; /*** color ***/\n --b3: #0c0b0a; /*** color ***/\n --b4: #0c0b0ae0; /*** color ***/\n --c1: #ffffff; /*** color ***/\n --ts: 50% / calc(var(--sz) * 17.5) calc(var(--sz) * 29.5);\n background:\n\t\t/* black shadows */ radial-gradient(\n circle at 50% 50%,\n var(--b4) calc(var(--sz) * 1),\n #fff0 calc(var(--sz) * 8)\n )\n var(--ts),\n radial-gradient(\n circle at 0% 0%,\n var(--b4) calc(var(--sz) * 1),\n #fff0 calc(var(--sz) * 8)\n )\n var(--ts),\n radial-gradient(\n circle at 0% 100%,\n var(--b4) calc(var(--sz) * 1),\n #fff0 calc(var(--sz) * 8)\n )\n var(--ts),\n radial-gradient(\n circle at 100% 0%,\n var(--b4) calc(var(--sz) * 1),\n #fff0 calc(var(--sz) * 8)\n )\n var(--ts),\n radial-gradient(\n circle at 100% 100%,\n var(--b4) calc(var(--sz) * 1),\n #fff0 calc(var(--sz) * 8)\n )\n var(--ts),\n /* border bottom */\n conic-gradient(\n from 90deg at 97.5% 67%,\n var(--c1) 0 87.5deg,\n #fff0 88deg 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from 90deg at 97.5% 67%,\n var(--c1) 0 87.5deg,\n #fff0 88deg 100%\n )\n var(--ts),\n conic-gradient(\n from 182.5deg at 2.5% 67%,\n #fff0 0 0deg,\n var(--c1) 0.5deg 90deg,\n #fff0 0 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from 182.5deg at 2.5% 67%,\n #fff0 0 0deg,\n var(--c1) 0.5deg 90deg,\n #fff0 0 100%\n )\n var(--ts),\n /* border top */\n conic-gradient(\n from 270deg at 2.5% 33%,\n var(--c1) 0 87.5deg,\n #fff0 88deg 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from 270deg at 2.5% 33%,\n var(--c1) 0 87.5deg,\n #fff0 88deg 100%\n )\n var(--ts),\n conic-gradient(\n from 2.5deg at 97.5% 33%,\n #fff0 0 0deg,\n var(--c1) 0.5deg 90deg,\n #fff0 0 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from 2.5deg at 97.5% 33%,\n #fff0 0 0deg,\n var(--c1) 0.5deg 90deg,\n #fff0 0 100%\n )\n var(--ts),\n /* bottom */\n conic-gradient(\n from 116.5deg at 50% 85.5%,\n var(--b1) 0 127deg,\n #fff0 0 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from 116.5deg at 50% 85.5%,\n var(--b1) 0 127deg,\n #fff0 0 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from 116.5deg at 50% 85.5%,\n var(--b1) 0 127deg,\n #fff0 0 100%\n )\n var(--ts),\n conic-gradient(from 120deg at 50% 83%, var(--c1) 0 120deg, #fff0 0 100%)\n var(--ts),\n /* top */\n conic-gradient(\n from -63.5deg at 50% 14.5%,\n var(--b1) 0 127deg,\n #fff0 0 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from -63.5deg at 50% 14.5%,\n var(--b1) 0 127deg,\n #fff0 0 100%\n )\n var(--ts),\n /*repeated*/\n conic-gradient(\n from -63.5deg at 50% 14.5%,\n var(--b1) 0 127deg,\n #fff0 0 100%\n )\n var(--ts),\n conic-gradient(from -60deg at 50% 17%, var(--c1) 0 120deg, #fff0 0 100%)\n var(--ts),\n /* central gradient */\n conic-gradient(\n from 0deg at 50% 50%,\n #fff0 0 2deg,\n var(--b2) 2.5deg 57.5deg,\n #fff0 58deg 62.5deg,\n var(--b1) 63deg 117.5deg,\n #fff0 118deg 122.5deg,\n var(--b3) 123deg 177.5deg,\n #fff0 178deg 182deg,\n var(--b2) 182.5deg 237.5deg,\n #fff0 0 242.5deg,\n var(--b1) 243deg 297.5deg,\n #fff0 298deg 302.5deg,\n var(--b3) 303deg 357.5deg,\n #fff0 358deg 360deg\n )\n var(--ts),\n /* bg */ var(--c1);\n animation: colors var(--sp) linear 0s infinite;\n}\n\n@keyframes colors {\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T17:22:24.000Z","isPrivate":0,"projectId":"ad0682","snapshot":"https://s1.qingting.work/runjs/acbe1346549a.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle farthest-side at 0% 50%,\n #fb1 23.5%,\n rgba(240, 166, 17, 0) 0\n )\n 21px 30px,\n radial-gradient(\n circle farthest-side at 0% 50%,\n #b71 24%,\n rgba(240, 166, 17, 0) 0\n )\n 19px 30px,\n linear-gradient(\n #fb1 14%,\n rgba(240, 166, 17, 0) 0,\n rgba(240, 166, 17, 0) 85%,\n #fb1 0\n )\n 0 0,\n linear-gradient(\n 150deg,\n #fb1 24%,\n #b71 0,\n #b71 26%,\n rgba(240, 166, 17, 0) 0,\n rgba(240, 166, 17, 0) 74%,\n #b71 0,\n #b71 76%,\n #fb1 0\n )\n 0 0,\n linear-gradient(\n 30deg,\n #fb1 24%,\n #b71 0,\n #b71 26%,\n rgba(240, 166, 17, 0) 0,\n rgba(240, 166, 17, 0) 74%,\n #b71 0,\n #b71 76%,\n #fb1 0\n )\n 0 0,\n linear-gradient(90deg, #b71 2%, #fb1 0, #fb1 98%, #b71 0%) 0 0 #fb1;\n background-size: 40px 60px;\n}\n"}]}},"actionData":null,"errors":null}