<script>
// based on https://codesandbox.io/s/framer-motion-path-drawing-drag-and-usetransform-jnqk2
// usually this import strategy should work:
//import {Motion,useMotionValue,useTransform} from "svelte-motion";
import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
import {useTransform} from 'svelte-motion/dist/index.mjs';
import {useMotionValue} from 'svelte-motion/dist/index.mjs';
const x = useMotionValue(0);
const xInput = [-100, 0, 100];
const background = useTransform(x, xInput, [
"linear-gradient(180deg, #ff008c 0%, rgb(211, 9, 225) 100%)",
"linear-gradient(180deg, #7700ff 0%, rgb(68, 0, 255) 100%)",
"linear-gradient(180deg, rgb(230, 255, 0) 0%, rgb(3, 209, 0) 100%)",
]);
const color = useTransform(x, xInput, [
"rgb(211, 9, 225)",
"rgb(68, 0, 255)",
"rgb(3, 209, 0)",
]);
const tickPath = useTransform(x, [10, 60], [0, 1]);
const crossPathA = useTransform(x, [-10, -40], [0, 1]);
const crossPathB = useTransform(x, [-35, -60], [0, 1]);
</script>
<style>
:global(*) {
box-sizing: border-box;
}
.background {
background: linear-gradient(
250deg,
rgb(50, 50, 255),
rgb(150, 150, 250)
);