star-animation.svelte

{#if currentScore === 20}
    <svg class="icon-thumbs-up" in:fade="{{delay: 100, duration: 400}}" width="30px" fill="goldenrod" x=-120 y="calc(-50% - 20px)" viewBox="0 0 1000 1000"><use href="#thumbs-up-path"></use></svg>

    {#each starArray as star,i}
    <g class="star {(i % 3 === 0) ? "twinkle" : "" }" in:fade="{{delay: 100*i, duration: 200}}" style="transform-origin: {-star.x + 80}px {star.y - 30}px;">
        <line x1={-star.x +80} y1={star.y - 30 + 2 + (i % 20) /20 *3} x2={-star.x +80} y2={star.y - 30 - 2 - (i % 20) /20 *3} stroke-width=1></line>
        <line x1={-star.x + 80 + 2 + (i % 20) /20 *3} y1={star.y - 30} x2={-star.x + 80 - 2 - (i % 20) /20 *3} y2={star.y - 30} stroke-width=1 ></line>
        <circle r="{(i % 20) /20 *2 + 1}" cx={-star.x + 80} cy={star.y - 30}></circle>    
    </g>
    {/each}
{/if}

<style>
    .star circle {
        fill: url(#RadialGradient1);
        filter: drop-shadow(0px 0px 4px white) drop-shadow(0px 0px 6px goldenrod);
    }
    .star line{
        opacity: 0.5;
        stroke: gold;
        filter: drop-shadow(0px 0px 2px white) drop-shadow(0px 0px 4px goldenrod);
    }
    .twinkle{
        animation: fade-frames 5000ms infinite linear;
    }

    @keyframes fade-frames {
      0% {transform: scale(0.5)}
      40% {transform: scale(0.5)}
      50% {transform: scale(1.5)}
      60% {transform: scale(0.5)}
      100% {transform: scale(0.5)}
    }  
</style>