examples

site/content/examples/08-motion/01-spring/App.svelte

@@ -1,35 +1,184 @@
 <script>
-	import { spring } from 'svelte/motion';
+  import { spring } from "svelte/motion";
+  import { framerate } from "svelte/environment";
+  import { derived } from "svelte/store";
 
-	let coords = spring({ x: 50, y: 50 }, {
+  const s = spring(50);
-		stiffness: 0.1,
+  let prev_time = now();
-		damping: 0.25
+  let prev_value = 50;
-	});
+  const velocity = derived(
+    s,
+    (v) =>
+      (-prev_value + (prev_value = v)) / (-prev_time + (prev_time = now())),
+    0.0
+  );
+  let l_time;
+  $: canvas && Draw($velocity, $s);
+  let { mass, stiffness, damping, soft } = s;
+  $: s.soft = soft;
+  $: s.mass = mass;
+  $: s.stiffness = stiffness;
+  $: s.damping = damping;
+  let solver;
 
-	let size = spring(10);
+  function solve_spring(target, prev_velocity) {
+    const target_ = target;
+    const delta = target - $s;
+    if (soft || 1 <= damping / (2.0 * Math.sqrt(stiffness * mass))) {
+      const angular_frequency = -Math.sqrt(stiffness / mass);
+      solver = (t) =>
+        target_ -
+        (delta + t * (-angular_frequency * delta - prev_velocity)) *
+          Math.exp(t * angular_frequency);
+    } else {
+      const damping_frequency = Math.sqrt(
+        4.0 * mass * stiffness - damping ** 2
+      );
+      const leftover =
+        (damping * delta - 2.0 * mass * prev_velocity) / damping_frequency;
+      const dfm = (0.5 * damping_frequency) / mass;
+      const dm = -(0.5 * damping) / mass;
+      let f = 0.0;
+      solver = (t) =>
+        target_ -
+        (Math.cos((f = t * dfm)) * delta + Math.sin(f) * leftover) *
+          Math.exp(t * dm);
+    }
+    reset_time = now();
+    s.set((target__ = target));
+  }
+  let target__ = 50;
+  let canvas;
+  const start_time = now();
+  let reset_time = start_time;
+  const canvas_history = [];
+  let max_x, min_x, max_y, min_y, canvas_width, canvas_height;
+  let step, length;
+  let last_index;
+  let ctx;
+  const XC = (x) => ((x - min_x) / (max_x - min_x)) * canvas_width;
+  const YC = (y) =>
+    canvas_height - ((y - min_y) / (max_y - min_y)) * canvas_height;
+  const get_index = (i = 0) =>
+    (i + Math.floor((prev_time - start_time) / framerate)) % length;
+  function Draw() {
+    if (!step) {
+      max_y = canvas_height / 2;
+      min_y = -canvas_height / 2;
+      max_x = canvas_width / 1000;
+      min_x = -max_x;
+      step = framerate / 1000; //framerate / canvas_width;
+      length = Math.floor(max_x / step);
+      canvas_history.length = length;
+      canvas_history.fill(0);
+      ctx = canvas.getContext("2d");
+    }
+    ctx.lineWidth = 12;
+    let offset = (prev_time - reset_time) / 1000;
+    const start_index = get_index(0);
+    if (last_index === (last_index = start_index) || !solver) return;
+    ctx.clearRect(0, 0, canvas_width, canvas_height);
+    ctx.beginPath();
+    let x = min_x,
+      y = 0,
+      i = start_index + 1;
+    ctx.moveTo(XC(x), YC(y));
+    for (x += step; i <= length; i++)
+      ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
+    for (i = 0; i < start_index; i++)
+      ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
+    ctx.lineTo(
+      XC(x),
+      YC((canvas_history[start_index] = canvas_height / 2 - prev_value))
+    );
+    if (Math.abs(prev_value - solver(offset)) > 20) {
+      solve_spring(target__, $velocity);
+      offset = 0;
+    }
+    x = 0;
+    while (x <= max_x)
+      ctx.lineTo(
+        XC((x += step)),
+        canvas_height / 2 - YC(solver(x + step + offset))
+      );
+    ctx.stroke();
+  }
 </script>
 
 <style>
-	svg { width: 100%; height: 100%; margin: -8px }
+  :global(body) {
-	circle { fill: #ff3e00 }
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  svg {
+    width: 100vw;
+    height: 100vh;
+  }
+  circle {
+    fill: tomato;
+  }
+  canvas {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+  }
 </style>
 
+<svelte:window
+  on:mousemove={(e) => solve_spring(e.clientY, $velocity)}
+  bind:innerWidth={canvas_width}
+  bind:innerHeight={canvas_height} />
 <div style="position: absolute; right: 1em;">
   <label>
-		<h3>stiffness ({coords.stiffness})</h3>
+    <h3>velocity</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
+    <progress
+      value={!Number.isNaN($velocity) && Number.isFinite($velocity) && $velocity + 10}
+      min={0}
+      max={20} />
+  </label>
+  <label>
+    <h3>speed</h3>
+    <progress
+      value={!Number.isNaN($velocity) && Number.isFinite($velocity) && Math.abs($velocity)}
+      min={0}
+      max={20} />
+  </label>
+  <label>
+    <h3>y {$s.toFixed(0)}</h3>
+    <progress value={!Number.isNaN($s) && $s} min={0} max={1000} />
+  </label>
+  <label>
+    <h3>target {target__}</h3>
+    <progress value={!Number.isNaN(target__) && target__} min={0} max={1000} />
+  </label>
+  <label>
+    <h3>stiffness ({stiffness})</h3>
+    <input bind:value={stiffness} type="range" min="10" max="200" step="0.01" />
   </label>
 
   <label>
-		<h3>damping ({coords.damping})</h3>
+    <h3>damping ({damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
+    <input bind:value={damping} type="range" min="0.1" max="20" step="0.01" />
+  </label>
+  <label>
+    <h3>mass ({mass})</h3>
+    <input bind:value={mass} type="range" min="0.1" max="20" step="0.01" />
+  </label>
+  <label>
+    <h3>
+      soft
+      <input bind:checked={soft} type="checkbox" />
+    </h3>
   </label>
 </div>
-
+<svg>
-<svg
+  <circle
-	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
+    cx={-15+canvas_width / 2}
-	on:mousedown="{() => size.set(30)}"
+    cy={$s}
-	on:mouseup="{() => size.set(10)}"
+    r={30} />
->
-	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
 </svg>
+<canvas bind:this={canvas} width={canvas_width} height={canvas_height} />

site/content/examples/10-animations/00-animate/App.svelte

@@ -1,49 +1,49 @@
 <script>
-	import { quintOut } from 'svelte/easing';
+  import { quintOut } from "svelte/easing";
-	import { crossfade } from 'svelte/transition';
+  import { crossfade } from "svelte/transition";
-	import { flip } from 'svelte/animate';
+  import { flip } from "svelte/animate";
 
   const [send, receive] = crossfade({
     fallback(node, params) {
       const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
+      const transform = style.transform === "none" ? "" : style.transform;
-
       return {
         duration: 600,
         easing: quintOut,
-				css: t => `
+        css: (t) => `
 					transform: ${transform} scale(${t});
 					opacity: ${t}
-				`
+				`,
       };
-		}
+    },
   });
 
   let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
+    { key: 1, done: false, description: "write some docs" },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
+    { key: 2, done: false, description: "start writing JSConf talk" },
-		{ id: 3, done: true, description: 'buy some milk' },
+    { key: 3, done: true, description: "buy some milk" },
-		{ id: 4, done: false, description: 'mow the lawn' },
+    { key: 4, done: false, description: "mow the lawn" },
-		{ id: 5, done: false, description: 'feed the turtle' },
+    { key: 5, done: false, description: "feed the turtle" },
-		{ id: 6, done: false, description: 'fix some bugs' },
+    { key: 6, done: false, description: "fix some bugs" },
   ];
 
-	let uid = todos.length + 1;
+  let ukey = todos.length + 1;
 
   function add(input) {
-		const todo = {
+    todos = [{ key: ukey++, done: false, description: input.value }, ...todos];
-			id: uid++,
+    input.value = "";
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
   }
 
-	function remove(todo) {
+  function remove(key1) {
-		todos = todos.filter(t => t !== todo);
+    todos = todos.filter(({ key }) => key !== key1);
   }
+  $: list = todos.reduce((prev, td) => (prev[+td.done].push(td), prev), [
+    [],
+    [],
+  ]);
+  const animating = new Map();
+  let lastShuffle = Date.now();
+  let t = 0;
 </script>
 
 <style>
@@ -52,25 +52,22 @@
     width: 100%;
     margin: 2em 0 1em 0;
   }
-
   .board {
     max-width: 36em;
     margin: 0 auto;
   }
-
+  .left,
-	.left, .right {
+  .right {
     float: left;
     width: 50%;
     padding: 0 1em 0 0;
     box-sizing: border-box;
   }
-
   h2 {
     font-size: 2em;
     font-weight: 200;
     user-select: none;
   }
-
   label {
     top: 0;
     left: 0;
@@ -83,13 +80,12 @@
     background-color: #eee;
     user-select: none;
   }
-
+  input {
-	input { margin: 0 }
+    margin: 0;
-
+  }
   .right label {
     background-color: rgb(180, 240, 100);
   }
-
   button {
     float: right;
     height: 1em;
@@ -102,46 +98,62 @@
     opacity: 0;
     transition: opacity 0.2s;
   }
-
   label:hover button {
     opacity: 1;
   }
 </style>
 
-<div class='board'>
+<svelte:window
+  on:keydown={(e) => {
+    let [{ length: a }, { length: b }] = list;
+    if (e.keyCode == 32) {
+      if (lastShuffle > Date.now() - 100) {
+        return;
+      }
+      lastShuffle = Date.now();
+      e = 0;
+      if (!a) e += 1;
+      if (!b) e -= 2;
+      if (!e) e += t = 0.5 + (b - a) / (a + b);
+      s: if (~e) {
+        a += b;
+        let w = 1;
+        while (animating.get((e = (e = list[(e = +(Math.random() + e > 0.5))])[Math.floor(Math.random() * e.length)]).key)) if (w++ > a) break s;
+        e.done = !e.done;
+        list = list;
+      }
+    }
+  }} />
+<div class="board">
   <input
     class="new-todo"
     placeholder="what needs to be done?"
-		on:keydown="{event => event.which === 13 && add(event.target)}"
+    on:keydown={(event) => void (event.key === 'Enter' && add(event.target))} />
-	>
+  {#each list as todo, i (i)}
-
+    <div class={!i ? 'left' : 'right'}>
-	<div class='left'>
+      <h2>{!i ? 'todo' : 'done'}</h2>
-		<h2>todo</h2>
+      {#each todo as { key, description, done: checked } (key)}
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
         <label
-				in:receive="{{key: todo.id}}"
+          in:receive={{ key }}
-				out:send="{{key: todo.id}}"
+          out:send={{ key }}
           animate:flip
-			>
+          on:outrostart={() => {
-				<input type=checkbox bind:checked={todo.done}>
+            animating.set(key, true);
-				{todo.description}
+          }}
-				<button on:click="{() => remove(todo)}">x</button>
+          on:outroend={() => {
+            animating.set(key, false);
+          }}
+          on:introstart={() => {
+            animating.set(key, true);
+          }}
+          on:introend={() => {
+            animating.set(key, false);
+          }}>
+          <input type="checkbox" bind:checked />
+          {description}
+          <button on:click={remove.bind(null, key)}>x</button>
         </label>
       {/each}
     </div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
   {/each}
 </div>
-</div>

site/content/examples/11-easing/00-easing/App.svelte

@@ -1,40 +1,46 @@
 <script>
-	import { interpolateString as interpolate } from 'd3-interpolate';
+  import { strings } from "svelte/interpolate";
-	import { tweened } from 'svelte/motion';
+  import { tweened } from "svelte/motion";
+  import { cubicBezier, easeOut } from "svelte/easing";
+  import { onDestroy } from "svelte";
 
-	import Grid from './Grid.svelte';
+  import Grid from "./Grid.svelte";
-	import Controls from './Controls.svelte';
+  import Controls from "./Controls.svelte";
 
-	import { eases, types } from './eases.js';
+  import { eases, types, generate } from "./eases.js";
 
-	let current_type = 'In';
+  let current_type = "In";
-	let current_ease = 'sine';
+  let current_ease = "sine";
   let duration = 2000;
   let current = eases.get(current_ease)[current_type];
   let playing = false;
   let width;
 
-	const ease_path = tweened(current.shape, { interpolate });
+  const ease_path = tweened(current.shape, {
+    interpolate: strings,
+    easing: easeOut,
+  });
   const time = tweened(0);
   const value = tweened(1000);
 
   async function runAnimations() {
     playing = true;
-
+    value.setImmediate(1000);
-		value.set(1000, {duration: 0});
+    time.setImmediate(0);
-		time.set(0, {duration: 0});
+    ease_path.set(is_custom ? generate(current_bezier) : current.shape);
-
+    time.set(1000, { duration });
-		await ease_path.set(current.shape);
+    value.set(0, { duration, easing: is_custom ? current_bezier : current.fn });
-		await Promise.all([
-			time.set(1000, {duration, easing: x => x}),
-			value.set(0, {duration, easing: current.fn})
-		]);
-
-		playing = false;
   }
 
-	$: current = eases.get(current_ease)[current_type];
+  onDestroy(time.onRest(() => (playing = false)));
-	$: current && runAnimations();
+  $: is_custom = current_ease.includes("Bezier");
+  $: current = !is_custom && eases.get(current_ease)[current_type];
+  $: current_bezier, current, runAnimations();
+  let eq;
+  let x1, x2, y1, y2;
+  $: current_bezier = bezier && cubicBezier(...bezier);
+  let bezier;
+  let div;
 </script>
 
 <style>
@@ -49,13 +55,13 @@
     padding: 20px;
   }
 
-	svg {
+  .svg1 {
     width: 100%;
     margin: 0 20px 0 0;
   }
 
   .graph {
-		transform: translate(200px,400px)
+    transform: translate(200px, 400px);
   }
 
   @media (max-width: 600px) {
@@ -64,43 +70,38 @@
       max-height: calc(100% - 3rem);
     }
   }
+  circle {
+    z-index: 10;
+    position: absolute;
+  }
 </style>
 
-<div bind:offsetWidth={width} class="easing-vis">
+<div bind:offsetWidth={width} bind:this={div} class="easing-vis">
-	<svg viewBox="0 0 1400 1802">
+  {#if is_custom}
+    <div
+      style="position:absolute;z-index:10;left:120px;top:150px;font-size:24px;">
+      cubicBezier({bezier})
+    </div>
+  {/if}
+  <svg class="svg1" viewBox="0 0 1400 1802">
     <g class="canvas">
-			<Grid x={$time} y={$value}/>
+      <Grid {is_custom} bind:bezier x={$time} y={$value}>
         <g class="graph">
-				<path
+          <path d={$ease_path} stroke="tomato" stroke-width="10" fill="none" />
-					d={$ease_path}
+          <circle cx={$time} cy={$value} r="15" fill="#333" />
-					stroke="#333"
-					stroke-width="2"
-					fill="none"
-				/>
-
-				<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
-					fill="#ff3e00"
-					style="transform: translate(1060px, {($value - 24)}px)"
-				/>
-
-				<circle
-					cx="{$time}"
-					cy="{$value}"
-					r="15"
-					fill="#ff3e00"
-				/>
         </g>
+      </Grid>
     </g>
   </svg>
-
   <Controls
+    {is_custom}
     {eases}
     {types}
     {playing}
     {width}
+    {bezier}
     bind:duration
     bind:current_ease
     bind:current_type
-		on:play={runAnimations}
+    on:play={runAnimations} />
-	/>
 </div>

site/content/examples/11-easing/00-easing/Controls.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from "svelte";
 
   export let current_ease;
   export let current_type;
@@ -125,22 +125,18 @@
     <h3>Ease</h3>
     {#if mobile}
       <select bind:value={current_ease}>
-					{#each [...eases] as [name]}
+        {#each [...eases, [`cubicBezier`]] as [name]}
-						<option
+          <option value={name} class:selected={name === current_ease}>
-							value={name}
-							class:selected={name === current_ease}
-						>
             {name}
           </option>
         {/each}
       </select>
     {:else}
       <ul>
-					{#each [...eases] as [name]}
+        {#each [...eases, [`cubicBezier`]] as [name]}
           <li
             class:selected={name === current_ease}
-							on:click={() => current_ease = name}
+            on:click={() => (current_ease = name)}>
-						>
             {name}
           </li>
         {/each}
@@ -150,11 +146,7 @@
     {#if mobile}
       <select bind:value={current_type}>
         {#each types as [name, type]}
-						<option
+          <option value={type}>{name}</option>
-							value={type}
-						>
-							{name}
-						</option>
         {/each}
       </select>
     {:else}
@@ -162,22 +154,19 @@
         {#each types as [name, type]}
           <li
             class:selected={type === current_type}
-							on:click={() => current_type = type}
+            on:click={() => (current_type = type)}>
-						>
             {name}
           </li>
         {/each}
       </ul>
     {/if}
   </div>
-		<h4>
+  <h4>Duration</h4>
-			Duration
-		</h4>
   <div class="duration">
     <span>
       <input type="number" bind:value={duration} min="0" step="100" />
-				<button class="number" on:click={() => duration -= 100}>-</button>
+      <button class="number" on:click={() => (duration -= 100)}>-</button>
-				<button class="number" on:click={() => duration += 100}>+</button>
+      <button class="number" on:click={() => (duration += 100)}>+</button>
     </span>
     <button class="play" on:click={() => dispatch('play')}>
       {playing ? 'Restart' : 'Play'}

site/content/examples/11-easing/00-easing/Grid.svelte

@@ -1,5 +1,27 @@
 <script>
+  export let is_custom;
   export let x, y;
+  let rect;
+  let rect2;
+  export let x1 = 200,
+    y1 = 1400,
+    x2 = 1200,
+    y2 = 400;
+  let selected1 = false,
+    selected2 = false;
+  export let bezier = [0, 0, 0, 0];
+  const radius = 30;
+  $: {
+    if (rect2) {
+      const { x, y, width, height } = rect2.getBoundingClientRect();
+      bezier = [
+        Math.max(0, Math.min(1, (x1 - 200) / 1000)),
+        -(y1 - 1400) / 1000,
+        Math.max(0, Math.min(1, 1 + (x2 - 1200) / 1000)),
+        1 - (y2 - 400) / 1000,
+      ].map((v) => Math.round(v * 100) / 100);
+    }
+  }
 </script>
 
 <style>
@@ -8,55 +30,69 @@
     opacity: 0.5;
     stroke-width: 2;
   }
-
+  circle {
-	.grid-line-xy {
+    z-index: 10;
-		stroke: tomato;
+    position: absolute;
-		stroke-width: 2;
   }
 </style>
 
 <svelte:options namespace="svg" />
 
 <rect
-	x=0
+  bind:this={rect}
-	y=0
+  x="0"
-	width=1400
+  y="0"
-	height=1800
+  width="1400"
-	stroke=#ccc
+  height="1800"
+  stroke="#ccc"
   style="opacity: 0.5"
-	fill=none
+  fill="none"
-	stroke-width=2
+  stroke-width="2" />
-/>
 
 {#each { length: 8 } as _, i}
   {#if i < 6}
-		<path
+    <path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
-			d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
-			class="grid-line"
-		/>
   {/if}
-	<path
+  <path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
-		d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
-		class="grid-line"
-	/>
 {/each}
-
-<path
-	style="transform: translateX({x+200}px)"
-	d="M0 0 L0 1800"
-	class="grid-line-xy"
-/>
-<path
-	style="transform: translateY({y}px)"
-	d="M0 400 L1400 400"
-	class="grid-line-xy"
-/>
 <rect
-	x=200
+  bind:this={rect2}
-	y=400
+  x="200"
-	width=1000
+  y="400"
-	height=1000
+  width="1000"
-	stroke=#999
+  height="1000"
-	fill=none
+  stroke="#999"
-	stroke-width=2
+  fill="none"
-/>
+  stroke-width="4" />
+<svelte:window
+  on:mousemove={(e) => {
+    const { x, y, width, height } = rect.getBoundingClientRect();
+    const _x1 = Math.min(1200, Math.max(200, (e.clientX - x) * (1400 / width)));
+    const _y1 = Math.min(1800, Math.max(0, (e.clientY - y) * (1800 / height)));
+    if (selected1) (x1 = _x1), (y1 = _y1);
+    else if (selected2) (x2 = _x1), (y2 = _y1);
+  }}
+  on:mouseup={() => {
+    selected1 = selected2 = false;
+  }} />
+<slot />
+{#if is_custom}
+  <path d="M200 1400 L{x1} {y1} " stroke="#333333d9" stroke-width="10" />
+  <path d="M1200 400 L{x2} {y2} " stroke="#333333d9" stroke-width="10" />
+  <circle
+    cx={x1}
+    cy={y1}
+    r={radius}
+    fill="#333"
+    stroke="transparent"
+    stroke-width="100"
+    on:mousedown={() => (selected1 = true)} />
+  <circle
+    cx={x2}
+    cy={y2}
+    r={radius}
+    fill="#333"
+    stroke="transparent"
+    stroke-width="100"
+    on:mousedown={() => (selected2 = true)} />
+{/if}

site/content/examples/11-easing/00-easing/eases.js

@@ -1,24 +1,24 @@
-import * as eases from 'svelte/easing';
+import * as eases from 'svelte/easing'
 
-const processed_eases = {};
+const processed_eases = {}
-
+let ease
-for (const ease in eases) {
+for (ease in eases) {
-	if (ease === "linear") {
+	if (ease === 'linear') {
-		processed_eases.linear = eases.linear;
+		processed_eases.linear = eases.linear
+	} else if (ease === 'cubicBezier') {
+		continue
 	} else {
-		const name = ease.replace(/In$|InOut$|Out$/, '');
+		const name = ease.replace(/In$|InOut$|Out$/, '')
-		const type = ease.match(/In$|InOut$|Out$/)[0];
+		;(processed_eases[name] || (processed_eases[name] = {}))[ease.match(/In$|InOut$|Out$/)[0]] = {
-
+			fn: eases[ease],
-		if (!(name in processed_eases)) processed_eases[name] = {};
+			shape: generate(eases[ease]),
-		processed_eases[name][type] = {};
+		}
-		processed_eases[name][type].fn = eases[ease];
-
-		let shape = 'M0 1000';
-		for (let i = 1; i <= 1000; i++) {
-			shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
-			processed_eases[name][type].shape = shape;
 	}
 }
+export function generate(easing, from = 0, to = 1000) {
+	let shape = `M${from} ${to}`
+	for (let i = from + 1; i <= to; i++) shape += ` L${i} ${to - to * easing(i / to)}`
+	return shape
 }
 
 const sorted_eases = new Map([
@@ -32,12 +32,12 @@ const sorted_eases = new Map([
 	['back', processed_eases.back],
 	['elastic', processed_eases.elastic],
 	['bounce', processed_eases.bounce],
-]);
+])
 
 export const types = [
 	['Ease In', 'In'],
 	['Ease Out', 'Out'],
-	['Ease In Out', 'InOut']
+	['Ease In Out', 'InOut'],
-];
+]
 
-export { sorted_eases as eases };
+export { sorted_eases as eases }