{"loaderData":{"0":null,"0-2":{"total":6509,"projects":[{"created":"2024-01-22T17:22:24.000Z","isPrivate":0,"projectId":"22d6fd","snapshot":"https://s1.qingting.work/runjs/6e1fc45d6c21.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":815,"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: 75px; /* control the size */\n\n --_c: #0000, #fff 1deg 79deg, #0000 81deg;\n --g0: conic-gradient(from 140deg at 50% 87.5%, var(--_c));\n --g1: conic-gradient(from 140deg at 50% 81.25%, var(--_c));\n --g2: conic-gradient(from 140deg at 50% 75%, var(--_c));\n --g3: conic-gradient(at 10% 20%, #0000 75%, #fff 0);\n background: var(--g0) 0 calc(var(--s) / -4),\n var(--g0) var(--s) calc(3 * var(--s) / 4), var(--g1),\n var(--g1) var(--s) var(--s), var(--g2) 0 calc(var(--s) / 4),\n var(--g2) var(--s) calc(5 * var(--s) / 4),\n var(--g3) calc(var(--s) / -10) var(--s),\n var(--g3) calc(9 * var(--s) / 10) calc(2 * var(--s)),\n repeating-conic-gradient(from 45deg, #a31e39 0 25%, #31570e 0 50%);\n background-size: calc(2 * var(--s)) calc(2 * var(--s));\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"2f4412","snapshot":"https://s1.qingting.work/runjs/ab835beb7ec6.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by elijahgummer","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":631,"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: #f0f0f0;\n}\n\n.container::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 45deg,\n #3498db 25%,\n transparent 25%,\n transparent 50%,\n #3498db 50%,\n #3498db 75%,\n transparent 75%,\n transparent\n ),\n linear-gradient(\n -45deg,\n #3498db 25%,\n transparent 25%,\n transparent 50%,\n #3498db 50%,\n #3498db 75%,\n transparent 75%,\n transparent\n );\n background-size: 20px 20px;\n opacity: 0.8;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"166127","snapshot":"https://s1.qingting.work/runjs/5c560ca1e0ec.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by iSweat-exe","updated":"2024-01-22T19:24:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":516,"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 /* Add your background pattern here */\n background: conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0),\n conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0) 60px 60px,\n conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0) calc(2 * 60px)\n calc(2 * 60px),\n conic-gradient(at 50% 25%, #0000 75%, #47d3ff 0) calc(3 * 60px)\n calc(3 * 60px),\n repeating-linear-gradient(135deg, #adafff 0 12.5%, #474bff 0 25%);\n background-size: calc(4 * 60px) calc(4 * 60px);\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"f8e7eb","snapshot":"https://s1.qingting.work/runjs/b965e6487a11.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by kennyotsu","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n --color: #c09bd8;\n background-color: #9f84bd;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.container::after {\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0.8;\n background: radial-gradient(circle, var(--color) 15%, transparent 15%),\n radial-gradient(circle, var(--color) 15%, transparent 15%) 6px -6px,\n radial-gradient(circle, var(--color) 15%, transparent 15%) 6px -1px,\n radial-gradient(circle, var(--color) 15%, transparent 15%) 10px 2px,\n radial-gradient(circle, var(--color) 15%, transparent 15%) 14px 5px,\n radial-gradient(circle, var(--color) 15%, transparent 15%) 18px 8px,\n radial-gradient(circle, var(--color) 15%, transparent 15%) 18px 12px,\n radial-gradient(circle, var(--color) 15%, transparent 15%) 23px 6px;\n background-size: 50px 50px;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"cdc9bc","snapshot":"https://s1.qingting.work/runjs/3ca5966b6c57.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by 16alves02","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":257,"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 to right,\n #289a6a 0%,\n #289a6a 30%,\n #ffcd00 30%,\n #ffcd00 70%,\n #ef3340 70%,\n #ef3340 100%\n );\n background-size: 120px 100%;\n background-repeat: repeat;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"85d383","snapshot":"https://s1.qingting.work/runjs/69343feb7f2d.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by aadium","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":391,"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-linear-gradient(60deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px,rgba(255, 238, 0, 0.2) 90px),\n repeating-linear-gradient(120deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px,rgba(255, 238, 0, 0.2)90px),\n repeating-linear-gradient(180deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px, rgba(255, 238, 0, 0.2) 90px);\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"925e38","snapshot":"https://s1.qingting.work/runjs/a1e20141bba9.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by escannord","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":309,"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(#3f87a6 10%, #ebf8e1a2 10%),\n linear-gradient(to right, #ebf8e100 10%, #c73030 10% 10.2%, #ebf8e100 10.5%);\n background-size: 100% 25px, 100% 100%;\n background-repeat: repeat, no-repeat;\n /* Add your background pattern here */\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"c7203f","snapshot":"https://s1.qingting.work/runjs/f59c3cdc4207.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by themrsami","updated":"2024-01-22T19:24:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":443,"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: linear-gradient(45deg, black 25%, transparent 25%),\n linear-gradient(-45deg, black 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, black 75%),\n linear-gradient(-45deg, transparent 75%, black 75%);\n background-size: 60px 60px;\n background-position: 0 0, 30px 0, 30px -30px, 0px -30px;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"0a62d5","snapshot":"https://s1.qingting.work/runjs/ec5cd5292d24.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":1070,"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: 50px; /* control the size */\n --t: 6px; /* control the thickness */\n --c1: #084c7f;\n --c2: #fef5e9;\n\n --_c: #0000 calc(98% - var(--t)), var(--c1) calc(100% - var(--t)) 98%, #0000;\n --_s: calc(2 * var(--s)) calc(5 * var(--s) / 2);\n --_r0: /var(--_s) radial-gradient(calc(var(--s) / 2) at 0 20%, var(--_c));\n --_r1: /var(--_s) radial-gradient(calc(var(--s) / 2) at 100% 20%, var(--_c));\n background: 0 0 var(--_r0),\n calc(-1 * var(--s)) calc(5 * var(--s) / 4) var(--_r0), var(--s) 0 var(--_r1),\n 0 calc(5 * var(--s) / 4) var(--_r1),\n conic-gradient(at var(--t) calc(20% + 2 * var(--t)), #0000 75%, var(--c1) 0)\n calc(var(--t) / -2) calc(var(--s) - var(--t)) / var(--s)\n calc(5 * var(--s) / 4),\n repeating-conic-gradient(var(--c2) 0 25%, #0000 0 50%) var(--s)\n calc(var(--s) / -8) / var(--_s),\n conic-gradient(from 90deg at var(--t) var(--t), var(--c2) 25%, var(--c1) 0)\n calc((var(--s) - var(--t)) / 2) calc((var(--s) - var(--t)) / 2) / var(--s)\n calc(5 * var(--s) / 4);\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"2a814c","snapshot":"https://s1.qingting.work/runjs/cc01c03f7a21.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by SouravBandyopadhyay","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":264,"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 transparent 33.33%,\n rgba(57, 144, 179, 0.1) 33.33%,\n rgba(0, 0, 0, 0.1) 66.66%,\n transparent 66.66%\n ),\n lightblue;\n background-size: 20px 20px;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"20e072","snapshot":"https://s1.qingting.work/runjs/18eea1d26606.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":29,"cssLen":397,"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: radial-gradient(circle at 0% 50%, transparent 20%, darkgreen 21% 28%, transparent 29%),\n radial-gradient(circle at 50% 50%, transparent 20%, darkgreen 21% 28%, transparent 29%),\n radial-gradient(circle at 100% 50%, transparent 20%, darkgreen 21% 28%, transparent 29%);\n background-color: lightgreen;\n background-size: 60px 70px;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"986d66","snapshot":"https://s1.qingting.work/runjs/bfa76327f15d.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Javierrocadev","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":192,"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-image: repeating-radial-gradient( #f8f1f1ee 87%,#3fa7b4 90%);\n background-size: 50px 50px;\n}"}]}},"actionData":null,"errors":null}