{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"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"},{"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"}]}},"actionData":null,"errors":null}