April 7, 2022

Shaded Arcs Weave

length: 0.75 length: 0.75

After the previous demo with a weave of lines or filled rectangle bars, I thought about to weave with curved bars and because I wanted to do an Arc component for another idea of mine, I came up with this neat piece above. If you enjoy this, give me a like at my twitter post.

shaded-arcs-weave.svelte

<script>
  import SvgContainer from '$lib/shared/svg-container.svelte';
  import Arc from '$lib/shared/arc.svelte';
  import { point } from '$lib/utils/path-utils.js';
  import { lerp } from '../utils/math-utils.js';

  export let length = 0.75;

  let a = 0;
  
  const iv = setInterval(
    () => {
      a = a > 1000 ? 0 : a+2;
    },
    1000/60
  );

  const s = 15;

	let nums = [...Array(s).keys()];
	let ca = point(650, 650);
	let cb = point(850, 850);

  const col = (c) => `rgb(${c},${c},${c})`;
</script>

<SvgContainer width="1500" height="1500">
  <rect  width="1500" height="1500" fill="#cccccc" />
	{#each nums as i}
    <Arc
      center={ca}
      radius={i*30 + 10 + i*10}
      size={5 + i*2}
      start={0 + a/500 + (s-i/2)/s}
      length={lerp(0, length, i/(s-1))}
      fill={col(255 * i/s)}
    />
    <Arc
      center={cb}
      radius={i*30 + 10 + i*10}
      size={5 + i*2}
      start={0.25 + a/-500 + (s-i/2)/s}
      length={lerp(0, length, i/(s-1))}
      fill={col(255 * (s+4-i)/s)}
    />
  {/each}
</SvgContainer>

arc.svelte

<script>
  import { circlePoint, point } from '../utils/path-utils.js';

  export let center = point(0, 0);
  export let radius = 100;
  export let size = 10;
  export let start = 0.0;
  export let length = 1.0;
  export let fill = '#cccccc';
  export let stroke = '#000000';
  export let strokeWidth = '1';

  $: begin = 360 * start;
  $: angle = 360 * Math.min(length, 0.999);

  $: beginInner = circlePoint(center, radius, 90 - begin);
  $: beginOuter = circlePoint(center, radius + size, 90 - begin);

  $: endInner = circlePoint(center, radius, 90 - begin - angle);
  $: endOuter = circlePoint(center, radius + size, 90 - begin - angle);

  $: path = `
    M ${beginInner.x} ${beginInner.y}
    A ${radius} ${radius} 0 ${Math.abs(angle) > 180 ? 1 : 0} ${angle > 0 ? 1 : 0} ${endInner.x} ${endInner.y}
    ${length >= 1 ? 'Z M' : 'L'} ${endOuter.x} ${endOuter.y}
    A ${radius + size} ${radius + size} 0 ${Math.abs(angle) > 180 ? 1 : 0} ${angle > 0 ? 0 : 1} ${beginOuter.x} ${beginOuter.y}
    Z
  `.replace(/\n\s*/g, " ");
</script>

<g stroke={stroke} fill={fill} stroke-width={strokeWidth}>
   <path d={path} />
</g>