Eyecon.svelte

<!-- 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>

TitleButton.svelte

<!-- 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>