Last active
October 27, 2023 19:58
-
-
Save thebluefish/fbe784e6ebcc1b21ae7edbf029723860 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment