<script>
  import SvgContainer from '$lib/shared/svg-container.svelte';
  import Animation from '$lib/shared/animation.svelte';
  import { circlePoint, point } from '$lib/utils/path-utils';
  import { linePath } from '$lib/utils/svg-utils';
  import { hue2color } from '$lib/utils/color-utils';
  import { nums } from '$lib/utils/math-utils';
  
  export let count = 4;

  let angle = 0;

  const animate = () => angle = angle + 2;

  const center = point(200, 200);
  const radius = 180;

  $: colors = nums(count).map(i =>
    hue2color(45 + 360/count * i)
  );

  $: pathes = nums(count).map(i =>
    linePath(
      circlePoint(center, radius, 360/count * i),
      circlePoint(center, radius, 360/count * i + angle)
    )
  );
</script>
  
<Animation run={animate} />
<SvgContainer>
    <circle cx={center.x} cy={center.y} r={radius}  stroke="#fff" fill="none" />
    {#each pathes as path, i}
        <path d={path} stroke-width={1.25} stroke="{colors[i]}" fill="none" />
    {/each}
</SvgContainer>