Skip to content

Instantly share code, notes, and snippets.

@angjez

angjez/toggle.tsx

Last active July 25, 2022 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save angjez/12f2622d75bc9d52bddaf5ecc861a954 to your computer and use it in GitHub Desktop.
Save angjez/12f2622d75bc9d52bddaf5ecc861a954 to your computer and use it in GitHub Desktop.
Download ZIP
Toggle
Raw
toggle.tsx
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.1103 6.20422 20.1036 6.22032 20.1197L5.15966 21.1803ZM6.77998 21.74H8.94998V20.24H6.77998V21.74ZM8.94998 21.74C9.94159 21.74 11.0157 21.035 11.2782 19.9694L9.82178 19.6106C9.74431 19.925 9.33841 20.24 8.94998 20.24V21.74ZM11.2625 20.0241L12.6325 15.8541L11.2075 15.3859L9.83747 19.5559L11.2625 20.0241ZM12.6251 15.8756C12.8462 15.2657 12.7757 14.6253 12.4096 14.1294C12.0474 13.6391 11.4633 13.38 10.83 13.38V14.88C11.0567 14.88 11.1626 14.9659 11.2029 15.0206C11.2393 15.0697 11.2838 15.1743 11.2149 15.3644L12.6251 15.8756ZM10.83 13.38H8.53999V14.88H10.83V13.38ZM8.53999 13.38C8.58467 13.38 8.63304 13.3996 8.66876 13.4403C8.68688 13.461 8.6997 13.4849 8.70656 13.5087C8.71358 13.533 8.71203 13.5489 8.71169 13.5512L7.22829 13.3286C7.09818 14.196 7.75565 14.88 8.53999 14.88V13.38ZM8.71075 13.5573L9.00075 11.7274L7.51923 11.4926L7.22923 13.3225L8.71075 13.5573ZM8.99313 11.7681C9.18729 10.8679 8.61406 9.92413 7.75715 9.63849L7.28281 11.0615C7.4459 11.1159 7.55269 11.3321 7.52685 11.4519L8.99313 11.7681ZM7.77997 9.6465C7.35393 9.48906 6.91448 9.52742 6.5596 9.6496C6.20986 9.77 5.86248 9.99909 5.63878 10.3298L6.8812 11.1702C6.88085 11.1707 6.88372 11.1665 6.89163 11.1586C6.89947 11.1507 6.91094 11.1406 6.92649 11.1295C6.95839 11.1066 7.00016 11.0843 7.04787 11.0679C7.15048 11.0326 7.22603 11.0409 7.25999 11.0535L7.77997 9.6465ZM5.63705 10.3323L3.29704 13.8223L4.54292 14.6577L6.88293 11.1677L5.63705 10.3323ZM1.75 19.28V13.6801H0.25V19.28H1.75ZM1.75 13.6801C1.75 13.3633 1.82064 13.3471 1.78151 13.3836C1.75516 13.4081 1.79957 13.34 2.14 13.34V11.84C1.68043 11.84 1.15484 11.9169 0.758486 12.2865C0.349362 12.6681 0.25 13.1969 0.25 13.6801H1.75ZM2.14 13.34H2.71V11.84H2.14V13.34ZM2.71 13.34C3.05043 13.34 3.09484 13.4081 3.06849 13.3836C3.02936 13.3471 3.1 13.3633 3.1 13.6801H4.6C4.6 13.1969 4.50064 12.6681 4.09151 12.2865C3.69516 11.9169 3.16957 11.84 2.71 11.84V13.34ZM3.1 13.6801V19.28H4.6V13.6801H3.1ZM3.1 19.28C3.1 19.5968 3.02936 19.613 3.06853 19.5765C3.09489 19.5519 3.05049 19.62 2.71 19.62V21.12C3.16951 21.12 3.69511 21.0431 4.09147 20.6735C4.50064 20.292 4.6 19.7632 4.6 19.28H3.1ZM2.71 19.62H2.14V21.12H2.71V19.62ZM2.14 19.62C1.79418 19.62 1.75139 19.5524 1.77948 19.5784C1.82189 19.6176 1.75 19.6047 1.75 19.28H0.25C0.25 19.7653 0.348112 20.2974 0.760518 20.6791C1.15861 21.0476 1.68582 21.12 2.14 21.12V19.62Z"
fill={theme.colors.orange}
strokeDasharray="0 1"
/>
<motion.path
d="M16.31 1.34998L15.7797 1.88031L15.8133 1.91395L15.8509 1.94308L16.31 1.34998ZM11.45 2.20996L12.1625 2.44405L12.1714 2.41701L12.1782 2.38938L11.45 2.20996ZM10.08 6.38L10.7851 6.6356L10.789 6.6249L10.7925 6.61409L10.08 6.38ZM14.03 8.56006L14.7708 8.67745L14.7717 8.67131L14.03 8.56006ZM13.74 10.39L14.4731 10.5481L14.4775 10.5279L14.4808 10.5074L13.74 10.39ZM14.48 11.65L14.74 10.9465L14.7286 10.9423L14.7172 10.9385L14.48 11.65ZM15.74 11.25L16.3612 11.6702L16.3629 11.6677L15.74 11.25ZM18.5391 2.12687L16.7691 0.756883L15.8509 1.94308L17.6209 3.31307L18.5391 2.12687ZM16.8403 0.81965C16.5915 0.570791 16.2608 0.441436 16.013 0.37175C15.7472 0.296989 15.4639 0.26001 15.22 0.26001V1.76001C15.3261 1.76001 15.4728 1.77802 15.607 1.81574C15.6722 1.83408 15.7227 1.85384 15.7575 1.87115C15.7947 1.88968 15.7958 1.89642 15.7797 1.88031L16.8403 0.81965ZM15.22 0.26001H13.05V1.76001H15.22V0.26001ZM13.05 0.26001C12.0584 0.26001 10.9843 0.96495 10.7218 2.03054L12.1782 2.38938C12.2557 2.07497 12.6616 1.76001 13.05 1.76001V0.26001ZM10.7375 1.97587L9.36747 6.14591L10.7925 6.61409L12.1625 2.44405L10.7375 1.97587ZM9.3749 6.1244C9.1538 6.73432 9.22427 7.37474 9.59045 7.87056C9.95255 8.36086 10.5367 8.62 11.17 8.62V7.12C10.9433 7.12 10.8374 7.03414 10.7971 6.97944C10.7607 6.93026 10.7162 6.82569 10.7851 6.6356L9.3749 6.1244ZM11.17 8.62H13.46V7.12H11.17V8.62ZM13.46 8.62C13.4154 8.62 13.367 8.60041 13.3313 8.55969C13.3131 8.53903 13.3003 8.51511 13.2934 8.4913C13.2864 8.46694 13.288 8.45104 13.2883 8.4488L14.7717 8.67131C14.9018 7.80389 14.2443 7.12 13.46 7.12V8.62ZM13.2892 8.44267L12.9992 10.2726L14.4808 10.5074L14.7708 8.67745L13.2892 8.44267ZM13.0069 10.2319C12.8127 11.1321 13.3859 12.0759 14.2428 12.3615L14.7172 10.9385C14.5541 10.8841 14.4473 10.6679 14.4731 10.5481L13.0069 10.2319ZM14.22 12.3535C14.6461 12.5109 15.0855 12.4726 15.4404 12.3504C15.7901 12.23 16.1375 12.0009 16.3612 11.6702L15.1188 10.8298C15.1191 10.8293 15.1163 10.8335 15.1084 10.8414C15.1005 10.8493 15.0891 10.8594 15.0735 10.8705C15.0416 10.8934 14.9998 10.9157 14.9521 10.9321C14.8495 10.9674 14.7739 10.9591 14.74 10.9465L14.22 12.3535ZM16.3629 11.6677L18.7029 8.17768L17.4571 7.34234L15.1171 10.8323L16.3629 11.6677ZM20.25 2.71997V8.31995H21.75V2.71997H20.25ZM20.25 8.31995C20.25 8.63675 20.1794 8.65294 20.2185 8.61645C20.2448 8.59188 20.2004 8.66 19.86 8.66V10.16C20.3196 10.16 20.8452 10.0831 21.2415 9.71347C21.6506 9.33194 21.75 8.8031 21.75 8.31995H20.25ZM19.86 8.66H19.29V10.16H19.86V8.66ZM19.29 8.66C18.9496 8.66 18.9052 8.59188 18.9315 8.61645C18.9706 8.65293 18.9 8.63675 18.9 8.31995H17.4C17.4 8.8031 17.4994 9.33194 17.9085 9.71347C18.3048 10.0831 18.8304 10.16 19.29 10.16V8.66ZM18.9 8.31995V2.71997H17.4V8.31995H18.9ZM18.9 2.71997C18.9 2.40313 18.9706 2.38701 18.9315 2.42353C18.9051 2.44812 18.9495 2.38 19.29 2.38V0.88C18.8305 0.88 18.3049 0.956868 17.9085 1.32644C17.4994 1.70795 17.4 2.23681 17.4 2.71997H18.9ZM19.29 2.38H19.86V0.88H19.29V2.38ZM19.86 2.38C20.2058 2.38 20.2486 2.44765 20.2205 2.42163C20.1781 2.38237 20.25 2.39531 20.25 2.71997H21.75C21.75 2.23463 21.6519 1.70258 21.2395 1.32083C20.8414 0.952339 20.3142 0.88 19.86 0.88V2.38Z"
fill={theme.colors.orange}
strokeDasharray="0 1"
/>
// thubms up
<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"
/>
<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"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
strokeDasharray="0 1"
/>
// thubms down
<motion.path
d="M16.52 5.64999L13.42 3.24999C13.02 2.84999 12.12 2.64999 11.52 2.64999H7.72001C6.52001 2.64999 5.22001 3.54999 4.92001 4.74999L2.52001 12.05C2.02001 13.45 2.92001 14.65 4.42001 14.65H8.42001C9.02001 14.65 9.52001 15.15 9.42001 15.85L8.92001 19.05C8.72001 19.95 9.32001 20.95 10.22 21.25C11.02 21.55 12.02 21.15 12.42 20.55L16.52 14.45"
stroke-width="1.5"
stroke-miterlimit="10"
fill="none"
strokeWidth="2"
strokeDasharray="0 1"
/>
<motion.path
d="M21.62 5.65V15.45C21.62 16.85 21.02 17.35 19.62 17.35H18.62C17.22 17.35 16.62 16.85 16.62 15.45V5.65C16.62 4.25 17.22 3.75 18.62 3.75H19.62C21.02 3.75 21.62 4.25 21.62 5.65Z"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="2"
fill="none"
strokeDasharray="0 1"
/>
</svg>
</ToggleCircle>
</ToggleWrapper>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment