angjez

	<motion.path
          d="M7.47998 18.35L10.58 20.75C10.98 21.15 11.88 21.35 12.48 21.35H16.28C17.48 21.35 18.78 20.45 19.08 19.25L21.48 11.95C21.98 10.55 21.08 9.35 19.58 9.35H15.58C14.98 9.35 14.48 8.85 14.58 8.15L15.08 4.95C15.28 4.05 14.68 3.05 13.78 2.75C12.98 2.45 11.98 2.85 11.58 3.45L7.47998 9.55"
          stroke-width="1.5"
          stroke-miterlimit="10"
          fill="none"
          strokeDasharray="0 1"
          style={{ pathLength: thumbsUp }}
        />
        <motion.path
          d="M2.38 18.35V8.54999C2.38 7.14999 2.98 6.64999 4.38 6.64999H5.38C6.78 6.64999 7.38 7.14999 7.38 8.54999V18.35C7.38 19.75 6.78 20.25 5.38 20.25H4.38C2.98 20.25 2.38 19.75 2.38 18.35Z"

angjez

const thumbsUp = useTransform(x, [15, 100], [0, 1]);
const thumbsUp2 = useTransform(x, [20, 100], [0, 1]);

const thumbsDown = useTransform(x, [-15, -50], [0, 1]);
const thumbsDown2 = useTransform(x, [-10, -100], [0, 1]);

angjez

const Toggle: React.FunctionComponent = () => {
  const x = useMotionValue(0);

  return (
    <ToggleWrapper>
      <ToggleCircle>
        <svg width="50" height="50" viewBox="0 0 24 24">
          <motion.path
            d="M5.68999 20.65L6.22032 20.1197L6.18668 20.086L6.14905 20.0569L5.68999 20.65ZM10.55 19.79L9.83747 19.5559L9.82859 19.5829L9.82178 19.6106L10.55 19.79ZM11.92 15.62L11.2149 15.3644L11.211 15.3751L11.2075 15.3859L11.92 15.62ZM7.96999 13.4399L7.22921 13.3225L7.22829 13.3286L7.96999 13.4399ZM8.25999 11.61L7.52685 11.4519L7.52248 11.4721L7.51923 11.4926L8.25999 11.61ZM7.51998 10.35L7.25999 11.0535L7.27134 11.0577L7.28281 11.0615L7.51998 10.35ZM6.25999 10.75L5.63877 10.3298L5.63705 10.3323L6.25999 10.75ZM3.46092 19.8731L5.23093 21.2431L6.14905 20.0569L4.37904 18.6869L3.46092 19.8731ZM5.15966 21.1803C5.40851 21.4292 5.73912 21.5585 5.98692 21.6282C6.25277 21.703 6.53608 21.74 6.77998 21.74V20.24C6.67388 20.24 6.5272 20.222 6.39305 20.1843C6.32781 20.1659 6.2773 20.1462 6.24255 20.1288C6.20533 20

angjez

<ToggleCircle
        style={{ x }} // this will change the coordinate of the wrapper as you drag
        drag="x" // drag direction
        dragConstraints={{ left: -100, right: 100 }} // depends how long of a drag you want to allow
        dragSnapToOrigin={true} // will bring the wrapper back to the center upon release
        dragElastic={0.1} // adds a more natural feel
        whileDrag={{ scale: 1.3 }}>

angjez

  const xInput = [-100, 0, 100];
  const color = useTransform(x, xInput, [
    theme.colors.pink,
    theme.colors.orange,
    theme.colors.green,
  ]);