Pencil Loader Animation: DevCanvas

[{"id":100,"created_at":"2023-12-03T04:20:29.861955+00:00","html":"\n\nDevCanvas\n\n\n\n\n\n","css":"* {\n border: 0;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n:root {\n --hue: 22;\n --bg: rgb(212, 241, 255);\n --fg: black;\n --trans-dur: 0.3s;\n font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));\n}\n\nbody {\n background: var(--bg);\n color: var(--fg);\n font: 1em/1.5 sans-serif;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n\n.pencil {\n display: block;\n width: 10em;\n height: 10em;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3,\n.pencil__eraser,\n.pencil__eraser-skew,\n.pencil__point,\n.pencil__rotate,\n.pencil__stroke {\n animation-duration: 3s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3 {\n transform: rotate(-90deg);\n}\n\n.pencil__body1 {\n animation-name: pencilBody1;\n}\n\n.pencil__body2 {\n animation-name: pencilBody2;\n}\n\n.pencil__body3 {\n animation-name: pencilBody3;\n}\n\n.pencil__eraser {\n animation-name: pencilEraser;\n transform: rotate(-90deg) translate(49px, 0);\n}\n\n.pencil__eraser-skew {\n animation-name: pencilEraserSkew;\n animation-timing-function: ease-in-out;\n}\n\n.pencil__point {\n animation-name: pencilPoint;\n transform: rotate(-90deg) translate(49px, -30px);\n}\n\n.pencil__rotate {\n animation-name: pencilRotate;\n}\n\n.pencil__stroke {\n animation-name: pencilStroke;\n transform: translate(100px, 100px) rotate(-113deg);\n}\n\n/* Animations */\n@keyframes pencilBody1 {\n\n from,\n to {\n stroke-dashoffset: 351.86;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 150.8;\n /* 3/8 of diameter */\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody2 {\n\n from,\n to {\n stroke-dashoffset: 406.84;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 174.36;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody3 {\n\n from,\n to {\n stroke-dashoffset: 296.88;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 127.23;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilEraser {\n\n from,\n to {\n transform: rotate(-45deg) translate(49px, 0);\n }\n\n 50% {\n transform: rotate(0deg) translate(49px, 0);\n }\n}\n\n\n@keyframes pencilPoint {\n\n from,\n to {\n transform: rotate(-90deg) translate(49px, -30px);\n }\n\n 50% {\n transform: rotate(-225deg) translate(49px, -30px);\n }\n}\n\n@keyframes pencilRotate {\n from {\n transform: translate(100px, 100px) rotate(0);\n }\n\n to {\n transform: translate(100px, 100px) rotate(720deg);\n }\n}\n\n@keyframes pencilStroke {\n from {\n stroke-dashoffset: 439.82;\n transform: translate(100px, 100px) rotate(-113deg);\n }\n\n 50% {\n stroke-dashoffset: 164.93;\n transform: translate(100px, 100px) rotate(-113deg);\n }\n\n 75%,\n to {\n stroke-dashoffset: 439.82;\n transform: translate(100px, 100px) rotate(112deg);\n }\n}\n\n\n\n\n\n","js":"//","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"BzBmRi","description":"Pencil Loader Animation: DevCanvas","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"role\":\"user\",\"content\":\"This is my current code\",\"messageId\":\"1a9e0436-1518-4022-875b-50cdd3334e92\"},{\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tPencil Loader Animation: DevCanvas\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t\\r\\n\\r\\nDevCanvas\\n\\t\\t\\n \\n\\t\\n\",\"messageId\":\"cf412950-7731-4586-b67e-266d4f816c0d\"},{\"role\":\"user\",\"content\":\"i want the colors of this pencil to be between or even a gradient of tailwind sky-300 & sky-400\",\"messageId\":\"c2afa90c-33fa-4724-b5a0-8c9861bd8e50\"},{\"role\":\"assistant\",\"content\":\"\\n\\n\\n\\n \\n \\n Sky Gradient Pencil Loader\\n \\n \\n\\n\\n \\n\\n\\n\",\"messageId\":\"b0e32b6a-c9b0-4500-a257-3145ecbd258c\"},{\"role\":\"user\",\"content\":\"add a setting to tweek the spead and stuff\",\"messageId\":\"c1286e22-5805-43de-924f-ea327fa036e1\"},{\"role\":\"assistant\",\"content\":\"\\n\\n\\n\\n \\n \\n Sky Gradient Pencil Loader with Speed Control\\n \\n \\n\\n\\n

\\n Animation Speed (seconds)\\n \\n

\\n\\n \\n\\n \\n\\n\\n\",\"messageId\":\"2052141e-6a65-4a1f-a9e4-24062eae8b94\"},{\"role\":\"user\",\"content\":\"the speed is not updated\",\"messageId\":\"9f778483-0095-4727-aef7-e7c10e7beb1b\"},{\"role\":\"assistant\",\"content\":\"\\n\\n\\n\\n \\n \\n Sky Gradient Pencil Loader with Speed Control\\n \\n \\n\\n\\n

\\n Animation Speed (seconds)\\n \\n

\\n\\n \\n\\n \\n\\n\\n\",\"messageId\":\"6a1d5f2b-8816-4528-a500-ecdada4e0e22\"}]","view":[{"views":665}],"profiles":{"username":"devcanvas"}}]