Skip to content

Instantly share code, notes, and snippets.

@woshishabii

woshishabii/index.html

Created June 9, 2023 01:14
Show Gist options
  • Save woshishabii/45b1d818d5bfa6afeaccb97b71e176d2 to your computer and use it in GitHub Desktop.
Save woshishabii/45b1d818d5bfa6afeaccb97b71e176d2 to your computer and use it in GitHub Desktop.
Download ZIP
sunMoon switch
Raw
index.html
<svg id='imgs'>
<defs>
<g id="star">
<path id="path445" d="M 105.45181,97.567559 81.201944,94.103695 66.03057,113.33605 69.494434,89.086191 50.262075,73.914817 74.511938,77.378681 89.683312,58.146322 86.219448,82.396185 Z" transform="matrix(4.580287,-1.9961824,1.9961824,4.580287,-377.76186,-87.303715)" />
</g>
<g id="cloud">
<path id="path732" d="M 26.278986,1.5907338 A 6.5048339,6.5048339 0 0 0 21.637438,3.5442992 2.6019338,2.6019338 0 0 0 20.161877,3.085288 2.6019338,2.6019338 0 0 0 17.612389,5.1745792 3.9029005,3.9029005 0 0 0 16.535692,5.0230272 3.9029005,3.9029005 0 0 0 14.865842,5.3993362 3.7921798,3.7921798 0 0 0 11.663848,3.6388712 3.7921798,3.7921798 0 0 0 8.391813,5.5164632 2.4081727,2.4081727 0 0 0 7.1797871,5.1888252 2.4081727,2.4081727 0 0 0 4.7715635,7.5970472 2.4081727,2.4081727 0 0 0 7.1797871,10.00527 2.4081727,2.4081727 0 0 0 8.5421786,9.5826642 a 3.7921798,3.7921798 0 0 0 3.1216694,1.6405678 3.7921798,3.7921798 0 0 0 1.510382,-0.316559 3.9029005,3.9029005 0 0 0 3.361462,1.92191 3.9029005,3.9029005 0 0 0 3.639639,-2.495277 6.5048339,6.5048339 0 0 0 6.103655,4.266821 6.5048339,6.5048339 0 0 0 6.462951,-5.8049028 3.4876985,3.4876985 0 0 0 2.920654,-3.440206 A 3.4876985,3.4876985 0 0 0 32.1749,1.8673274 3.4876985,3.4876985 0 0 0 29.915064,2.7018565 6.5048339,6.5048339 0 0 0 26.278986,1.5907338 Z" />
</g>
<circle id="hole" cx="50" cy="50" r="50" />
</defs>
</svg>
<label id="switch">
<input type="checkbox">
<div class="sky" id="day">
<svg width="100%" height="100%">
<use xlink:href="#cloud" style="fill:#fff;transform:scale(6) translate(0px, 3px);" />
<use xlink:href="#cloud" style="fill:#fff; opacity:0.6; transform:scale(7) rotate(-1deg) translate(-7px, 2px);" />
</svg>
</div>
<div class="sky" id="night">
<svg width="100%" height="100%">
<use xlink:href="#star" style="transform:scale(0.03) translate(650px, 500px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.02) translate(1450px, 1500px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.025) translate(1500px, 1700px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.018) translate(1250px, 2000px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.028) translate(2000px, 600px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.021) translate(2200px, 1500px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.027) translate(2500px, 900px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.03) translate(2500px, 1350px);fill:#fff;"></use>
<use xlink:href="#star" style="transform:scale(0.03) translate(2100px, 1500px);fill:#fff;"></use>
</svg>
</div>
<div id="sunMoon">
<div id="moon">
<svg width="100%" height="100%">
<use xlink:href='#hole' style='fill:#999; transform:scale(0.18) translate(40px, 100px);'></use>
<use xlink:href='#hole' style='fill:#999; transform:scale(0.12) translate(180px, 50px);'></use>
<use xlink:href='#hole' style='fill:#999; transform:scale(0.1) translate(300px, 250px);'></use>
</svg>
</div>
</div>
</label>
Raw
style.scss
:root {
--trans: all 0.6s ease-in-out;
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
display: grid;
justify-content: center;
align-items: center;
background: #eee;
&:has(#switch input:checked) {
background: #555;
}
transition: var(--trans);
}
#imgs {
display: none;
}
#switch {
position: relative;
display: block;
width: 150px;
height: 60px;
border-radius: 30px;
transition: 0.3s all ease-in-out;
overflow: hidden;
& > input {
display: none;
}
div {
width: 100%;
height: 100%;
transition: var(--trans);
border-radius: 30px;
}
& > div {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3),
inset -3px -3px 6px rgba(0, 0, 0, 0.6);
& > svg {
transition: var(--trans);
}
}
#sunMoon {
overflow: hidden;
position: absolute;
left: 5px;
top: 5px;
width: 50px;
height: 50px;
background: #e5e15a;
border-radius: 100%;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2),
inset 3px 3px 3px rgba(255, 255, 255, 0.6),
inset -3px -3px 3px rgba(0, 0, 0, 0.2);
}
.sky {
background-size: 300px;
}
#day {
opacity: 1;
position: absolute;
--hue: 210;
background-image: radial-gradient(
circle,
hsl(var(--hue) 100% 90%) 0%,
hsl(var(--hue) 100% 90%) 30%,
hsl(var(--hue) 100% 85%) 32%,
hsl(var(--hue) 100% 85%) 40%,
hsl(var(--hue) 100% 80%) 42%,
hsl(var(--hue) 100% 80%) 50%,
hsl(var(--hue) 100% 75%) 52%,
hsl(var(--hue) 100% 75%) 60%,
hsl(var(--hue) 100% 70%) 62%,
hsl(var(--hue) 100% 70%) 100%
);
background-position-x: 170px;
svg {
transform-origin: left top;
transform: rotate(0deg);
}
}
#night {
opacity: 0;
position: absolute;
--hue: 210;
background-image: radial-gradient(
circle,
hsl(var(--hue) 0% 50%) 0%,
hsl(var(--hue) 0% 50%) 30%,
hsl(var(--hue) 0% 45%) 32%,
hsl(var(--hue) 0% 45%) 40%,
hsl(var(--hue) 0% 40%) 42%,
hsl(var(--hue) 0% 40%) 50%,
hsl(var(--hue) 0% 35%) 52%,
hsl(var(--hue) 0% 35%) 60%,
hsl(var(--hue) 0% 30%) 62%,
hsl(var(--hue) 0% 30%) 100%
);
background-position-x: -170px;
svg {
transform-origin: 500px 60px;
transform: rotate(6deg);
}
}
#moon {
background: #bbb;
position: relative;
opacity: 0.8;
left: 120%;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2),
inset 3px 3px 3px rgba(255, 255, 255, 0.6),
inset -3px -3px 3px rgba(0, 0, 0, 0.2);
}
&:has(input:checked) {
#day {
opacity: 0;
background-position-x: 300px;
svg {
transform: rotate(15deg);
}
}
#night {
opacity: 1;
background-position-x: -20px;
svg {
transform: rotate(0deg);
}
}
#sunMoon {
left: 95px;
}
#moon {
left: 0;
opacity: 1;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment