Pen
React + Tailwind
const css = `
.toggle-pen { position: relative; display: inline-flex; align-items: center; gap: 14px; color: light-dark(#42454c, #e5e6e9); font-size: 14px; cursor: pointer; user-select: none; }
.toggle-pen__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle-pen__scene { position: relative; flex: none; }
.toggle-pen__input:focus-visible + .toggle-pen__scene { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 4px; border-radius: 8px; }
.toggle-pen__scene { width: 96px; height: 40px; }
.toggle-pen__body { position: absolute; left: 14px; top: 15px; width: 52px; height: 11px; border-radius: 3px 6px 6px 3px; background: linear-gradient(light-dark(#5f626a, #a7abb2), light-dark(#cbced3, #393c41)); }
.toggle-pen__nib { position: absolute; left: 2px; top: 16px; width: 14px; height: 9px; background: light-dark(#42454c, #e5e6e9); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.toggle-pen__nib::after { content: ''; position: absolute; left: 4px; top: 4px; width: 9px; height: 1px; background: light-dark(#dbdde1, #2e3035); }
/* The cap slides off the nib end and parks behind the barrel. */
.toggle-pen__cap { position: absolute; left: 0; top: 13px; width: 30px; height: 15px; border-radius: 7px 4px 4px 7px; background: linear-gradient(light-dark(#42454c, #e5e6e9), light-dark(#5f626a, #a7abb2)); box-shadow: 0 2px 4px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.35)); transition: transform 0.5s cubic-bezier(0.5, 0, 0.3, 1.3); }
.toggle-pen__cap::after { content: ''; position: absolute; left: 6px; top: -3px; width: 18px; height: 3px; border-radius: 2px; background: light-dark(#50535b, #c6c8cd); }
.toggle-pen__ink { position: absolute; left: -2px; top: 26px; width: 42px; height: 14px; overflow: visible; }
.toggle-pen__ink path { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.2s, opacity 0s 0.2s; }
.toggle-pen__input:checked + .toggle-pen__scene .toggle-pen__cap { transform: translateX(60px); }
.toggle-pen__input:checked + .toggle-pen__scene .toggle-pen__ink path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.6s ease-out 0.35s, opacity 0s 0.35s; }
@media (prefers-reduced-motion: reduce) {
.toggle-pen * { transition: none !important; }
}
`;
export function PenToggle() {
return (
<>
<style>
{css}
</style>
<label className="toggle-pen">
<input className="toggle-pen__input" type="checkbox" role="switch" />
<span className="toggle-pen__scene" aria-hidden="true">
<svg className="toggle-pen__ink" viewBox="0 0 42 14">
<path d="M4 3C8 10 12 2 16 8S24 4 28 9S36 5 40 7" pathLength={1} />
</svg>
<span className="toggle-pen__nib" />
<span className="toggle-pen__body" />
<span className="toggle-pen__cap" />
</span>
Edit mode
</label>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<label class="toggle-pen"><input class="toggle-pen__input" type="checkbox" role="switch"/><span class="toggle-pen__scene" aria-hidden="true"><svg class="toggle-pen__ink" viewBox="0 0 42 14"><path d="M4 3C8 10 12 2 16 8S24 4 28 9S36 5 40 7" pathLength="1"></path></svg><span class="toggle-pen__nib"></span><span class="toggle-pen__body"></span><span class="toggle-pen__cap"></span></span>Edit mode</label>CSS
.toggle-pen { position: relative; display: inline-flex; align-items: center; gap: 14px; color: light-dark(#42454c, #e5e6e9); font-size: 14px; cursor: pointer; user-select: none; }
.toggle-pen__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle-pen__scene { position: relative; flex: none; }
.toggle-pen__input:focus-visible + .toggle-pen__scene { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 4px; border-radius: 8px; }
.toggle-pen__scene { width: 96px; height: 40px; }
.toggle-pen__body { position: absolute; left: 14px; top: 15px; width: 52px; height: 11px; border-radius: 3px 6px 6px 3px; background: linear-gradient(light-dark(#5f626a, #a7abb2), light-dark(#cbced3, #393c41)); }
.toggle-pen__nib { position: absolute; left: 2px; top: 16px; width: 14px; height: 9px; background: light-dark(#42454c, #e5e6e9); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.toggle-pen__nib::after { content: ''; position: absolute; left: 4px; top: 4px; width: 9px; height: 1px; background: light-dark(#dbdde1, #2e3035); }
/* The cap slides off the nib end and parks behind the barrel. */
.toggle-pen__cap { position: absolute; left: 0; top: 13px; width: 30px; height: 15px; border-radius: 7px 4px 4px 7px; background: linear-gradient(light-dark(#42454c, #e5e6e9), light-dark(#5f626a, #a7abb2)); box-shadow: 0 2px 4px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.35)); transition: transform 0.5s cubic-bezier(0.5, 0, 0.3, 1.3); }
.toggle-pen__cap::after { content: ''; position: absolute; left: 6px; top: -3px; width: 18px; height: 3px; border-radius: 2px; background: light-dark(#50535b, #c6c8cd); }
.toggle-pen__ink { position: absolute; left: -2px; top: 26px; width: 42px; height: 14px; overflow: visible; }
.toggle-pen__ink path { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.2s, opacity 0s 0.2s; }
.toggle-pen__input:checked + .toggle-pen__scene .toggle-pen__cap { transform: translateX(60px); }
.toggle-pen__input:checked + .toggle-pen__scene .toggle-pen__ink path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.6s ease-out 0.35s, opacity 0s 0.35s; }
@media (prefers-reduced-motion: reduce) {
.toggle-pen * { transition: none !important; }
}Goal: Create a "Pen" toggle.
Visual behavior: An edit mode switch drawn as a fountain pen: switching on, the cap slides off the nib and parks behind the barrel, and the nib writes a little line of ink.
Technique:
- A real native checkbox with role="switch" (visually hidden: absolute, 1x1, opacity 0) inside a <label>; every visual is aria-hidden and styled from the input with :checked + sibling selectors.
- The cap translates along the barrel on a curve with a slight overshoot.
- The ink is an SVG path with pathLength="1" whose dash offset transitions to 0 after the cap is clear; switching off, it vanishes at once.
Accessibility: A native checkbox with role="switch" inside a <label>, so Space toggles it and screen readers announce a switch; the visible label names it and :focus-visible on the input outlines the visual. Under prefers-reduced-motion the cap and ink change instantly.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Pen" toggle.
Visual behavior: An edit mode switch drawn as a fountain pen: switching on, the cap slides off the nib and parks behind the barrel, and the nib writes a little line of ink.
Technique:
- A real native checkbox with role="switch" (visually hidden: absolute, 1x1, opacity 0) inside a <label>; every visual is aria-hidden and styled from the input with :checked + sibling selectors.
- The cap translates along the barrel on a curve with a slight overshoot.
- The ink is an SVG path with pathLength="1" whose dash offset transitions to 0 after the cap is clear; switching off, it vanishes at once.
Accessibility: A native checkbox with role="switch" inside a <label>, so Space toggles it and screen readers announce a switch; the visible label names it and :focus-visible on the input outlines the visual. Under prefers-reduced-motion the cap and ink change instantly.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
An edit mode switch drawn as a fountain pen: switching on, the cap slides off the nib and parks behind the barrel, and the nib writes a little line of ink.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- click, state change, draw
- Techniques
- css transition, svg, stroke dashoffset, clip path
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
A native checkbox with role="switch" inside a <label>, so Space toggles it and screen readers announce a switch; the visible label names it and :focus-visible on the input outlines the visual. Under prefers-reduced-motion the cap and ink change instantly.