Skip to content

Instantly share code, notes, and snippets.

@thebluefish
Last active October 27, 2023 19:58
Show Gist options
  • Save thebluefish/fbe784e6ebcc1b21ae7edbf029723860 to your computer and use it in GitHub Desktop.
Save thebluefish/fbe784e6ebcc1b21ae7edbf029723860 to your computer and use it in GitHub Desktop.
<!-- Avilable under MIT, Apache-2.0, The Unlicense, or the WTFPL at your choice -->
<svg class="eye" class:eye-open={$is_connected} viewBox="0 -150 400 300" width="80" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="32" fill="none">
<path d={top_path} stroke="currentColor">
<animate bind:this={eyecon_close_top_anim} dur="0.2s" attributeName="d" from={top_path} to={path_closed} fill="freeze" begin="indefinite" />
<animate bind:this={eyecon_open_top_anim} dur="0.2s" attributeName="d" from={path_closed} to={top_path} fill="freeze" begin="indefinite" />
</path>
<path d={bottom_path} stroke="currentColor">
<animate bind:this={eyecon_close_bottom_anim} dur="0.2s" attributeName="d" from={bottom_path} to={path_closed} fill="freeze" begin="indefinite" />
<animate bind:this={eyecon_open_bottom_anim} dur="0.2s" attributeName="d" from={path_closed} to={bottom_path} fill="freeze" begin="indefinite" />
</path>
<circle class="pupil" cx="200" cy="0" r="50" fill="currentColor" stroke="none" />
</g>
</svg>
<script lang="ts">
import {is_connected} from "../store/socket"
const top_path = "M 0,0 c 20,0 80,-100 200,-100 s 180,100 200,100"
const bottom_path = "M 0,0 c 20,0 80,100 200,100 s 180,-100 200,-100"
const path_closed = "M 0,0 c 20,0 80,0 200,0 s 180,0 200,0"
let eyecon_open_top_anim: SVGAnimationElement
let eyecon_open_bottom_anim: SVGAnimationElement
let eyecon_close_top_anim: SVGAnimationElement
let eyecon_close_bottom_anim: SVGAnimationElement
$: if ($is_connected === true) {
eyecon_open_top_anim?.beginElement()
eyecon_open_bottom_anim?.beginElement()
} else {
eyecon_close_top_anim?.beginElement()
eyecon_close_bottom_anim?.beginElement()
}
</script>
<style lang="scss">
.eye {
// https://daisyui.com/docs/colors/
color: hsl(var(--bc));
.top, .bottom {
stroke-linecap: round;
}
.pupil {
opacity: 0;
transition: opacity 0.2s ease;
}
}
.eye-open .pupil {
opacity: 1;
}
</style>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width={size} height={size} viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="close" class:active={id === "close"}>
<path d="M1,1 l 10,10 M1,11 l 10,-10"/>
</g>
<g id="maximize" class:active={id === "maximize"}>
<rect x="1.5" y="1.5" width="9" height="9"/>
</g>
<g id="minimize" class:active={id === "minimize"}>
<line x1="1" y1="5.5" x2="11" y2="5.5"/>
</g>
<g id="restore" class:active={id === "restore"}>
<rect x="1.5" y="3.5" width="7" height="7"/>
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
</g>
</svg>
<script lang="ts">
export let id: | "close" | "maximize" | "minimize" | "restore"
export let size = 20
</script>
<style lang="scss">
g {
&:not(.active) {
display: none;
}
stroke: hsl(var(--bc));
fill: none;
}
g:not([id|="close"]) {
shape-rendering: crispEdges;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment