Patsy Posts - Answer Overflow

Patsy

•Created by Patsy on 2/7/2024 in #questions

next-auth local vs deployed error

I did a vanilla setup with the t3 stack, setup my db on supabase, setup dicsord Oauth2 with Redirects. Logging in works in on localhost, but I get a callback error when It's hosted on vercel. I setup the callback URI for the domain vercel generates. I am not sure if I am missing a step. error url

https://t3-auth-test-three.vercel.app/api/auth/signin?error=Callback

https://t3-auth-test-three.vercel.app/api/auth/signin?error=Callback

3 replies

TTCTheo's Typesafe Cult

•Created by Patsy on 11/22/2023 in #questions

How to scale svg path with respect to itself and not the svg origin

I have an svg for for human muscles and I just want to scale a muscle on hover, however the muscle moves away from the origin of the svg, making it move away from the cursor and flicker. Is there a way make each muscle muscle path scale not relative to the parent svg? Here is the svg component

import * as React from "react";

type props = {
  props: any;
};

const MuscleSVG = (props: any) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    xmlSpace="preserve"
    className="h-full w-full object-cover"
    viewBox="0 0 589 538"
    id="7bP_svg__gen-by-synoptic-designer"
    {...props}
  >
    <path
      className="absolute bg-red-500 fill-cyan-500   ease-in duration-100 hover:[transform:scale(1.2)]"
      d="m500 143 10 15 8 30-9-5-9-15zM441 177l-31 10 2 15 33 44-6-45zM452 177l31 10-2 15-33 44 6-43zM532 184l11 18 5 25 16 29-9-5-19-35-9-13zM520 193l-9-4 4 16 28 45 5 12 3-10zM361 184l-11 19-5 23-16 30 9-5 20-37 8-13zM373 193l8-4-3 15-27 44-6 13-4-9zM434 240l-34 21-1 24 4 17 37-11 5-15zM459 239l-10 36 3 15 37 12 4-16-1-25zM442 295h-8l-8 6 9 44 8-20 1-15zM451 294l9 2 8 6-10 43-7-19-2-16z"
    />
    <path
      className="bg-red-500 fill-green-500"
      d="m397 293 5 17 13-8-3 22-2 35-12 19-1-27-3-13-1-23zM497 292l-5 17-13-7 4 25 2 32 11 19 1-25 3-13 2-24zM420 301l13 48-9 49-10-33 2-41zM474 301l4 25 2 40-10 32-9-48zM410 366l-8 14 6 17 9-9zM485 367l-8 22 9 8 6-17zM398 383l-2 16-9 29-2 31 4 10 7-9 3-31 5-21v-10zM417 394l-5 6-5 10-5 20-2 27 9 19 11-22 1-51zM477 394l-4 8 1 52 11 21 10-18-4-29-5-22zM495 383l4 19 8 25 2 32-5 9-5-7-4-33-6-27zM396 466h4l8 14-7 43-5-15-4-36zM493 466h5l4 6-4 35-4 15-7-41zM390 484l5 37-5 7-3-10zM504 482l-5 39 4 7 5-11z"
    />
  </svg>
);
export default MuscleSVG;

import * as React from "react";

type props = {
  props: any;
};

const MuscleSVG = (props: any) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    xmlSpace="preserve"
    className="h-full w-full object-cover"
    viewBox="0 0 589 538"
    id="7bP_svg__gen-by-synoptic-designer"
    {...props}
  >
    <path
      className="absolute bg-red-500 fill-cyan-500   ease-in duration-100 hover:[transform:scale(1.2)]"
      d="m500 143 10 15 8 30-9-5-9-15zM441 177l-31 10 2 15 33 44-6-45zM452 177l31 10-2 15-33 44 6-43zM532 184l11 18 5 25 16 29-9-5-19-35-9-13zM520 193l-9-4 4 16 28 45 5 12 3-10zM361 184l-11 19-5 23-16 30 9-5 20-37 8-13zM373 193l8-4-3 15-27 44-6 13-4-9zM434 240l-34 21-1 24 4 17 37-11 5-15zM459 239l-10 36 3 15 37 12 4-16-1-25zM442 295h-8l-8 6 9 44 8-20 1-15zM451 294l9 2 8 6-10 43-7-19-2-16z"
    />
    <path
      className="bg-red-500 fill-green-500"
      d="m397 293 5 17 13-8-3 22-2 35-12 19-1-27-3-13-1-23zM497 292l-5 17-13-7 4 25 2 32 11 19 1-25 3-13 2-24zM420 301l13 48-9 49-10-33 2-41zM474 301l4 25 2 40-10 32-9-48zM410 366l-8 14 6 17 9-9zM485 367l-8 22 9 8 6-17zM398 383l-2 16-9 29-2 31 4 10 7-9 3-31 5-21v-10zM417 394l-5 6-5 10-5 20-2 27 9 19 11-22 1-51zM477 394l-4 8 1 52 11 21 10-18-4-29-5-22zM495 383l4 19 8 25 2 32-5 9-5-7-4-33-6-27zM396 466h4l8 14-7 43-5-15-4-36zM493 466h5l4 6-4 35-4 15-7-41zM390 484l5 37-5 7-3-10zM504 482l-5 39 4 7 5-11z"
    />
  </svg>
);
export default MuscleSVG;

1 replies

Gaming

Programming