{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":83,"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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":618,"pureCSS":1,"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: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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":4094,"pureCSS":1,"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":"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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":233,"pureCSS":1,"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":"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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":215,"pureCSS":1,"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":"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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":1023,"pureCSS":1,"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:23.000Z","isPrivate":0,"projectId":"0df242","snapshot":"https://s1.qingting.work/runjs/055c14341db0.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":622,"pureCSS":1,"html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --s: 100px; /* control the size */\n --c1: #f8b195;\n --c2: #355c7d;\n\n --_g: var(--c2) 6% 14%, var(--c1) 16% 24%, var(--c2) 26% 34%,\n var(--c1) 36% 44%, var(--c2) 46% 54%, var(--c1) 56% 64%, var(--c2) 66% 74%,\n var(--c1) 76% 84%, var(--c2) 86% 94%;\n background: radial-gradient(\n 100% 100% at 100% 0,\n var(--c1) 4%,\n var(--_g),\n #0008 96%,\n #0000\n ),\n radial-gradient(\n 100% 100% at 0 100%,\n #0000,\n #0008 4%,\n var(--_g),\n var(--c1) 96%\n )\n var(--c1);\n background-size: var(--s) var(--s);\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":516,"pureCSS":1,"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":"265c71","snapshot":"https://s1.qingting.work/runjs/46a7ea0b2f88.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by uiverse-astronaut","updated":"2024-01-22T19:24:21.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":29,"jsLen":0,"cssLen":338,"pureCSS":1,"html":"

","css":".container {\n width: 100%;\n height: 100%;\n background-color: white;\n background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), \n linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #ccc);\n background-size: 30px 30px;\n background-position: 0 0, 15px 15px;\n}"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"404f3a","snapshot":"https://s1.qingting.work/runjs/425211f1a9ff.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by catraco","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":191,"pureCSS":1,"html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom right, orangered, orange, orangered)\n orange;\n background-size: 2em 2em;\n background-repeat: space;\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"4faa85","snapshot":"https://s1.qingting.work/runjs/cb2093c4d2e4.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Deri-Kurniawan","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":30,"jsLen":0,"cssLen":401,"pureCSS":1,"html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: radial-gradient(circle at 10% 10%, #3e73f0 5%, transparent 5%),\n radial-gradient(circle at 90% 10%, #3e73f0 5%, transparent 5%),\n radial-gradient(circle at 90% 90%, #3e73f0 5%, transparent 5%),\n radial-gradient(circle at 10% 90%, #3e73f0 5%, transparent 5%);\n background-size: 20px 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n}\n"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"72acc8","snapshot":"https://s1.qingting.work/runjs/5d414c0aef98.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by Javierrocadev","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":29,"jsLen":0,"cssLen":192,"pureCSS":1,"html":"

","css":".container {\n width: 100%;\n height: 100%;\n /* Add your background pattern here */\n background-image: radial-gradient( #173d49 85%, #36a6f1 90%,#0d1725 20%);\n background-size: 50px 50px;\n}"},{"created":"2024-01-22T17:22:23.000Z","isPrivate":0,"projectId":"fede01","snapshot":"https://s1.qingting.work/runjs/617074c0aa0a.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by themrsami","updated":"2024-01-22T19:24:23.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":29,"jsLen":0,"cssLen":260,"pureCSS":1,"html":"

","css":".container {\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, green 25%, transparent 25%, transparent 75%, green 75%, green),\n linear-gradient(45deg, yellow, yellow);\n background-size: 100px 100px;\n background-position: 0, 50px 50px;\n}\n"}]}},"actionData":null,"errors":null}