Doodle Radial Arrow Menu

[{"id":"b8c93512-4d2a-4ad4-bd72-282af7aeb98f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"21679803-c4f1-4893-8600-02f97386a2da","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n}\\n\\n.radial-menu-container {\\n --ink: #1f2937;\\n --c-blue: #89b4ff;\\n --c-red: #ff8989;\\n --c-yellow: #ffdf70;\\n --c-green: #89ffb4;\\n\\n --radius-1: 50% 45% 55% 40% / 55% 45% 50% 50%;\\n --radius-2: 40% 60% 45% 55% / 50% 55% 40% 60%;\\n --radius-3: 55% 45% 50% 55% / 45% 55% 60% 40%;\\n\\n position: relative;\\n width: min(100%, 420px);\\n aspect-ratio: 1 / 1;\\n margin: 0 auto;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 14px;\\n font-family: \\\"Comic Sans MS\\\", \\\"Chalkboard SE\\\", \\\"Marker Felt\\\", sans-serif;\\n background: transparent;\\n padding: 20px;\\n overflow: hidden;\\n}\\n\\n.radial-menu-container .doodle-decorations {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n pointer-events: none;\\n z-index: 0;\\n opacity: 0;\\n transform: scale(0.9);\\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n}\\n\\n.radial-menu-container:has(.menu-toggle:checked) .doodle-decorations {\\n opacity: 1;\\n transform: scale(1);\\n}\\n\\n.radial-menu-container .menu-toggle {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.radial-menu-container .center-icon {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n width: 4.4em;\\n height: 4.4em;\\n transform: translate(-50%, -50%);\\n background: #ffffff;\\n border: 3.5px solid var(--ink);\\n border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n z-index: 100;\\n color: var(--ink);\\n box-shadow: 5px 5px 0px var(--ink);\\n transition:\\n transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),\\n box-shadow 0.2s ease;\\n}\\n\\n.radial-menu-container .center-icon:hover {\\n transform: translate(-50%, -50%) scale(1.05) rotate(-3deg);\\n box-shadow: 7px 7px 0px var(--c-blue);\\n}\\n\\n.radial-menu-container .center-icon:active {\\n transform: translate(-50%, -50%) scale(0.95);\\n box-shadow: 2px 2px 0px var(--ink);\\n}\\n\\n.radial-menu-container .center-arrow-icon {\\n width: 2.4em;\\n height: 2.4em;\\n transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .center-icon .center-arrow-icon {\\n transform: rotate(180deg) scale(0.9);\\n}\\n\\n.radial-menu-container .connection-lines {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n pointer-events: none;\\n z-index: 1;\\n overflow: visible;\\n}\\n\\n.radial-menu-container .line {\\n fill: none;\\n stroke-width: 4.5;\\n stroke-linecap: round;\\n opacity: 0;\\n stroke-dasharray: 200;\\n stroke-dashoffset: 200;\\n filter: url(#handDrawn) drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.1));\\n transition:\\n opacity 0.3s ease,\\n stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.radial-menu-container .line-1,\\n.radial-menu-container .line-5 {\\n stroke: var(--c-red);\\n}\\n\\n.radial-menu-container .line-2,\\n.radial-menu-container .line-6 {\\n stroke: var(--c-blue);\\n}\\n\\n.radial-menu-container .line-3,\\n.radial-menu-container .line-7 {\\n stroke: var(--c-yellow);\\n}\\n\\n.radial-menu-container .line-4,\\n.radial-menu-container .line-8 {\\n stroke: var(--c-green);\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line {\\n opacity: 1;\\n stroke-dashoffset: 0;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-1 {\\n transition-delay: 0.05s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-2 {\\n transition-delay: 0.1s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-3 {\\n transition-delay: 0.15s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-4 {\\n transition-delay: 0.2s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-5 {\\n transition-delay: 0.25s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-6 {\\n transition-delay: 0.3s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-7 {\\n transition-delay: 0.35s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-8 {\\n transition-delay: 0.4s;\\n}\\n\\n.radial-menu-container .menu-item {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n opacity: 0;\\n transform: translate(-50%, -50%) scale(0) rotate(-20deg);\\n transition:\\n opacity 0.35s ease,\\n top 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55),\\n left 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55),\\n transform 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n z-index: 10;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .menu-item {\\n opacity: 1;\\n transform: translate(-50%, -50%) scale(1) rotate(0deg);\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-1 {\\n top: 15%;\\n left: 50%;\\n transition-delay: 0.08s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-2 {\\n top: 25.25%;\\n left: 74.75%;\\n transition-delay: 0.13s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-3 {\\n top: 50%;\\n left: 85%;\\n transition-delay: 0.18s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-4 {\\n top: 74.75%;\\n left: 74.75%;\\n transition-delay: 0.23s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-5 {\\n top: 85%;\\n left: 50%;\\n transition-delay: 0.28s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-6 {\\n top: 74.75%;\\n left: 25.25%;\\n transition-delay: 0.33s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-7 {\\n top: 50%;\\n left: 15%;\\n transition-delay: 0.38s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-8 {\\n top: 25.25%;\\n left: 25.25%;\\n transition-delay: 0.43s;\\n}\\n\\n.radial-menu-container .icon-circle {\\n position: relative;\\n width: 3.2em;\\n height: 3.2em;\\n background: #ffffff;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n border: 3px solid var(--ink);\\n padding: 0;\\n color: var(--ink);\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease;\\n}\\n\\n.radial-menu-container .radial-arrow-icon {\\n width: 1.8em;\\n height: 1.8em;\\n color: var(--ink);\\n}\\n\\n.radial-menu-container .item-1 .icon-circle,\\n.radial-menu-container .item-5 .icon-circle {\\n border-radius: var(--radius-1);\\n box-shadow: 4px 4px 0px var(--c-red);\\n}\\n\\n.radial-menu-container .item-2 .icon-circle,\\n.radial-menu-container .item-6 .icon-circle {\\n border-radius: var(--radius-2);\\n box-shadow: -4px 4px 0px var(--c-blue);\\n}\\n\\n.radial-menu-container .item-3 .icon-circle,\\n.radial-menu-container .item-7 .icon-circle {\\n border-radius: var(--radius-3);\\n box-shadow: 4px -4px 0px var(--c-yellow);\\n}\\n\\n.radial-menu-container .item-4 .icon-circle,\\n.radial-menu-container .item-8 .icon-circle {\\n border-radius: var(--radius-1);\\n box-shadow: -4px -4px 0px var(--c-green);\\n}\\n\\n@keyframes sticker-wiggle {\\n 0% {\\n transform: scale(1.15) rotate(-6deg);\\n }\\n\\n 50% {\\n transform: scale(1.15) rotate(6deg);\\n }\\n\\n 100% {\\n transform: scale(1.15) rotate(-6deg);\\n }\\n}\\n\\n.radial-menu-container .icon-circle:hover {\\n animation: sticker-wiggle 0.4s ease-in-out infinite;\\n box-shadow: 6px 6px 0px var(--ink) !important;\\n z-index: 20;\\n}\\n\\n.radial-menu-container .icon-circle::after {\\n content: attr(data-tooltip);\\n position: absolute;\\n bottom: 130%;\\n left: 50%;\\n transform: translateX(-50%) translateY(10px) rotate(-3deg) scale(0.8);\\n background: #ffffff;\\n color: var(--ink);\\n border: 2px solid var(--ink);\\n border-radius: 12px 12px 12px 0;\\n padding: 0.4em 0.8em;\\n font-size: 0.85em;\\n font-weight: bold;\\n white-space: nowrap;\\n opacity: 0;\\n pointer-events: none;\\n box-shadow: 3px 3px 0px var(--c-yellow);\\n transition:\\n opacity 0.2s ease,\\n transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n z-index: 999;\\n}\\n\\n.radial-menu-container .icon-circle:hover::after,\\n.radial-menu-container .icon-circle:focus-visible::after {\\n opacity: 1;\\n transform: translateX(-50%) translateY(0) rotate(-3deg) scale(1);\\n}\\n\\n@keyframes subtle-float {\\n 0%,\\n 100% {\\n transform: translate(-50%, -50%) translateY(0);\\n }\\n\\n 50% {\\n transform: translate(-50%, -50%) translateY(-5px);\\n }\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-1 {\\n animation: subtle-float 3s ease-in-out infinite 0.1s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-2 {\\n animation: subtle-float 3.2s ease-in-out infinite 0.3s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-3 {\\n animation: subtle-float 2.8s ease-in-out infinite 0.5s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-4 {\\n animation: subtle-float 3.5s ease-in-out infinite 0.2s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-5 {\\n animation: subtle-float 3.1s ease-in-out infinite 0.4s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-6 {\\n animation: subtle-float 2.9s ease-in-out infinite 0.6s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-7 {\\n animation: subtle-float 3.4s ease-in-out infinite 0.1s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-8 {\\n animation: subtle-float 3.3s ease-in-out infinite 0.7s;\\n}\\n\\n@media (max-width: 480px) {\\n .radial-menu-container {\\n font-size: 11px;\\n }\\n\\n .radial-menu-container .icon-circle::after {\\n display: none;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .radial-menu-container *,\\n .radial-menu-container *::before,\\n .radial-menu-container *::after {\\n transition: none !important;\\n animation: none !important;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Doodle Radial Arrow Menu\\n \\n \\n \\n

\\n \\n\\n \\n\\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n

\\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"41009c4a-2bda-4068-aa23-337aada016c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d644aa61-1322-4372-b7ea-b266ac7abf13","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"794a27fc-6bd1-423b-8d4a-add8e7b5d719","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Doodle Radial Arrow Menu\\n \\n \\n \\n

\\n \\n\\n \\n\\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n

\\n \\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"152d0745-b9ee-4699-a14f-0911753b8526","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"aa2b3ce2-699f-48b7-857b-68248ca21bfa","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n}\\n\\n.radial-menu-container {\\n --ink: #1f2937;\\n --c-blue: #89b4ff;\\n --c-red: #ff8989;\\n --c-yellow: #ffdf70;\\n --c-green: #89ffb4;\\n\\n --radius-1: 50% 45% 55% 40% / 55% 45% 50% 50%;\\n --radius-2: 40% 60% 45% 55% / 50% 55% 40% 60%;\\n --radius-3: 55% 45% 50% 55% / 45% 55% 60% 40%;\\n\\n position: relative;\\n width: min(100%, 420px);\\n aspect-ratio: 1 / 1;\\n margin: 0 auto;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 14px;\\n font-family: \\\"Comic Sans MS\\\", \\\"Chalkboard SE\\\", \\\"Marker Felt\\\", sans-serif;\\n background: transparent;\\n padding: 20px;\\n overflow: hidden;\\n}\\n\\n.radial-menu-container .doodle-decorations {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n pointer-events: none;\\n z-index: 0;\\n opacity: 0;\\n transform: scale(0.9);\\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n}\\n\\n.radial-menu-container:has(.menu-toggle:checked) .doodle-decorations {\\n opacity: 1;\\n transform: scale(1);\\n}\\n\\n.radial-menu-container .menu-toggle {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.radial-menu-container .center-icon {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n width: 4.4em;\\n height: 4.4em;\\n transform: translate(-50%, -50%);\\n background: #ffffff;\\n border: 3.5px solid var(--ink);\\n border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n z-index: 100;\\n color: var(--ink);\\n box-shadow: 5px 5px 0px var(--ink);\\n transition:\\n transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),\\n box-shadow 0.2s ease;\\n}\\n\\n.radial-menu-container .center-icon:hover {\\n transform: translate(-50%, -50%) scale(1.05) rotate(-3deg);\\n box-shadow: 7px 7px 0px var(--c-blue);\\n}\\n\\n.radial-menu-container .center-icon:active {\\n transform: translate(-50%, -50%) scale(0.95);\\n box-shadow: 2px 2px 0px var(--ink);\\n}\\n\\n.radial-menu-container .center-arrow-icon {\\n width: 2.4em;\\n height: 2.4em;\\n transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .center-icon .center-arrow-icon {\\n transform: rotate(180deg) scale(0.9);\\n}\\n\\n.radial-menu-container .connection-lines {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n pointer-events: none;\\n z-index: 1;\\n overflow: visible;\\n}\\n\\n.radial-menu-container .line {\\n fill: none;\\n stroke-width: 4.5;\\n stroke-linecap: round;\\n opacity: 0;\\n stroke-dasharray: 200;\\n stroke-dashoffset: 200;\\n filter: url(#handDrawn) drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.1));\\n transition:\\n opacity 0.3s ease,\\n stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n.radial-menu-container .line-1,\\n.radial-menu-container .line-5 {\\n stroke: var(--c-red);\\n}\\n\\n.radial-menu-container .line-2,\\n.radial-menu-container .line-6 {\\n stroke: var(--c-blue);\\n}\\n\\n.radial-menu-container .line-3,\\n.radial-menu-container .line-7 {\\n stroke: var(--c-yellow);\\n}\\n\\n.radial-menu-container .line-4,\\n.radial-menu-container .line-8 {\\n stroke: var(--c-green);\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line {\\n opacity: 1;\\n stroke-dashoffset: 0;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-1 {\\n transition-delay: 0.05s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-2 {\\n transition-delay: 0.1s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-3 {\\n transition-delay: 0.15s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-4 {\\n transition-delay: 0.2s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-5 {\\n transition-delay: 0.25s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-6 {\\n transition-delay: 0.3s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-7 {\\n transition-delay: 0.35s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .connection-lines .line-8 {\\n transition-delay: 0.4s;\\n}\\n\\n.radial-menu-container .menu-item {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n opacity: 0;\\n transform: translate(-50%, -50%) scale(0) rotate(-20deg);\\n transition:\\n opacity 0.35s ease,\\n top 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55),\\n left 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55),\\n transform 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n z-index: 10;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .menu-item {\\n opacity: 1;\\n transform: translate(-50%, -50%) scale(1) rotate(0deg);\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-1 {\\n top: 15%;\\n left: 50%;\\n transition-delay: 0.08s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-2 {\\n top: 25.25%;\\n left: 74.75%;\\n transition-delay: 0.13s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-3 {\\n top: 50%;\\n left: 85%;\\n transition-delay: 0.18s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-4 {\\n top: 74.75%;\\n left: 74.75%;\\n transition-delay: 0.23s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-5 {\\n top: 85%;\\n left: 50%;\\n transition-delay: 0.28s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-6 {\\n top: 74.75%;\\n left: 25.25%;\\n transition-delay: 0.33s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-7 {\\n top: 50%;\\n left: 15%;\\n transition-delay: 0.38s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-8 {\\n top: 25.25%;\\n left: 25.25%;\\n transition-delay: 0.43s;\\n}\\n\\n.radial-menu-container .icon-circle {\\n position: relative;\\n width: 3.2em;\\n height: 3.2em;\\n background: #ffffff;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n border: 3px solid var(--ink);\\n padding: 0;\\n color: var(--ink);\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease;\\n}\\n\\n.radial-menu-container .radial-arrow-icon {\\n width: 1.8em;\\n height: 1.8em;\\n color: var(--ink);\\n}\\n\\n.radial-menu-container .item-1 .icon-circle,\\n.radial-menu-container .item-5 .icon-circle {\\n border-radius: var(--radius-1);\\n box-shadow: 4px 4px 0px var(--c-red);\\n}\\n\\n.radial-menu-container .item-2 .icon-circle,\\n.radial-menu-container .item-6 .icon-circle {\\n border-radius: var(--radius-2);\\n box-shadow: -4px 4px 0px var(--c-blue);\\n}\\n\\n.radial-menu-container .item-3 .icon-circle,\\n.radial-menu-container .item-7 .icon-circle {\\n border-radius: var(--radius-3);\\n box-shadow: 4px -4px 0px var(--c-yellow);\\n}\\n\\n.radial-menu-container .item-4 .icon-circle,\\n.radial-menu-container .item-8 .icon-circle {\\n border-radius: var(--radius-1);\\n box-shadow: -4px -4px 0px var(--c-green);\\n}\\n\\n@keyframes sticker-wiggle {\\n 0% {\\n transform: scale(1.15) rotate(-6deg);\\n }\\n\\n 50% {\\n transform: scale(1.15) rotate(6deg);\\n }\\n\\n 100% {\\n transform: scale(1.15) rotate(-6deg);\\n }\\n}\\n\\n.radial-menu-container .icon-circle:hover {\\n animation: sticker-wiggle 0.4s ease-in-out infinite;\\n box-shadow: 6px 6px 0px var(--ink) !important;\\n z-index: 20;\\n}\\n\\n.radial-menu-container .icon-circle::after {\\n content: attr(data-tooltip);\\n position: absolute;\\n bottom: 130%;\\n left: 50%;\\n transform: translateX(-50%) translateY(10px) rotate(-3deg) scale(0.8);\\n background: #ffffff;\\n color: var(--ink);\\n border: 2px solid var(--ink);\\n border-radius: 12px 12px 12px 0;\\n padding: 0.4em 0.8em;\\n font-size: 0.85em;\\n font-weight: bold;\\n white-space: nowrap;\\n opacity: 0;\\n pointer-events: none;\\n box-shadow: 3px 3px 0px var(--c-yellow);\\n transition:\\n opacity 0.2s ease,\\n transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);\\n z-index: 999;\\n}\\n\\n.radial-menu-container .icon-circle:hover::after,\\n.radial-menu-container .icon-circle:focus-visible::after {\\n opacity: 1;\\n transform: translateX(-50%) translateY(0) rotate(-3deg) scale(1);\\n}\\n\\n@keyframes subtle-float {\\n 0%,\\n 100% {\\n transform: translate(-50%, -50%) translateY(0);\\n }\\n\\n 50% {\\n transform: translate(-50%, -50%) translateY(-5px);\\n }\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-1 {\\n animation: subtle-float 3s ease-in-out infinite 0.1s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-2 {\\n animation: subtle-float 3.2s ease-in-out infinite 0.3s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-3 {\\n animation: subtle-float 2.8s ease-in-out infinite 0.5s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-4 {\\n animation: subtle-float 3.5s ease-in-out infinite 0.2s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-5 {\\n animation: subtle-float 3.1s ease-in-out infinite 0.4s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-6 {\\n animation: subtle-float 2.9s ease-in-out infinite 0.6s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-7 {\\n animation: subtle-float 3.4s ease-in-out infinite 0.1s;\\n}\\n\\n.radial-menu-container .menu-toggle:checked ~ .item-8 {\\n animation: subtle-float 3.3s ease-in-out infinite 0.7s;\\n}\\n\\n@media (max-width: 480px) {\\n .radial-menu-container {\\n font-size: 11px;\\n }\\n\\n .radial-menu-container .icon-circle::after {\\n display: none;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .radial-menu-container *,\\n .radial-menu-container *::before,\\n .radial-menu-container *::after {\\n transition: none !important;\\n animation: none !important;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3b68510-dc9e-4d75-bf26-2cde599a5692","type":"divider","props":{},"children":[]},{"id":"218ac13f-69c5-42ae-9e14-21792bd30756","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4ae11eed-6b01-456d-afe3-7a44b265c407","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"9068aae5-112c-4559-a5a6-d0b63d4c6742","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Name\n\nDoodle Radial Arrow Menu.","styles":{}}],"children":[]},{"id":"64e905b0-f596-4bf8-b001-fbc7a5507f5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Flow\n\nAll menu item icons are now the same arrow SVG.","styles":{}}],"children":[]},{"id":"9d74d61b-cb22-4ee4-bc90-b2bfb3955666","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e1079f31-5039-4eed-999b-a32cf40464e4","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"pafv3fidz\",\"name\":\"code.html\",\"code\":\"\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc68e9e1-f9ac-4ef5-ad96-6101ace92f56","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Center Icon Flow\n\nThe center icon is also changed to a simple arrow.","styles":{}}],"children":[]},{"id":"c07235de-cce8-4f70-8a87-2e54cd5aad0b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"q1oxban3b\",\"name\":\"code.html\",\"code\":\"