Pulsing Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Fading Switch
A pure-CSS switch with pulse, fade and SVG effects, animating only GPU-friendly properties. Created by Type-Delta on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.4 KB gzip
Created by @Type-Delta on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Pulsing Fading Switch" by Type-Delta on Uiverse.io · MIT License · https://uiverse.io/Type-Delta/smart-fox-47 -->
<label
type="checkbox"
class="reduceMotionToggle st-reduceMotionToggleBtn"
for="reduceMotionToggle"
>
<input
class="reduceMotionToggleInput"
id="reduceMotionToggle"
type="checkbox"
/>
<svg
stroke-width="0"
stroke="currentColor"
fill="currentColor"
viewBox="0 0 18 18"
height="18"
width="18"
>
<mask id="lineMask">
<rect fill="white" height="18" width="18"></rect>
<rect
fill="black"
style="rotate: 30deg;"
height="16"
width="4.1"
y="-5"
x="9.807"
class="line"
></rect>
</mask>
<rect
style="rotate: 30deg;"
height="13"
width="1.3"
y="-3.3"
x="11.3"
class="line"
></rect>
<g mask="url(#lineMask)">
<circle
style="--_toCenterXOffset: 5.76px;--_appearOffset: -.1s;"
fill="none"
stroke-width=".1"
r="2.95"
cy="9"
cx="3.24"
class="ballTrace"
></circle>
<circle
style="--_toCenterXOffset: 3px;--_appearOffset: .02s;"
fill="none"
stroke-width=".2"
r="2.9"
cy="9"
cx="6"
class="ballTrace"
></circle>
<circle
style="--_toCenterXOffset: 0px;--_appearOffset: .07s;"
fill="none"
stroke-width=".3"
r="2.8"
cy="9"
cx="9"
class="ballTrace"
></circle>
<circle
style="--_toCenterXOffset: -2.75px;--_appearOffset: .13s;"
fill="none"
stroke-width=".4"
r="2.75"
cy="9"
cx="11.75"
class="ballTrace"
></circle>
<circle
style="--_toCenterXOffset: -5.7px;"
r="3"
cy="9"
cx="14.7"
class="ball"
></circle>
</g>
</svg>
</label>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent) on .reduceMotionToggle to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Plant Seed Switch
Toggles · @shadowfax29
- No JS
- Reduced-motion ready
Like Heart Switch
Toggles · @TroyRandall
- GPU-friendly
- No JS
- Reduced-motion ready
Action Download Switch
Toggles · @Na3ar-17
- No JS
- Reduced-motion ready
Gradient Switch
Toggles · @MuhammadHasann
- No JS
- Reduced-motion ready
Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS