{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-18T16:19:10.000Z","isPrivate":0,"projectId":"fa1cdc","snapshot":null,"tags":null,"title":"Random Password Generator","updated":"2024-01-18T16:19:10.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:18:38.000Z","isPrivate":0,"projectId":"dcc09a","snapshot":null,"tags":null,"title":"Weekly Coding Challenge #1: Sign in/up Form","updated":"2024-01-18T16:18:38.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:18:36.000Z","isPrivate":0,"projectId":"4e925d","snapshot":null,"tags":null,"title":"Weekly Coding Challenge #1: Sign in/up Form","updated":"2024-01-18T16:18:36.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T14:51:41.000Z","isPrivate":0,"projectId":"e442c7","snapshot":"https://s1.qingting.work/runjs/ee086b165987.png?x-oss-process=style/webp-w-500","tags":null,"title":"Swipeable Tabs","updated":"2024-01-18T16:52:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":332,"cssLen":2043,"jsLen":570,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1110"},{"created":"2024-01-18T12:22:53.000Z","isPrivate":0,"projectId":"6fcb99","snapshot":"https://s1.qingting.work/runjs/d8a0c1b5469a.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by PriyanshuGupta28","updated":"2024-01-18T14:24:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":560,"cssLen":828,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n Checkbox\n \n

\n\n\n\n","css":"html, body {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.checkbox-wrapper input[type=\"checkbox\"] {\n visibility: hidden;\n display: none;\n}\n\n.checkbox-wrapper *,\n .checkbox-wrapper ::after,\n .checkbox-wrapper ::before {\n box-sizing: border-box;\n user-select: none;\n}\n\n.checkbox-wrapper {\n position: relative;\n display: block;\n overflow: hidden;\n}\n\n.checkbox-wrapper .label {\n cursor: pointer;\n}\n\n.checkbox-wrapper .check {\n width: 50px;\n height: 50px;\n position: absolute;\n opacity: 0;\n}\n\n.checkbox-wrapper .label svg {\n vertical-align: middle;\n}\n\n.checkbox-wrapper .path1 {\n stroke-dasharray: 400;\n stroke-dashoffset: 400;\n transition: .5s stroke-dashoffset;\n opacity: 0;\n}\n\n.checkbox-wrapper .check:checked + label svg g path {\n stroke-dashoffset: 0;\n opacity: 1;\n}"},{"created":"2024-01-18T12:20:17.000Z","isPrivate":0,"projectId":"0e35fc","snapshot":"https://s1.qingting.work/runjs/05c870750ca8.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by WhiteNervosa","updated":"2024-01-18T14:21:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":410,"cssLen":1322,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":"/* Variation of work by @mrhyddenn for Radios */\n\nhtml, body {\n background: #333;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.check {\n cursor: pointer;\n position: relative;\n margin: auto;\n width: 18px;\n height: 18px;\n -webkit-tap-highlight-color: transparent;\n transform: translate3d(0, 0, 0);\n}\n\n.check:before {\n content: \"\";\n position: absolute;\n top: -15px;\n left: -15px;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(34, 50, 84, 0.03);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.check svg {\n position: relative;\n z-index: 1;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #c8ccd4;\n stroke-width: 1.5;\n transform: translate3d(0, 0, 0);\n transition: all 0.2s ease;\n}\n\n.check svg path {\n stroke-dasharray: 60;\n stroke-dashoffset: 0;\n}\n\n.check svg polyline {\n stroke-dasharray: 22;\n stroke-dashoffset: 66;\n}\n\n.check:hover:before {\n opacity: 1;\n}\n\n.check:hover svg {\n stroke: var(--accent-color, #a3e583);\n}\n\n#cbx2:checked + .check svg {\n stroke: var(--accent-color, #a3e583);\n}\n\n#cbx2:checked + .check svg path {\n stroke-dashoffset: 60;\n transition: all 0.3s linear;\n}\n\n#cbx2:checked + .check svg polyline {\n stroke-dashoffset: 42;\n transition: all 0.2s linear;\n transition-delay: 0.15s;\n}"},{"created":"2024-01-18T12:19:27.000Z","isPrivate":0,"projectId":"39ecf6","snapshot":"https://s1.qingting.work/runjs/e387b6e119c4.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by Gautammsharma","updated":"2024-01-18T14:19:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1186,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n Checkbox Label\n\n","css":".material-checkbox {\n display: flex;\n align-items: center;\n font-size: 16px;\n color: #777777;\n cursor: pointer;\n}\n\n.material-checkbox input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.checkmark {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n margin-right: 12px;\n border: 2px solid #454b00;\n border-radius: 4px;\n transition: all 0.3s;\n}\n\n.material-checkbox input[type=\"checkbox\"]:checked ~ .checkmark {\n background-color: #2f3300;\n border-color: #454b00;\n}\n\n.material-checkbox input[type=\"checkbox\"]:checked ~ .checkmark:after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 6px;\n width: 4px;\n height: 10px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.material-checkbox input[type=\"checkbox\"]:focus ~ .checkmark {\n box-shadow: 0 0 0 2px #dfec5065;\n}\n\n.material-checkbox:hover input[type=\"checkbox\"] ~ .checkmark {\n border-color: #c3cf34;\n}\n\n.material-checkbox input[type=\"checkbox\"]:disabled ~ .checkmark {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.material-checkbox input[type=\"checkbox\"]:disabled ~ .checkmark:hover {\n border-color: #4d4d4d;\n}\n"},{"created":"2024-01-18T12:18:19.000Z","isPrivate":0,"projectId":"12d9b3","snapshot":"https://s1.qingting.work/runjs/a981b0643230.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by JkHuger","updated":"2024-01-18T14:18:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":295,"cssLen":3607,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Bread\n \n Cheese\n \n Coffee\n

","css":"#checklist {\n --background: #fff;\n --text: #414856;\n --check: #4f29f0;\n --disabled: #c3c8de;\n --width: 100px;\n --height: 180px;\n --border-radius: 10px;\n background: var(--background);\n width: var(--width);\n height: var(--height);\n border-radius: var(--border-radius);\n position: relative;\n box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);\n padding: 30px 85px;\n display: grid;\n grid-template-columns: 30px auto;\n align-items: center;\n justify-content: center;\n}\n\n#checklist label {\n color: var(--text);\n position: relative;\n cursor: pointer;\n display: grid;\n align-items: center;\n width: fit-content;\n transition: color 0.3s ease;\n margin-right: 20px;\n}\n\n#checklist label::before, #checklist label::after {\n content: \"\";\n position: absolute;\n}\n\n#checklist label::before {\n height: 2px;\n width: 8px;\n left: -27px;\n background: var(--check);\n border-radius: 2px;\n transition: background 0.3s ease;\n}\n\n#checklist label:after {\n height: 4px;\n width: 4px;\n top: 8px;\n left: -25px;\n border-radius: 50%;\n}\n\n#checklist input[type=\"checkbox\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n height: 15px;\n width: 15px;\n outline: none;\n border: 0;\n margin: 0 15px 0 0;\n cursor: pointer;\n background: var(--background);\n display: grid;\n align-items: center;\n margin-right: 20px;\n}\n\n#checklist input[type=\"checkbox\"]::before, #checklist input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n height: 2px;\n top: auto;\n background: var(--check);\n border-radius: 2px;\n}\n\n#checklist input[type=\"checkbox\"]::before {\n width: 0px;\n right: 60%;\n transform-origin: right bottom;\n}\n\n#checklist input[type=\"checkbox\"]::after {\n width: 0px;\n left: 40%;\n transform-origin: left bottom;\n}\n\n#checklist input[type=\"checkbox\"]:checked::before {\n animation: check-01 0.4s ease forwards;\n}\n\n#checklist input[type=\"checkbox\"]:checked::after {\n animation: check-02 0.4s ease forwards;\n}\n\n#checklist input[type=\"checkbox\"]:checked + label {\n color: var(--disabled);\n animation: move 0.3s ease 0.1s forwards;\n}\n\n#checklist input[type=\"checkbox\"]:checked + label::before {\n background: var(--disabled);\n animation: slice 0.4s ease forwards;\n}\n\n#checklist input[type=\"checkbox\"]:checked + label::after {\n animation: firework 0.5s ease forwards 0.1s;\n}\n\n@keyframes move {\n 50% {\n padding-left: 8px;\n padding-right: 0px;\n }\n\n 100% {\n padding-right: 4px;\n }\n}\n\n@keyframes slice {\n 60% {\n width: 100%;\n left: 4px;\n }\n\n 100% {\n width: 100%;\n left: -2px;\n padding-left: 0;\n }\n}\n\n@keyframes check-01 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(45deg);\n }\n\n 100% {\n width: 5px;\n top: 8px;\n transform: rotate(45deg);\n }\n}\n\n@keyframes check-02 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(-45deg);\n }\n\n 100% {\n width: 10px;\n top: 8px;\n transform: rotate(-45deg);\n }\n}\n\n@keyframes firework {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;\n }\n}"},{"created":"2024-01-18T12:12:50.000Z","isPrivate":0,"projectId":"2ac588","snapshot":"https://s1.qingting.work/runjs/6d8193385d89.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by gagan-gv made with CSS | Uiverse.io","updated":"2024-01-18T14:12:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1330,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n background-color: #343434;\n border-radius: 5px;\n transition: all 0.5s;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #f0f0f0;\n border: 2px solid #343434;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n filter: drop-shadow(0 0 10px #888);\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.3em;\n top: 0.05em;\n width: 0.3em;\n height: 0.65em;\n border: solid #343434;\n border-width: 0 0.2em 0.2em 0;\n border-radius: 4px;\n transform: rotate(45deg);\n animation: bounceFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n@keyframes bounceFadeIn {\n from {\n transform: translate(0, -10px) rotate(45deg);\n opacity: 0;\n }\n\n to {\n transform: translate(0, 0) rotate(45deg);\n opacity: 1;\n }\n}"},{"created":"2024-01-18T12:12:28.000Z","isPrivate":0,"projectId":"71de0f","snapshot":"https://s1.qingting.work/runjs/2c2bccc96ffc.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by Bodyhc made with CSS | Uiverse.io","updated":"2024-01-18T14:12:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":999,"cssLen":2681,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n Sketch\n \n \n

\n","css":".checkbox-wrapper-16 *,\n .checkbox-wrapper-16 *:after,\n .checkbox-wrapper-16 *:before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-16 .checkbox-input {\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #2260ff;\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,\n .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 7rem;\n min-height: 7rem;\n border-radius: 0.5rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n transition: 0.15s ease;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:before {\n content: \"\";\n position: absolute;\n display: block;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n border-radius: 50%;\n top: 0.25rem;\n left: 0.25rem;\n opacity: 0;\n transform: scale(0);\n transition: 0.25s ease;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E\");\n background-size: 12px;\n background-repeat: no-repeat;\n background-position: 50% 50%;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover {\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-icon {\n transition: 0.375s ease;\n color: #494949;\n}\n\n.checkbox-wrapper-16 .checkbox-icon svg {\n width: 3rem;\n height: 3rem;\n}\n\n.checkbox-wrapper-16 .checkbox-label {\n color: #707070;\n transition: 0.375s ease;\n text-align: center;\n}"},{"created":"2024-01-18T12:12:03.000Z","isPrivate":0,"projectId":"60a734","snapshot":"https://s1.qingting.work/runjs/0edcb0ac6748.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by gagan-gv made with CSS | Uiverse.io","updated":"2024-01-18T14:12:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1281,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 25px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n background: black;\n border-radius: 50px;\n transition: all 0.7s;\n --spread: 20px;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background: black;\n box-shadow: -10px -10px var(--spread) 0px #5B51D8, 0 -10px var(--spread) 0px #833AB4, 10px -10px var(--spread) 0px #E1306C, 10px 0 var(--spread) 0px #FD1D1D, 10px 10px var(--spread) 0px #F77737, 0 10px var(--spread) 0px #FCAF45, -10px 10px var(--spread) 0px #FFDC80;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.25em;\n height: 0.5em;\n border: solid #f0f0f0;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}"},{"created":"2024-01-18T12:11:26.000Z","isPrivate":0,"projectId":"2ed4bb","snapshot":"https://s1.qingting.work/runjs/2dd6d71ce2d0.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by catraco made with CSS | Uiverse.io","updated":"2024-01-18T14:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1628,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n

","css":".heart-container {\n --heart-color: rgb(255, 91, 137);\n position: relative;\n width: 50px;\n height: 50px;\n transition: .3s;\n}\n\n.heart-container .checkbox {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 20;\n cursor: pointer;\n}\n\n.heart-container .svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.heart-container .svg-outline,\n .heart-container .svg-filled {\n fill: var(--heart-color);\n position: absolute;\n}\n\n.heart-container .svg-filled {\n animation: keyframes-svg-filled 1s;\n display: none;\n}\n\n.heart-container .svg-celebrate {\n position: absolute;\n animation: keyframes-svg-celebrate .5s;\n animation-fill-mode: forwards;\n display: none;\n stroke: var(--heart-color);\n fill: var(--heart-color);\n stroke-width: 2px;\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-filled {\n display: block\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-celebrate {\n display: block\n}\n\n@keyframes keyframes-svg-filled {\n 0% {\n transform: scale(0);\n }\n\n 25% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1);\n filter: brightness(1.5);\n }\n}\n\n@keyframes keyframes-svg-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n filter: brightness(1.5);\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n display: none;\n }\n}"}]}},"actionData":null,"errors":null}