const { useState, useEffect, } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;
function App() {
const [expanded, setExpanded] = useState(false);
const [{ x, y }, set] = useSpring(() => ({
x: 188,
y: 320,
}));
const bind = useDrag(
({ movement: [x, y], velocity, down, direction: [dx], tap }) => {
if (tap) {
setExpanded(!expanded);
set({ x: expanded ? 188 : 0, y: 320 });
return;
}
if (!down) {
setExpanded(x > 96 ? false : true);
set({ x: x > 96 ? 188 : 0, y: 320 });
} else {
set({ x, y });
}
},
{
initial: () => [x.get(), y.get()],
bounds: { left: 0, right: 188, top: 0, bottom: 476 },
rubberband: false,
}
);
const appStyle = {
alignItems: "center",
backgroundColor: "#fff",
display: "flex",
height: "100vh",
justifyContent: "center",
margin: 0,
};
const phoneStyle = {
height: 554,
position: "relative",
width: 265,
};
const frameStyle = {
backgroundColor: "#000",
borderRadius: 37,
height: 554,
position: "absolute",
width: 265,
};
const screenStyle = {
backgroundColor: "#fff",
borderRadius: 26,
height: 526,
left: 13,
overflow: "hidden",
position: "absolute",
top: 12,
width: 238,
};
const backgroundStyle = {
position: "absolute",
userSelect: "none",
WebkitUserSelect: "none",
};
const logoStyle = {
fontFamily: "'Philosopher', sans-serif",
fontSize: 30,
position: "absolute",
textAlign: "center",
top: 80,
width: "100%",
};
const overlayStyle = {
position: "absolute",
};
const notchStyle = {
background: "#000",
borderRadius: 12,
height: 30,
left: 67,
position: "absolute",
top: 1,
width: 130,
};
const menuStyle = {
position: "absolute",
width: "100%",
x: x.to((x) => x * 1.6), // 1.2553
};
const menuListStyle = {
listStyle: "none",
padding: "50px 36px 0",
color: "#fff",
};
const menuItemStyle = {
alignItems: "center",
borderBottom: "1px solid #fff",
display: "flex",
fontFamily: "'Catamaran'",
fontSize: 24,
height: 50,
userSelect: "none",
WebkitUserSelect: "none",
};
// background: #443d7f;
const handleStyle = {
alignItems: "center",
borderRadius: 25,
cursor: "pointer",
display: "flex",
justifyContent: "center",
height: 50,
position: "absolute",
top: 0,
width: 50,
x,
y,
};
const backStyle = {
fill: "none",
stroke: "#fff",
strokeWidth: 4,
strokeLinecap: "round",
};
return (
<div style={appStyle}>
<div style={phoneStyle}>
<div style={frameStyle}></div>
<div style={screenStyle}>
{/* <img style={backgroundStyle} src="background.svg" /> */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="238"
height="526"
viewBox="0 0 238 526"
style={backgroundStyle}
>
<path d="M238 526H0V0h238v526" fill="#ebf3fa" />
<path
d="M-2.14 284.527V266.48L9.052 263.4c1.452-.4 2.325-1.973 1.95-3.497l-.087-.347c-.32-1.284-1.433-2.14-2.638-2.14-.23 0-.458.03-.69.092l-9.727 2.675v-71.223l81.366-22.375c.51-.14 1.026-.206 1.527-.206 2.7 0 5.178 1.912 5.89 4.777l19.154 77.083c.85 3.4-1.108 6.912-4.337 7.802l-103.6 28.485m55.566-39.524c-.227 0-.458.03-.685.093l-34.26 9.42c-1.45.4-2.328 1.973-1.948 3.498l.086.346c.317 1.284 1.43 2.14 2.64 2.14.226 0 .457-.03.684-.092l34.263-9.42c1.448-.4 2.325-1.973 1.945-3.498l-.082-.346c-.32-1.285-1.433-2.14-2.642-2.14m-41.54-25.93c-.274 0-.56.04-.858.123-1.154.317-1.87 1.08-2.156 2.29-.22.95-.17 2.08.156 3.394.33 1.315.814 2.33 1.456 3.05.603.676 1.3 1.014 2.083 1.014.274 0 .556-.04.853-.122 1.143-.314 1.86-1.076 2.145-2.287.223-.96.172-2.095-.152-3.41-.33-1.313-.807-2.326-1.44-3.04-.604-.674-1.297-1.01-2.087-1.01m7.034-1.935c-.274 0-.56.04-.857.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.17 2.08.16 3.393.325 1.315.81 2.33 1.456 3.05.603.676 1.296 1.013 2.083 1.013.27 0 .552-.04.85-.122 1.142-.315 1.855-1.077 2.14-2.287.228-.958.18-2.094-.148-3.41-.325-1.313-.807-2.326-1.44-3.04-.6-.673-1.296-1.01-2.087-1.01m10.663-2.932c-.274 0-.564.04-.86.123-1.152.318-1.868 1.082-2.154 2.292-.224.948-.17 2.08.155 3.393.33 1.314.81 2.33 1.456 3.05.604.676 1.297 1.013 2.084 1.013.274 0 .556-.04.85-.122 1.146-.314 1.86-1.076 2.145-2.287.226-.96.175-2.096-.15-3.41-.33-1.314-.81-2.328-1.44-3.04-.604-.675-1.3-1.012-2.087-1.012m7.034-1.934c-.274 0-.56.04-.86.123-1.152.317-1.872 1.08-2.154 2.29-.223.95-.168 2.08.16 3.394.325 1.314.81 2.33 1.453 3.05.603.676 1.3 1.014 2.082 1.014.274 0 .56-.04.854-.122 1.143-.315 1.86-1.077 2.14-2.287.228-.96.177-2.096-.148-3.41-.325-1.313-.806-2.327-1.44-3.04-.603-.674-1.296-1.01-2.087-1.01m7.034-1.935c-.273 0-.558.04-.856.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.168 2.08.157 3.393.33 1.314.814 2.33 1.456 3.05.607.676 1.3 1.013 2.086 1.013.27 0 .552-.04.85-.122 1.143-.315 1.86-1.077 2.14-2.287.228-.958.177-2.095-.148-3.41-.328-1.313-.806-2.326-1.44-3.04-.603-.673-1.296-1.01-2.087-1.01m7.04-1.935c-.278 0-.564.04-.862.123-1.15.317-1.87 1.08-2.153 2.29-.227.95-.172 2.08.157 3.394.325 1.314.81 2.33 1.456 3.05.603.675 1.296 1.013 2.083 1.013.27 0 .557-.04.85-.122 1.143-.314 1.86-1.077 2.14-2.287.232-.96.18-2.095-.147-3.41-.325-1.313-.807-2.326-1.437-3.04-.603-.674-1.3-1.01-2.086-1.01m10.66-2.932c-.275 0-.56.04-.863.122-1.15.318-1.87 1.08-2.152 2.29-.224.95-.17 2.08.156 3.394.33 1.314.815 2.33 1.457 3.05.603.676 1.3 1.014 2.087 1.014.27 0 .552-.04.85-.122 1.142-.315 1.855-1.077 2.14-2.287.227-.96.18-2.095-.148-3.41-.325-1.313-.807-2.327-1.44-3.04-.6-.674-1.3-1.01-2.087-1.01m7.033-1.935c-.274 0-.56.04-.857.122-1.155.317-1.87 1.08-2.157 2.29-.22.95-.17 2.08.16 3.394.324 1.314.81 2.33 1.452 3.05.602.675 1.3 1.013 2.082 1.013.274 0 .56-.042.853-.123 1.143-.314 1.86-1.077 2.145-2.287.224-.958.173-2.095-.152-3.41-.325-1.313-.807-2.326-1.44-3.04-.604-.673-1.296-1.01-2.087-1.01m7.034-1.935c-.274 0-.56.04-.857.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.168 2.08.16 3.394.325 1.314.81 2.33 1.457 3.05.603.675 1.295 1.012 2.082 1.012.27 0 .552-.04.85-.12 1.147-.316 1.855-1.078 2.14-2.288.228-.96.18-2.095-.148-3.41-.325-1.313-.806-2.326-1.437-3.04-.602-.674-1.3-1.01-2.09-1.01m7.038-1.935c-.278 0-.563.042-.86.125-1.152.317-1.872 1.08-2.158 2.29-.22.948-.164 2.078.16 3.392.33 1.315.81 2.33 1.457 3.05.6.676 1.296 1.013 2.082 1.013.274 0 .556-.04.85-.12 1.143-.316 1.86-1.08 2.145-2.29.228-.958.177-2.094-.148-3.408-.33-1.314-.81-2.327-1.44-3.04-.603-.673-1.3-1.01-2.087-1.01m-6.776-21.157c-.157 0-.306.087-.388.235l-.114.21c-.117.214-.054.49.145.626 1.942 1.297 3.437 3.335 4.063 5.85.627 2.52.267 5.065-.822 7.198-.11.22-.04.494.165.622l.195.12c.07.045.148.07.227.07.16 0 .313-.09.395-.248 1.225-2.384 1.624-5.237.924-8.058-.7-2.82-2.38-5.105-4.556-6.55-.074-.05-.152-.075-.235-.075m-1.06 1.944c-.158 0-.307.085-.393.238-.113.214-.05.49.145.62 1.52 1.04 2.685 2.645 3.18 4.625.488 1.977.222 3.982-.624 5.666-.11.217-.035.49.165.617.074.045.152.066.23.066.16 0 .314-.087.392-.247.943-1.882 1.245-4.126.693-6.337-.548-2.217-1.856-4.016-3.55-5.177-.075-.05-.157-.074-.24-.074m-.982 1.798c-.153 0-.305.087-.387.24l-.068.118c-.114.215-.055.486.14.622 1.046.75 1.85 1.882 2.193 3.265.345 1.384.172 2.784-.395 3.974-.102.218-.032.49.168.613l.114.074c.074.046.152.066.23.066.157 0 .318-.09.392-.25.68-1.42.892-3.093.48-4.748-.41-1.656-1.373-3.01-2.625-3.896-.076-.053-.162-.078-.244-.078m-1.12 2.06c-.152 0-.305.08-.387.234l-.118.21c-.11.206-.063.465.117.605.53.42.938 1.03 1.12 1.758.183.73.108 1.47-.162 2.112-.09.214-.012.466.184.585l.196.124c.074.045.15.065.23.065.17 0 .333-.097.408-.274.376-.886.477-1.903.227-2.907-.25-1.01-.814-1.842-1.55-2.422-.082-.062-.172-.09-.266-.09m-59.82 43.092c-.905 0-1.606-.99-2.095-2.967-.212-.833-.29-1.555-.243-2.167.058-.905.406-1.445 1.044-1.62.114-.03.223-.046.33-.046.484 0 .927.312 1.322.938.317.512.58 1.18.783 2.004.21.84.293 1.56.253 2.162-.054.922-.4 1.47-1.025 1.643-.13.035-.255.053-.372.053m7.034-1.935c-.904 0-1.605-.99-2.094-2.967-.207-.832-.29-1.554-.243-2.166.06-.905.407-1.445 1.045-1.62.114-.032.224-.047.333-.047.487 0 .93.313 1.324.94.317.51.576 1.18.78 2.003.207.84.293 1.56.254 2.162-.055.922-.396 1.47-1.026 1.643-.13.035-.25.052-.372.052m10.66-2.93c-.905 0-1.602-.99-2.095-2.97-.204-.83-.286-1.553-.243-2.164.06-.904.407-1.445 1.045-1.62.114-.03.224-.047.333-.047.49 0 .928.313 1.323.94.317.51.58 1.18.783 2.002.208.842.294 1.563.255 2.163-.058.923-.4 1.47-1.025 1.643-.13.036-.254.054-.376.054m7.037-1.934c-.908 0-1.604-.99-2.098-2.968-.204-.832-.286-1.554-.24-2.166.06-.905.408-1.445 1.042-1.62.113-.03.223-.047.332-.047.49 0 .928.312 1.324.938.317.512.58 1.18.782 2.003.212.842.294 1.563.255 2.164-.055.922-.4 1.47-1.026 1.642-.13.035-.255.054-.373.054m7.035-1.935c-.905 0-1.605-.99-2.095-2.967-.207-.833-.29-1.554-.242-2.166.058-.905.407-1.445 1.045-1.62.113-.032.223-.047.33-.047.488 0 .93.313 1.322.94.317.51.58 1.178.783 2.002.21.84.293 1.562.254 2.163-.056.922-.396 1.47-1.026 1.642-.126.035-.25.053-.372.053m7.034-1.934c-.904 0-1.605-.988-2.094-2.967-.208-.832-.286-1.554-.243-2.165.058-.906.406-1.446 1.044-1.62.114-.032.223-.048.333-.048.485 0 .928.313 1.323.94.317.51.575 1.18.783 2.003.207.84.29 1.56.25 2.162-.054.922-.395 1.47-1.02 1.643-.134.035-.256.053-.377.053m10.66-2.93c-.905 0-1.602-.99-2.095-2.968-.203-.833-.285-1.554-.238-2.166.06-.905.407-1.445 1.04-1.62.115-.032.224-.047.338-.047.485 0 .924.312 1.32.938.316.512.578 1.18.782 2.003.207.842.294 1.563.254 2.163-.054.923-.395 1.47-1.025 1.643-.128.035-.254.053-.375.053m7.038-1.935c-.904 0-1.6-.99-2.094-2.967-.212-.833-.29-1.554-.244-2.166.06-.905.407-1.446 1.045-1.62.115-.032.225-.047.33-.047.49 0 .928.313 1.323.938.317.512.58 1.18.783 2.004.212.84.294 1.562.255 2.162-.054.92-.4 1.47-1.025 1.642-.13.035-.254.053-.372.053m7.034-1.935c-.904 0-1.604-.99-2.094-2.967-.207-.832-.29-1.554-.242-2.166.063-.905.408-1.445 1.046-1.62.113-.03.223-.047.332-.047.486 0 .928.313 1.324.94.317.51.575 1.18.778 2.002.208.84.294 1.562.255 2.163-.055.922-.395 1.47-1.026 1.643-.13.035-.25.052-.373.052m7.035-1.934c-.905 0-1.6-.99-2.095-2.967-.207-.834-.285-1.555-.242-2.167.06-.905.407-1.445 1.045-1.62.113-.032.223-.047.333-.047.485 0 .927.313 1.323.94.313.51.58 1.178.783 2.002.206.84.292 1.562.253 2.162-.06.923-.4 1.47-1.025 1.643-.13.036-.255.053-.376.053"
fill="#cadef7"
/>
<path
d="M19.257 260.5c-1.208 0-2.32-.857-2.637-2.14l-.086-.347c-.383-1.525.497-3.1 1.947-3.497l34.26-9.42c.232-.065.46-.095.686-.095 1.208 0 2.323.858 2.64 2.142l.087.346c.38 1.526-.498 3.1-1.948 3.498l-34.26 9.42c-.23.064-.46.094-.688.094M12.567 228.942c-.785 0-1.48-.335-2.08-1.01-.646-.72-1.13-1.737-1.458-3.05-.327-1.315-.377-2.448-.16-3.394.287-1.212 1.005-1.974 2.16-2.292.295-.08.58-.124.86-.124.785 0 1.48.34 2.084 1.014.63.713 1.11 1.726 1.44 3.04.326 1.314.376 2.45.15 3.408-.284 1.21-1 1.974-2.144 2.288-.295.08-.577.12-.853.12m-.832-8.334c-.108 0-.218.018-.33.046-.64.177-.986.717-1.047 1.62-.043.612.034 1.336.242 2.17.494 1.977 1.192 2.965 2.095 2.965.12 0 .245-.018.373-.054.627-.173.97-.72 1.027-1.642.04-.6-.047-1.32-.255-2.164-.202-.823-.467-1.49-.783-2.002-.396-.625-.835-.94-1.322-.94M19.604 227.01c-.786 0-1.48-.337-2.08-1.013-.647-.722-1.133-1.738-1.456-3.05-.33-1.313-.38-2.447-.164-3.395.286-1.21 1.007-1.974 2.16-2.29.3-.08.584-.124.856-.124.79 0 1.486.34 2.088 1.012.636.712 1.115 1.728 1.438 3.04.33 1.316.378 2.45.153 3.41-.286 1.21-1 1.973-2.143 2.288-.3.082-.58.12-.853.12m-.833-8.332c-.108 0-.22.014-.333.046-.635.176-.982.716-1.043 1.62-.048.612.034 1.335.24 2.164.494 1.978 1.19 2.97 2.096 2.97.122 0 .244-.02.374-.055.63-.17.972-.718 1.023-1.64.04-.6-.044-1.324-.252-2.164-.204-.823-.465-1.492-.782-2.003-.394-.626-.836-.937-1.322-.937M30.264 224.076c-.783 0-1.48-.34-2.08-1.013-.644-.718-1.13-1.735-1.455-3.05-.327-1.314-.382-2.444-.16-3.39.284-1.212 1-1.977 2.155-2.294.298-.082.586-.122.86-.122.786 0 1.483.336 2.086 1.01.632.715 1.113 1.728 1.443 3.04.322 1.316.374 2.45.15 3.41-.29 1.21-1.003 1.97-2.147 2.288-.294.08-.575.12-.852.12m-.832-8.333c-.107 0-.218.015-.33.047-.64.175-.987.715-1.046 1.62-.045.61.035 1.333.243 2.164.49 1.98 1.188 2.968 2.092 2.968.12 0 .246-.02.374-.05.628-.176.967-.723 1.026-1.645.038-.602-.045-1.32-.256-2.162-.2-.824-.465-1.49-.78-2.005-.395-.623-.835-.937-1.324-.937M37.3 222.145c-.786 0-1.48-.34-2.085-1.015-.642-.72-1.13-1.735-1.452-3.05-.33-1.313-.383-2.442-.162-3.39.286-1.21 1.005-1.975 2.156-2.293.3-.08.586-.122.86-.122.79 0 1.487.336 2.087 1.012.635.712 1.112 1.727 1.44 3.04.33 1.31.378 2.448.15 3.407-.285 1.21-1 1.975-2.144 2.29-.293.08-.58.12-.85.12m-.835-8.333c-.11 0-.222.016-.334.045-.634.177-.98.716-1.04 1.62-.047.613.034 1.336.24 2.167.492 1.978 1.19 2.967 2.096 2.967.12 0 .242-.02.372-.052.628-.174.972-.72 1.024-1.643.043-.6-.042-1.32-.252-2.163-.204-.823-.467-1.49-.783-2.004-.396-.624-.835-.937-1.322-.937M44.336 220.21c-.788 0-1.48-.337-2.085-1.013-.645-.72-1.128-1.738-1.455-3.05-.327-1.314-.38-2.446-.16-3.395.288-1.207 1.005-1.973 2.156-2.29.3-.083.587-.12.86-.12.79 0 1.485.336 2.086 1.01.635.712 1.115 1.725 1.442 3.04.327 1.315.376 2.45.15 3.407-.285 1.21-1 1.972-2.143 2.29-.295.078-.58.12-.85.12m-.837-8.336c-.107 0-.217.018-.33.048-.64.176-.984.714-1.04 1.622-.05.61.03 1.334.237 2.163.494 1.98 1.19 2.967 2.096 2.967.12 0 .246-.015.373-.053.63-.17.97-.716 1.027-1.64.04-.6-.046-1.322-.256-2.162-.202-.826-.465-1.49-.78-2.003-.395-.627-.836-.94-1.326-.94M51.37 218.272c-.786 0-1.48-.336-2.08-1.01-.647-.722-1.133-1.735-1.456-3.05-.328-1.314-.38-2.444-.16-3.393.282-1.212 1.004-1.975 2.155-2.293.297-.083.58-.12.858-.12.79 0 1.485.335 2.09 1.01.632.713 1.11 1.727 1.437 3.04.327 1.31.377 2.45.147 3.41-.28 1.21-.995 1.97-2.14 2.284-.294.084-.58.122-.85.122m-.835-8.33c-.108 0-.22.014-.334.045-.637.174-.982.714-1.043 1.618-.043.613.036 1.335.24 2.167.494 1.978 1.19 2.97 2.097 2.97.12 0 .245-.02.374-.054.63-.174.972-.723 1.026-1.645.04-.598-.044-1.32-.252-2.16-.21-.824-.467-1.493-.784-2.004-.395-.63-.837-.94-1.323-.94M62.033 215.344c-.787 0-1.482-.34-2.082-1.013-.644-.72-1.13-1.736-1.46-3.05-.322-1.315-.377-2.444-.157-3.395.285-1.21 1.003-1.97 2.156-2.29.3-.08.584-.12.86-.12.786 0 1.485.335 2.085 1.01.634.71 1.117 1.728 1.44 3.04.328 1.314.376 2.45.15 3.408-.286 1.213-.997 1.975-2.142 2.287-.297.08-.58.124-.85.124m-.834-8.337c-.11 0-.22.016-.334.047-.637.177-.985.716-1.043 1.62-.048.613.032 1.337.24 2.168.492 1.98 1.19 2.965 2.095 2.965.12 0 .245-.015.373-.05.63-.173.97-.72 1.026-1.644.04-.6-.047-1.32-.256-2.164-.2-.825-.46-1.49-.78-2.003-.395-.624-.834-.94-1.32-.94M69.067 213.408c-.785 0-1.48-.34-2.08-1.013-.646-.72-1.13-1.737-1.457-3.05-.33-1.313-.378-2.447-.16-3.393.286-1.212 1.005-1.976 2.156-2.29.297-.083.586-.126.86-.126.79 0 1.485.34 2.085 1.013.634.712 1.116 1.725 1.445 3.038.322 1.317.374 2.45.148 3.41-.285 1.21-1 1.974-2.144 2.29-.297.077-.58.12-.853.12m-.833-8.337c-.108 0-.22.02-.33.048-.64.175-.985.717-1.044 1.62-.048.612.033 1.337.24 2.167.493 1.98 1.19 2.968 2.097 2.968.118 0 .24-.02.37-.054.63-.173.97-.718 1.026-1.64.04-.6-.044-1.322-.252-2.164-.202-.826-.465-1.492-.784-2.006-.396-.623-.837-.94-1.322-.94M76.104 211.473c-.786 0-1.48-.34-2.083-1.013-.643-.717-1.13-1.734-1.453-3.05-.33-1.313-.382-2.444-.16-3.394.284-1.21 1-1.975 2.154-2.29.3-.083.585-.122.86-.122.793 0 1.486.335 2.09 1.01.633.712 1.112 1.73 1.438 3.042.326 1.312.375 2.45.15 3.41-.288 1.21-1 1.97-2.143 2.285-.296.083-.58.123-.85.123m-.836-8.336c-.11 0-.218.016-.335.047-.633.178-.98.718-1.04 1.62-.05.615.033 1.336.24 2.168.493 1.978 1.19 2.968 2.093 2.968.124 0 .247-.02.375-.056.63-.17.97-.717 1.023-1.64.04-.602-.045-1.323-.25-2.163-.207-.823-.466-1.493-.784-2-.394-.628-.836-.943-1.323-.943M83.135 209.54c-.784 0-1.482-.335-2.084-1.013-.644-.717-1.125-1.734-1.455-3.05-.322-1.315-.375-2.443-.155-3.392.284-1.212 1-1.974 2.156-2.292.296-.08.58-.124.857-.124.788 0 1.486.338 2.088 1.012.634.713 1.112 1.726 1.44 3.04.327 1.313.377 2.45.15 3.41-.285 1.208-1 1.973-2.146 2.288-.292.08-.576.12-.85.12m-.833-8.332c-.105 0-.215.012-.328.044-.64.175-.986.717-1.046 1.622-.046.61.034 1.332.242 2.165.493 1.976 1.19 2.965 2.096 2.965.117 0 .243-.016.37-.052.627-.17.972-.72 1.028-1.642.038-.6-.045-1.32-.253-2.16-.206-.825-.47-1.495-.786-2.005-.394-.626-.838-.937-1.323-.937M73.695 190.014c-.078 0-.153-.02-.227-.066l-.197-.126c-.192-.12-.27-.37-.18-.586.266-.64.34-1.38.155-2.108-.18-.73-.588-1.337-1.12-1.76-.174-.14-.222-.403-.114-.602l.116-.215c.085-.152.238-.234.39-.234.093 0 .186.032.264.094.736.58 1.3 1.412 1.55 2.417.253 1.01.15 2.026-.226 2.91-.075.175-.238.277-.41.277"
fill="#dce9fb"
/>
<path
d="M75.63 191.23c-.078 0-.157-.02-.23-.067l-.113-.07c-.202-.126-.273-.393-.168-.617.566-1.19.738-2.59.394-3.973-.343-1.382-1.145-2.516-2.19-3.262-.198-.136-.258-.407-.142-.623l.063-.118c.082-.154.235-.24.392-.24.082 0 .164.027.24.078 1.253.887 2.216 2.238 2.626 3.894.41 1.653.202 3.33-.48 4.746-.076.16-.233.252-.393.252"
fill="#dce9fb"
/>
<path
d="M77.323 192.293c-.075 0-.154-.02-.23-.067-.2-.126-.272-.398-.164-.62.842-1.68 1.112-3.685.617-5.663-.49-1.977-1.66-3.588-3.175-4.624-.2-.135-.26-.406-.142-.623.082-.154.232-.236.39-.236.08 0 .164.024.235.075 1.696 1.158 3.003 2.958 3.554 5.172.55 2.214.246 4.455-.694 6.338-.08.16-.232.248-.393.248"
fill="#dce9fb"
/>
<path
d="M79.148 193.445c-.075 0-.154-.02-.225-.067l-.196-.123c-.203-.126-.274-.403-.16-.62 1.085-2.13 1.445-4.677.822-7.195-.63-2.518-2.13-4.558-4.068-5.855-.2-.134-.263-.407-.146-.624l.112-.21c.083-.15.233-.232.387-.232.083 0 .166.024.237.07 2.176 1.448 3.856 3.733 4.56 6.552.698 2.822.296 5.676-.926 8.056-.082.158-.236.25-.398.25"
fill="#dce9fb"
/>
<path
d="M62.455 521.204v4.265c0 .338-.1.655-.266.916-.18.278-.436.494-.737.615-.09.04-.184.07-.285.087-.09.018-.18.025-.275.025H-3.703c-.832 0-1.518-.693-1.562-1.56 0-.027-.003-.055-.003-.083v-4.266c0-.03.003-.058.003-.086.044-.863.73-1.56 1.562-1.56h64.596c.094 0 .185.01.275.028.1.018.195.046.285.084.3.12.557.34.736.615.165.264.265.577.265.92"
fill="#afcdfb"
/>
<path
d="M26.484 519.558H-3.87c-.746 0-1.356.697-1.394 1.56 0 .028-.003.056-.003.086v4.265c0 .027.003.055.003.083.038.866.648 1.56 1.394 1.56h34.604c-2.633-2.254-3.766-5.33-4.25-7.555M53.86 527.113h.735v-7.552h-.734v7.553M51.377 527.113h.733v-7.552h-.733v7.553M48.393 527.113h.735v-7.552h-.735v7.553M43.826 527.113h.734v-7.552h-.734v7.553M38.997 527.113h.736v-7.552h-.736v7.553M31.595 527.113h.733v-7.552h-.733v7.553M56.227 527.113h.734v-7.552h-.733v7.553M57.79 527.113h.733v-7.552h-.733v7.553M59.298 527.112h.735v-7.55h-.735v7.55M60.434 519.56v7.553h.456c.094 0 .187-.008.278-.025v-7.5c-.09-.02-.184-.03-.278-.03h-.456M61.453 519.67V527c.3-.12.557-.336.735-.614v-6.1c-.178-.277-.435-.495-.735-.616"
fill="#77a4e5"
/>
<path
d="M59.512 513.65v4.265c0 .34-.1.656-.268.92-.177.275-.433.49-.734.615-.09.038-.187.065-.287.083-.09.018-.18.025-.274.025H-6.648c-.834 0-1.52-.693-1.562-1.557v-4.35-.086c.044-.863.73-1.557 1.563-1.557H57.95c.093 0 .183.007.273.025.1.018.196.046.287.084.3.12.557.34.734.615.168.264.268.578.268.92"
fill="#afcdfb"
/>
<path
d="M23.54 512.007H-6.812c-.744 0-1.357.694-1.395 1.557-.003.03-.003.06-.003.087v4.265c0 .028 0 .056.002.086.038.865.65 1.56 1.395 1.56H27.79c-2.636-2.255-3.765-5.33-4.25-7.553M50.916 519.558h.735v-7.55h-.734v7.55M48.432 519.558h.735v-7.55h-.735v7.55M45.455 519.558h.734v-7.552h-.735v7.552M40.885 519.558h.736v-7.552h-.735v7.552M36.052 519.56h.734v-7.553h-.734v7.552M28.65 519.56h.73v-7.553h-.73v7.552M53.282 519.558h.736v-7.55h-.736v7.55M54.845 519.558h.735v-7.55h-.735v7.55M56.356 519.558h.734v-7.55h-.734v7.55M57.49 512.007v7.55h.46c.094 0 .184-.006.275-.024v-7.5c-.09-.02-.18-.026-.274-.026h-.46M58.51 512.116v7.334c.302-.125.557-.34.735-.616v-6.103c-.178-.275-.433-.493-.734-.614"
fill="#77a4e5"
/>
<path
d="M62.875 506.06v4.265c0 .34-.097.656-.267.92-.178.276-.435.493-.733.615-.09.038-.187.066-.285.083-.09.018-.184.026-.278.026H-3.28c-.834 0-1.52-.695-1.564-1.56v-4.35-.086c.044-.863.73-1.557 1.563-1.557H61.31c.094 0 .188.008.278.025.098.018.195.046.285.084.298.122.555.34.733.615.17.265.267.58.267.92"
fill="#afcdfb"
/>
<path
d="M26.906 504.417H-3.45c-.744 0-1.356.694-1.397 1.558v4.438c.04.863.653 1.557 1.396 1.557H31.154c-2.633-2.255-3.767-5.33-4.25-7.553M54.284 511.97h.734v-7.553h-.734v7.552M51.8 511.968h.734v-7.55H51.8v7.55M48.817 511.97h.735v-7.553h-.735v7.552M44.25 511.97h.734v-7.553h-.735v7.552M39.42 511.97h.733v-7.553h-.733v7.552M32.014 511.97h.734v-7.553h-.734v7.552M56.646 511.97h.735v-7.553h-.734v7.552M58.212 511.97h.73v-7.553h-.73v7.552M59.718 511.97h.736v-7.553h-.736v7.552M60.857 504.417v7.55h.457c.093 0 .187-.006.278-.024v-7.5c-.09-.02-.185-.026-.278-.026h-.457M61.875 504.526v7.334c.3-.122.554-.34.733-.616v-6.103c-.18-.275-.432-.492-.733-.614"
fill="#77a4e5"
/>
<path
d="M59.512 498.506v4.265c0 .343-.1.657-.268.92-.177.276-.433.494-.734.616-.09.038-.187.065-.287.083-.09.017-.18.027-.274.027H-6.648c-.834 0-1.52-.696-1.562-1.56V498.507v-.083c.044-.866.73-1.56 1.563-1.56H57.95c.093 0 .183.007.273.025.1.018.196.048.287.086.3.122.557.34.734.615.168.26.268.577.268.916"
fill="#afcdfb"
/>
<path
d="M23.54 496.863H-6.812c-.744 0-1.357.694-1.395 1.56-.003.028-.003.056-.003.084v4.264c0 .03 0 .06.002.087.038.864.65 1.56 1.395 1.56H27.79c-2.636-2.256-3.765-5.33-4.25-7.554M50.916 504.417h.735v-7.554h-.734v7.554M48.432 504.417h.735v-7.554h-.735v7.554M45.455 504.417h.734v-7.555h-.735v7.555M40.885 504.417h.736v-7.555h-.735v7.555M36.052 504.417h.734v-7.554h-.734v7.554M28.65 504.417h.73v-7.554h-.73v7.554M53.282 504.417h.736v-7.554h-.736v7.554M54.845 504.417h.735v-7.554h-.735v7.554M56.356 504.417h.734v-7.554h-.734v7.554M57.49 496.863v7.554h.46c.094 0 .184-.01.275-.028v-7.502c-.09-.018-.18-.025-.274-.025h-.46M58.51 496.974v7.33c.302-.12.557-.338.735-.614v-6.1c-.178-.277-.433-.494-.734-.616"
fill="#77a4e5"
/>
<path
d="M59.512 490.916v4.265c0 .343-.1.657-.268.92-.177.276-.433.494-.734.616-.09.038-.187.066-.287.083-.09.017-.18.027-.274.027H-6.648c-.834 0-1.52-.696-1.562-1.56V490.917v-.083c.044-.866.73-1.56 1.563-1.56H57.95c.093 0 .183.01.273.025.1.018.196.048.287.086.3.122.557.34.734.616.168.26.268.577.268.916"
fill="#afcdfb"
/>
<path
d="M23.54 489.273H-6.812c-.744 0-1.357.694-1.395 1.56-.003.028-.003.056-.003.084v4.264c0 .032 0 .06.002.087.038.864.65 1.56 1.395 1.56H27.79c-2.636-2.256-3.765-5.33-4.25-7.554M50.916 496.827h.735v-7.554h-.734v7.554M48.432 496.827h.735v-7.554h-.735v7.554M45.455 496.827h.734v-7.555h-.735v7.555M40.885 496.827h.736v-7.554h-.735v7.554M36.052 496.828h.734v-7.555h-.734v7.555M28.65 496.827h.73v-7.554h-.73v7.554M53.282 496.827h.736v-7.554h-.736v7.554M54.845 496.827h.735v-7.554h-.735v7.554M56.356 496.827h.734v-7.554h-.734v7.554M57.49 489.273v7.554h.46c.094 0 .184-.01.275-.028v-7.502c-.09-.015-.18-.025-.274-.025h-.46M58.51 489.384v7.332c.302-.122.557-.34.735-.615V490c-.178-.276-.433-.494-.734-.616"
fill="#77a4e5"
/>
<path
d="M55.58 483.327v4.267c0 .34-.1.654-.27.917-.175.277-.43.495-.73.616-.094.038-.19.066-.288.084-.09.017-.182.028-.275.028H-10.58c-.833 0-1.518-.694-1.56-1.56v-4.351-.084c.042-.866.727-1.56 1.56-1.56h64.597c.093 0 .185.008.275.026.1.02.194.047.287.085.3.12.555.337.73.615.17.26.27.578.27.917"
fill="#afcdfb"
/>
<path
d="M19.61 481.683h-30.355c-.74 0-1.357.693-1.392 1.56-.003.028-.003.056-.003.083v4.268c0 .027 0 .055.003.083.035.866.65 1.56 1.392 1.56H23.863c-2.636-2.256-3.764-5.33-4.253-7.554M46.984 489.238h.735v-7.555h-.736v7.555M44.5 489.238h.735v-7.555H44.5v7.555M41.523 489.237h.734v-7.554h-.734v7.554M36.953 489.237h.735v-7.554h-.735v7.554M32.123 489.237h.735v-7.554h-.735v7.554M24.714 489.238h.735v-7.555h-.736v7.555M49.353 489.238h.733v-7.554h-.733v7.554M50.916 489.237h.735v-7.554h-.734v7.554M52.427 489.237h.73v-7.554h-.73v7.554M53.56 481.683v7.555h.458c.093 0 .185-.01.274-.028v-7.5c-.09-.02-.18-.027-.274-.027h-.46M54.578 481.795v7.33c.3-.12.556-.338.735-.614v-6.1c-.18-.278-.435-.494-.735-.615"
fill="#77a4e5"
/>
<path
d="M57.722 475.737V480c0 .343-.1.657-.267.92-.18.277-.434.494-.734.616-.09.038-.19.066-.285.083-.09.017-.183.028-.276.028h-64.6c-.83 0-1.518-.697-1.56-1.56v-4.35-.084c.042-.866.73-1.56 1.56-1.56h64.6c.092 0 .185.008.275.025.096.018.196.05.286.087.3.12.556.336.735.615.168.26.267.577.267.917"
fill="#afcdfb"
/>
<path
d="M21.753 474.093H-8.603c-.744 0-1.358.694-1.395 1.56-.003.028-.003.056-.003.084v4.265c0 .03 0 .058.002.086.037.863.65 1.56 1.395 1.56h34.605c-2.636-2.257-3.767-5.33-4.25-7.555M49.126 481.647h.736v-7.554h-.736v7.554M46.643 481.647h.735v-7.554h-.735v7.554M43.662 481.648h.733v-7.555h-.733v7.555M39.094 481.648h.733v-7.554h-.733v7.554M34.266 481.647H35v-7.554h-.734v7.554M26.857 481.648h.734v-7.554h-.733v7.554M51.495 481.647h.733v-7.554h-.733v7.554M53.055 481.648h.735v-7.555h-.735v7.555M54.566 481.647h.735v-7.554h-.734v7.554M55.702 474.093v7.554h.458c.096 0 .185-.01.275-.028v-7.502c-.09-.017-.18-.025-.275-.025h-.458M56.72 474.205v7.33c.3-.12.56-.338.735-.614v-6.1c-.176-.28-.434-.494-.734-.615"
fill="#77a4e5"
/>
<path
d="M62.455 468.182v4.268c0 .34-.1.653-.266.916-.18.276-.436.494-.737.616-.09.038-.184.066-.285.086-.09.015-.18.025-.275.025H-3.703c-.832 0-1.518-.694-1.562-1.56 0-.028-.003-.055-.003-.083v-4.268c0-.027.003-.055.003-.083.044-.867.73-1.56 1.562-1.56h64.596c.094 0 .185.01.275.024.1.02.195.048.285.087.3.122.557.34.736.616.165.263.265.577.265.916"
fill="#afcdfb"
/>
<path
d="M26.484 466.54H-3.87c-.746 0-1.356.693-1.394 1.56 0 .027-.003.055-.003.083v4.267c0 .028.003.056.003.083.038.866.648 1.56 1.394 1.56h34.604c-2.633-2.253-3.766-5.33-4.25-7.554M53.86 474.093h.735v-7.554h-.734v7.553M51.377 474.093h.733v-7.554h-.733v7.553M48.393 474.093h.735v-7.554h-.735v7.553M43.826 474.094h.734v-7.555h-.734v7.554M38.997 474.093h.736v-7.554h-.736v7.553M31.595 474.093h.733v-7.554h-.733v7.553M56.227 474.093h.734v-7.554h-.733v7.553M57.79 474.093h.733v-7.554h-.733v7.553M59.298 474.093h.735v-7.554h-.735v7.553M60.434 466.54v7.554h.456c.094 0 .187-.01.278-.026v-7.503c-.09-.015-.184-.026-.278-.026h-.456M61.453 466.65v7.332c.3-.122.557-.34.735-.616v-6.1c-.178-.276-.435-.494-.735-.616"
fill="#77a4e5"
/>
<path
d="M59.512 460.628v4.268c0 .34-.1.656-.268.916-.177.276-.433.494-.734.616-.09.038-.187.066-.287.086-.09.015-.18.025-.274.025H-6.648c-.834 0-1.52-.695-1.562-1.56V460.627v-.083c.044-.866.73-1.56 1.563-1.56H57.95c.093 0 .183.01.273.028.1.017.196.045.287.083.3.122.557.34.734.616.168.263.268.577.268.916"
fill="#afcdfb"
/>
<path
d="M23.54 458.985H-6.812c-.744 0-1.357.694-1.395 1.56-.003.028-.003.056-.003.084v4.266c0 .028 0 .056.002.083.038.866.65 1.56 1.395 1.56H27.79c-2.636-2.254-3.765-5.33-4.25-7.555M50.916 466.54h.735v-7.555h-.734v7.554M48.432 466.54h.735v-7.555h-.735v7.554M45.455 466.54h.734v-7.556h-.735v7.555M40.885 466.54h.736v-7.556h-.735v7.555M36.052 466.54h.734v-7.555h-.734v7.555M28.65 466.54h.73v-7.555h-.73v7.554M53.282 466.54h.736v-7.555h-.736v7.554M54.845 466.54h.735v-7.555h-.735v7.554M56.356 466.54h.734v-7.555h-.734v7.554M57.49 458.985v7.554h.46c.094 0 .184-.01.275-.026v-7.5c-.09-.02-.18-.03-.274-.03h-.46M58.51 459.096v7.332c.302-.122.557-.34.735-.616v-6.1c-.178-.277-.433-.494-.734-.616"
fill="#77a4e5"
/>
<path
d="M62.875 453.04v4.266c0 .34-.097.656-.267.917-.178.278-.435.494-.733.615-.09.038-.187.066-.285.086-.09.018-.184.026-.278.026H-3.28c-.834 0-1.52-.694-1.564-1.56v-4.351-.085c.044-.866.73-1.56 1.563-1.56H61.31c.094 0 .188.01.278.028.098.018.195.046.285.084.298.12.555.34.733.615.17.264.267.578.267.917"
fill="#afcdfb"
/>
<path
d="M26.906 451.396H-3.45c-.744 0-1.356.693-1.397 1.56v4.433c.04.866.653 1.56 1.396 1.56H31.154c-2.633-2.254-3.767-5.33-4.25-7.554M54.284 458.95h.734v-7.555h-.734v7.554M51.8 458.95h.734v-7.555H51.8v7.554M48.817 458.95h.735v-7.555h-.735v7.554M44.25 458.95h.734v-7.555h-.735v7.554M39.42 458.95h.733v-7.555h-.733v7.554M32.014 458.95h.734v-7.555h-.734v7.554M56.646 458.95h.735v-7.555h-.734v7.555M58.212 458.95h.73v-7.554h-.73v7.554M59.718 458.95h.736v-7.555h-.736v7.554M60.857 451.395v7.554h.457c.093 0 .187-.01.278-.026v-7.502c-.09-.017-.185-.027-.278-.027h-.457M61.875 451.507v7.33c.3-.12.554-.336.733-.614v-6.1c-.18-.277-.432-.495-.733-.616"
fill="#77a4e5"
/>
<path
d="M59.512 445.487v4.265c0 .34-.1.655-.268.92-.177.275-.433.49-.734.614-.09.038-.187.066-.287.084-.09.018-.18.025-.274.025H-6.648c-.834 0-1.52-.694-1.562-1.557v-4.351-.086c.044-.863.73-1.556 1.563-1.556H57.95c.093 0 .183.007.273.025.1.016.196.045.287.082.3.122.557.34.734.616.168.263.268.58.268.92"
fill="#afcdfb"
/>
<path
d="M23.54 443.844H-6.812c-.744 0-1.357.694-1.395 1.557-.003.03-.003.06-.003.087v4.265c0 .028 0 .056.002.086.038.863.65 1.558 1.395 1.558H27.79c-2.636-2.254-3.765-5.33-4.25-7.552M50.916 451.395h.735v-7.55h-.734v7.55M48.432 451.395h.735v-7.552h-.735v7.552M45.455 451.395h.734v-7.552h-.735v7.552M40.885 451.395h.736v-7.552h-.735v7.552M36.052 451.396h.734v-7.552h-.734v7.552M28.65 451.395h.73v-7.55h-.73v7.55M53.282 451.395h.736v-7.55h-.736v7.55M54.845 451.395h.735v-7.55h-.735v7.55M56.356 451.395h.734v-7.552h-.734v7.552M57.49 443.843v7.552h.46c.094 0 .184-.008.275-.025v-7.502c-.09-.017-.18-.025-.274-.025h-.46M58.51 443.952v7.334c.302-.124.557-.34.735-.615v-6.102c-.178-.276-.433-.494-.734-.616"
fill="#77a4e5"
/>
<path
d="M59.512 437.897v4.265c0 .34-.1.656-.268.92-.177.275-.433.49-.734.615-.09.038-.187.065-.287.083-.09.018-.18.026-.274.026H-6.648c-.834 0-1.52-.694-1.562-1.558v-4.351-.086c.044-.862.73-1.556 1.563-1.556H57.95c.093 0 .183.007.273.025.1.017.196.045.287.083.3.12.557.34.734.615.168.263.268.58.268.92"
fill="#afcdfb"
/>
<path
d="M23.54 436.254H-6.812c-.744 0-1.357.694-1.395 1.557-.003.032-.003.06-.003.088v4.264c0 .028 0 .056.002.086.038.864.65 1.558 1.395 1.558H27.79c-2.636-2.254-3.765-5.33-4.25-7.552M50.916 443.806h.735v-7.552h-.734v7.552M48.432 443.805h.735v-7.552h-.735v7.552M45.455 443.805h.734v-7.552h-.735v7.552M40.885 443.805h.736v-7.552h-.735v7.552M36.052 443.806h.734v-7.552h-.734v7.552M28.65 443.806h.73v-7.552h-.73v7.552M53.282 443.806h.736v-7.552h-.736v7.552M54.845 443.806h.735v-7.552h-.735v7.552M56.356 443.805h.734v-7.55h-.734v7.55M57.49 436.253v7.552h.46c.094 0 .184-.007.275-.025v-7.5c-.09-.02-.18-.027-.274-.027h-.46M58.51 436.363v7.333c.302-.124.557-.34.735-.615v-6.102c-.178-.276-.433-.494-.734-.615"
fill="#77a4e5"
/>
<path
d="M55.58 430.308v4.264c0 .34-.1.656-.27.92-.175.276-.43.494-.73.615-.094.038-.19.066-.288.084-.09.018-.182.026-.275.026H-10.58c-.833 0-1.518-.694-1.56-1.558V430.308v-.087c.042-.862.727-1.556 1.56-1.556h64.597c.093 0 .185.008.275.025.1.017.194.045.287.083.3.122.555.34.73.615.17.264.27.58.27.92"
fill="#afcdfb"
/>
<path
d="M19.61 428.663h-30.355c-.74 0-1.357.694-1.392 1.558-.003.03-.003.06-.003.087v4.264c0 .03 0 .057.003.087.035.864.65 1.558 1.392 1.558H23.863c-2.636-2.254-3.764-5.328-4.253-7.552M46.984 436.216h.735v-7.552h-.736v7.552M44.5 436.216h.735v-7.552H44.5v7.552M41.523 436.215h.734v-7.552h-.734v7.552M36.953 436.215h.735v-7.55h-.735v7.55M32.123 436.215h.735v-7.552h-.735v7.552M24.714 436.216h.735v-7.552h-.736v7.552M49.353 436.216h.733v-7.552h-.733v7.552M50.916 436.215h.735v-7.552h-.734v7.552M52.427 436.215h.73v-7.552h-.73v7.552M53.56 428.664v7.552h.458c.093 0 .185-.008.274-.026v-7.5c-.09-.018-.18-.026-.274-.026h-.46M54.578 428.773v7.334c.3-.122.556-.34.735-.616v-6.102c-.18-.276-.435-.493-.735-.615"
fill="#77a4e5"
/>
<path
d="M57.722 422.717v4.265c0 .34-.1.656-.267.92-.18.275-.434.49-.734.615-.09.038-.19.065-.285.083-.09.018-.183.026-.276.026h-64.6c-.83 0-1.518-.695-1.56-1.558v-4.351-.086c.042-.862.73-1.556 1.56-1.556h64.6c.092 0 .185.007.275.025.096.017.196.045.286.082.3.122.556.34.735.616.168.263.267.577.267.92"
fill="#afcdfb"
/>
<path
d="M21.753 421.074H-8.603c-.744 0-1.358.694-1.395 1.557-.003.03-.003.06-.003.087v4.265c0 .028 0 .056.002.086.037.864.65 1.558 1.395 1.558h34.605c-2.636-2.254-3.767-5.33-4.25-7.552M49.126 428.625h.736v-7.55h-.736v7.55M46.643 428.625h.735v-7.55h-.735v7.55M43.662 428.626h.733v-7.552h-.733v7.552M39.094 428.626h.733v-7.552h-.733v7.552M34.266 428.625H35v-7.552h-.734v7.552M26.857 428.626h.734v-7.552h-.733v7.552M51.495 428.626h.733v-7.552h-.733v7.552M53.055 428.626h.735v-7.552h-.735v7.552M54.566 428.625h.735v-7.552h-.734v7.552M55.702 421.073v7.552h.458c.096 0 .185-.007.275-.025v-7.5c-.09-.02-.18-.027-.275-.027h-.458M56.72 421.182v7.334c.3-.124.56-.34.735-.615V421.8c-.176-.276-.434-.494-.734-.616"
fill="#77a4e5"
/>
<path
d="M61.485 411.615c-3.732 6.838-8.428 9.477-8.428 9.477H33.514s30.82-14.69 27.97-9.477"
fill="#d87225"
/>
<path
d="M46.477 464.516c-.51.615-.573 1.3-.322 2.033l.006.01c.468 1.354 2.006 2.866 3.794 4.378.228.192.435.37.61.534.044.043.095.084.138.13l.104.098c1.666 1.618 1.043 1.988 4.037 5.27 3.417 3.738 5.77 3.806 6.44 3.467.566-.29-.587-2.274-1.858-4.505-.063-.106-.122-.215-.188-.325-.17-.296-.338-.597-.508-.893-1.494-2.685-1.11-3.943-.755-7.934.285-3.245 4.798-18.128 4.798-18.128l-6.55-1.185s-1.97 11.85-4.143 13.675c-1.162.973-2.46.983-3.58 1.704-.078.05-.156.102-.23.155-.637.444-1.282.9-1.793 1.516"
fill="#ffb27d"
/>
<path
d="M46.478 464.516c-.512.615-.575 1.3-.325 2.034l.006.01c.568 1.352 2.072 2.86 3.8 4.363.226.197.423.38.6.55.048.043.095.083.14.128l.105.1c1.666 1.62 1.04 1.988 4.036 5.27 3.418 3.738 5.772 3.807 6.44 3.467.567-.29-.584-2.274-1.86-4.505-.665-.256-3.754-1.575-6.09-4.72-2.056-2.76-3.43-6.31-4.832-8.365-.075.05-.157.1-.228.154-.638.445-1.282.9-1.792 1.516"
fill="#233862"
/>
<path
d="M99.277 460.215c.403 2.125 3.282 1.77 6.502.942 3.22-.825 2.454.157 7.033-.377 4.583-.532 5.97-2.33 6.11-3.046.125-.636-2.14-.86-4.566-1.153-.306-.037-.612-.075-.918-.115-2.744-.362-4.75-2.224-7.24-3.75-2.358-1.447-5.877-7.345-5.877-7.345l-6.286.524s3.3 5.265 4.572 7.557c.75 1.348.712 3.13.618 4.504-.05.747-.097 1.512.05 2.26"
fill="#ffb27d"
/>
<path
d="M105.78 461.157c3.22-.825 2.454.157 7.033-.377 4.583-.532 5.97-2.33 6.11-3.046.125-.636-2.14-.86-4.566-1.153l-.024.05s-2.747 2.048-6.558 2.144c-3.11.08-6.402-.856-8.547-.82-.05.747-.097 1.512.05 2.26.402 2.126 3.28 1.77 6.5.943"
fill="#233862"
/>
<path
d="M75.2 417.96l-5.873 16.622-7.667 21.705s-2.083.21-4.072-.392c-1.835-.557-3.942-2.016-3.942-2.016s2.13-23.307 6.102-36.683c1.016-3.435 2.16-6.213 3.416-7.775 6.157-7.656 12.037 8.537 12.037 8.537"
fill="#d87225"
/>
<path
d="M21.646 402.453s38.902-13.837 47.58-10.892c8.678 2.944 34.73 57.465 34.73 57.465s-.59.823-2.19 1.456c-1.497.59-5.108.553-5.108.553s-23.513-21.2-26.312-27.38c-2.8-6.185-3.92-12.073-6.718-11.483-1.71.36-14.93 8.922-26.77 8.922H19.72c-7.41-8.392-5.337-21.693-5.337-21.693l7.263 3.053"
fill="#f99746"
/>
<path
d="M48.673 308.31c-1.6-1.14-3.603-1.414-5.013-1.442.39-.363 1.11-.448 1.11-.448-.86-.207-2.872.543-2.872.543-11.76-5.906-15.052 12.714-15.12 17.097-.07 4.38-.413 9.403-6.753 12.823-12.476 6.72-3.42 20.98-3.42 20.98.088.067 4.815 10.23 4.815 10.23-.047-3.55 16.792-20.886 25.27-25.8 2.19-2.878 3.285-8.194 3.368-8.61-.654 4.23-1.524 6.562-2.243 7.857 7.32-6.053 5.106-30.21.858-33.23"
fill="#b5453c"
/>
<path
d="M43.15 341.78c.04.025-4.174 1.537-6.984.225-2.65-1.23-4.654-5.812-4.615-5.814 1.202-.057 2.524-1.166 3.545-8.434l.513.194 8.622 3.265s-.624 2.91-1.03 5.68c-.337 2.327-.52 4.556-.05 4.885"
fill="#ffb27d"
/>
<path
d="M44.23 331.215s-.624 2.91-1.03 5.68c-4.948-.937-6.895-6.128-7.592-8.945l8.622 3.265"
fill="#ed975d"
/>
<path
d="M33.523 325.684s-2.634-4.382-3.267-8.13c-.45-2.674.844-12.59 10.315-11.16 0 0 2.752.285 5.34 2.122 2.056 1.46 5.023 4.615 1.707 13.267l-.866 2.923-13.227.978"
fill="#b5453c"
/>
<path
d="M45.516 334.105s-11.802-1.666-10.702-9.38c1.1-7.712.316-13.12 7.894-12.384 7.582.738 8.624 3.912 8.85 6.58.23 2.668-2.947 15.418-6.042 15.185"
fill="#ffb27d"
/>
<path
d="M48.1 313.002s-4.52 8.535-9.658 9.087c-5.138.55-7.082-1.183-7.082-1.183s4.247-2.567 5.83-7.975c0 0 9.097-4.62 10.91.07"
fill="#b5453c"
/>
<path
d="M47.194 313.612s2.115 2.402 2.42 4.46c.305 2.055-.013 6.14 1.13 6.18 0 0 3.31-5.763 1.08-9.675-2.36-4.148-4.63-.965-4.63-.965"
fill="#b5453c"
/>
<path
d="M12.52 402.67c.642 1.875 2.61 2.356 5.247 2.032 5.033-.618 12.506-4.17 17.893-6.63 8.207-3.743 11.942-.226 14.554-2.61 2.612-2.382-2.984-7.68 1.867-32.28 1.647-8.342-8.877-26.287-8.877-26.287s-.806 5.237-10.783-.99c-.35-.22-4.28 5.896-8.06 13.435-4.17 8.32-8.162 18.367-6.99 23.544 2.24 9.87-6.715 24.34-4.85 29.787"
fill="#2a4e96"
/>
<path
d="M12.52 402.67c.643 1.874 2.61 2.356 5.248 2.032 3.483-1.596 18.526-7.727 18.357-11.88-.25-6.15-2.89-6.346-1.025-13.936 1.498-6.096-12.402-17.43-14.62-19.89-4.168 8.317-4.28 8.712-3.11 13.888 2.24 9.87-6.715 24.34-4.85 29.786"
fill="#1e3d70"
/>
<path
d="M69.326 434.582l-7.667 21.705s-2.08.21-4.074-.392c-1.833-.557-3.94-2.016-3.94-2.016s2.13-23.307 6.1-36.683l9.58 17.385"
fill="#f99746"
/>
<path
d="M43.202 336.895s10.264 1.83 11.467 6.478c1.206 4.65 8.3 31.974 8.3 31.974s-5.218.985-7.63-1.55c-2.41-2.535-8.387-23.52-8.387-23.52l-3.75-13.382M32.418 335.906s-9.7.628-13.058 5.556c-4.726 6.934-14.106 36.492-8.73 40.433 6.055 4.44 27.547 1.162 27.547 1.162s.716-3.518-.28-5.22c-.995-1.698-17.17-4.446-17.916-5.23-.746-.786 9.333-15.313 9.333-17.668 0-2.356 3.105-19.034 3.105-19.034"
fill="#2a4e96"
/>
<path
d="M32.825 391.798h41.427l7.467-27.394H40.353l-7.53 27.394"
fill="#b5453c"
/>
<path
d="M74.106 390.733H19.948v1.066h54.158v-1.067"
fill="#b5453c"
/>
<path
d="M61.094 377.658c.262-.962-.27-1.745-1.184-1.745-.912 0-1.868.783-2.13 1.745-.262.962.265 1.742 1.18 1.742.916 0 1.87-.78 2.134-1.742"
fill="#f99746"
/>
<path
d="M111.38 353.954c0-.142 1.982-4.452 1.35-4.784-.626-.33-1.758-.28-1.887.474-.136.754.537 4.31.537 4.31"
fill="#ffb27d"
/>
<path
d="M140.956 300.395s11.62-14.685 17.768-5.288c0 0 4.588 2.002 6.25 10.217 1.692 8.382-3.605 14.753-6.346 13.178-1.756-1.01-3.087 2.226-3.087 2.226l-14.584-20.333"
fill="#233862"
/>
<path
d="M126.55 378.536c-9.238-3.578-18.134-20.203-18.134-20.203l2.912-2.146c2.428 3.733 13.342 10.9 13.342 10.9.25-3.145.61-6 1.057-8.585 3.03-17.57 9.96-22.774 11.823-23.878.3-.18.468-.25.468-.25s-.003.128-.018.374c-.03.53-.087 1.593-.185 3.054-.72 10.877-3.548 43.728-11.266 40.734"
fill="#ffb27d"
/>
<path
d="M157.455 293.617s1.56-6.572 10.742-4.518c0 0-4.397-.583-5.597 1.197 0 0 3.48-1.677 5.662-.274 2.18 1.403 2.536 6.127 2.21 7.565-.322 1.437-2.732 5.716-4.327 5.716-1.593 0-3.48-1.472-3.48-1.472l-5.21-8.215"
fill="#233862"
/>
<path
d="M171.185 396.48c-4.563-10.766-6.745-13.81-6.822-17.196-.06-2.68 1.195-5.57 3.635-12.655.574-1.67.97-3.387 1.214-5.12 1.927-13.66-5.58-28.428-10.248-29.433-1.3-.362-3.5-5.296-3.473-13.246l-.585.122-9.828 2.047s.223 3.253.23 6.317c.01 2.554-.142 4.975-.69 5.28-.708.067-1.125.113-1.125.113s-8.194 11.97-8.884 23.103c-.69 11.133 6.564 15.97-.054 38.22-6.756 22.72 39.152 8.392 36.63 2.446"
fill="#ffb27d"
/>
<path
d="M145.083 320.998s.22 3.253.228 6.318c5.5-.163 8.406-5.44 9.6-8.365L145.082 321"
fill="#e8945b"
/>
<path
d="M155.923 317.825s2.884-4.79 3.574-8.886c.494-2.925-.92-13.764-11.277-12.203 0 0-3.008.312-5.832 2.32-2.25 1.597-5.497 5.046-1.866 14.504l.938 3.196 14.463 1.07"
fill="#233862"
/>
<path
d="M143.243 323.9s13.013.226 13.02-8.3c.012-8.526 1.695-14.238-6.61-14.743-8.31-.504-9.927 2.747-10.59 5.592-.66 2.844.794 17.172 4.18 17.45"
fill="#ffb27d"
/>
<path
d="M143.726 300.648s3.563 10.002 9.03 11.48c5.47 1.48 7.84-.06 7.84-.06s-4.194-3.505-5.065-9.623c0 0-9.117-6.558-11.804-1.797"
fill="#233862"
/>
<path
d="M144.607 301.46s-2.66 2.234-3.31 4.405c-.648 2.17-.94 6.64-2.177 6.488 0 0-2.687-6.798.33-10.644 3.198-4.08 5.157-.25 5.157-.25"
fill="#233862"
/>
<path
d="M159.666 499.765c-3.273 13.698-8.202 24.2-8.202 24.2l-4.29-.312s2.103-10.53 1.982-24.757c-.084-9.947-1.253-21.703-4.99-32.927-12.837-38.57-10.764-66.642-10.764-66.642l24.145 2.97 1.124.14c.1 11.664.388 27.5.64 39.883.22 11.136.416 19.48.416 19.48 4.64 10.515 2.954 25.358-.06 37.965"
fill="#163560"
/>
<path
d="M188.108 407.91l-3.907 1.234s-12.883-22.49-14.058-28.343c-.38-1.904-1.317-5.715-2.413-9.987-2.264-8.846-5.182-19.67-5.182-19.67l-.962-4.38-3.28-14.945s6.285.677 9.955 2.292c1.22.534 2.146 1.173 2.47 1.92 2.7 6.242 5.393 21.997 7.29 33.233 1.052 6.263 1.856 11.125 2.278 12.156 1.17 2.873 4.75 18.688 7.81 26.49"
fill="#ffb27d"
/>
<path
d="M173.518 497.58c-1.39 15.58-7.502 25.66-7.502 25.66l-2.05 1.568s-1.94-10.98-3.313-24.043c-1.305-12.417-3.1-25.555-5.13-29.563-8.052-15.905-10.475-75.946-10.475-75.946l24.48-1.276c2.462 4.353 3.534 11.494 3.79 19.613.643 20.49-3.933 47.21-4.62 51.074v.008c-.058.3.027.593.162.864 4.866 10.14 5.572 21.745 4.658 32.04"
fill="#1c468a"
/>
<path
d="M144.116 301.798s2.537 10.474 9.435 13.83c0 0-6.897-6.436-7.483-13.35-.586-6.916-1.95-.48-1.95-.48"
fill="#233862"
/>
<path
d="M174.25 404.25c.048.868 0 1.56-.15 2.058-.518 1.724-2.306 2.51-6.63 2.038-2.644-.288-3.822-4.948-4.35-8.924-1.588 5.688-3.808 8.88-6.685 9.55-4.192.98-25.336 3.685-26.724-6.888-1.52-11.632 3.038-32.226 3.29-43.33-.622-3.936-.836-7.355-.766-10.29.175-7.91 2.384-12.343 4.08-14.13.48-.386.96-.63 2.888-.976.988-.177 2.353-.382 4.293-.648 0 0 .79-.094.77-.064-.358.67-5.148 8.302-4.775 10.262.393 2.054 17.377.205 18.55-.924 1.17-1.127 3.026-9.778 3.026-9.778s6.015.69 8.955 2.943l-.03.037c.357.268.622.554.777.856 3.138 6.288 6.272 22.153 8.476 33.47-5.342 3.1-10.012 2.18-11.458 1.77 1.89 13.033 6.186 27.027 6.466 32.966"
fill="#f99746"
/>
<path
d="M111.33 356.187c.003-.423.337-6.536-.7-7.82-1.03-1.284-3.146-3.113-3.81-3.055-.666.056-3.26 3.688-2.48 6.47.78 2.784 4.075 6.55 4.075 6.55l2.915-2.145"
fill="#ffb27d"
/>
<path
d="M116.076 348.71l-6.025 1.898c-.198.06-.408-.058-.468-.268l-3.443-12.08c-.06-.21.052-.433.25-.494l6.026-1.9c.2-.063.41.056.47.267l3.442 12.08c.06.21-.052.432-.252.496"
fill="#f1a34f"
/>
<path
d="M114.51 349.203l-5.463 1.722c-.356.112-.73-.1-.835-.474l-3.274-11.49c-.108-.373.094-.766.447-.877l5.466-1.722c.354-.11.727.1.832.472l3.275 11.492c.108.372-.095.765-.448.88"
fill="#d86713"
/>
<path
d="M173.518 497.58c-1.39 15.582-7.502 25.66-7.502 25.66l-2.085 2s-1.902-11.413-3.274-24.475c1.445.11 7.822.355 12.862-3.186"
fill="#ffb27d"
/>
<path
d="M159.665 499.765c-3.27 13.698-8.2 24.2-8.2 24.2l-4.292-.312s2.103-10.53 1.983-24.757c1.458.77 4.46 1.555 10.51.87"
fill="#d9935c"
/>
<path
d="M153.933 527.75h-2.74c-.918-.15-1.592-.432-2.536-.56-1.428-.2-2.088.42-2.215.56l-.026.03h-11.64c-.292-.442-.01-1.46.266-2.21.184-.51.59-.893 1.09-1.045 1.234-.378 3.666-.712 5.892-2.834 1.255-1.19 6.055-4.38 6.055-4.38l.026-.005c.1.002.607.164 2.788 2.1 1.128 1.002 3.05-1.412 3.05-1.412s.364.317.634.902c.213.46.374 1.096.247 1.88-.173 1.1.386 3.152.836 4.537.27.84.5 1.436.5 1.436s.13.692-2.227 1.003"
fill="#233862"
/>
<path
d="M154.58 518.895c-.655.483-2.034 1.438-2.95 1.565-1.236.17-3.55-3.15-3.55-3.15l.027-.006c.104.003.61.165 2.787 2.102 1.13 1 3.054-1.413 3.054-1.413s.362.316.63.902M153.933 527.75h-2.74c-.918-.15-1.592-.432-2.536-.56-1.428-.2-2.088.42-2.215.56l-.026.03h-11.64c-.292-.442-.01-1.46.266-2.21.352-.328.45 1.436.648 1.718.195.28 9.493.103 10.03-.307.534-.412 2.146-1.128 4.39-.564 1.957.49 4.84-.77 5.55-1.104.27.84.5 1.436.5 1.436s.13.692-2.227 1.003"
fill="#466aa5"
/>
<path
d="M168.556 527.75h-2.74c-.917-.15-1.596-.432-2.536-.562-1.43-.197-2.087.42-2.218.563l-.027.028h-11.638c-.29-.44-.007-1.458.265-2.208.188-.51.59-.894 1.09-1.046 1.235-.377 3.668-.71 5.894-2.833 1.254-1.19 6.055-4.38 6.055-4.38l.024-.006c.107.003.61.165 2.79 2.102 1.13 1 3.054-1.413 3.054-1.413s.36.316.63.902c.218.46.375 1.096.252 1.88-.176 1.1.384 3.152.833 4.537.268.84.5 1.436.5 1.436s.13.69-2.227 1.003"
fill="#233862"
/>
<path
d="M169.197 518.895c-.654.483-2.036 1.438-2.95 1.565-1.236.17-3.547-3.15-3.547-3.15l.022-.006c.108.003.61.165 2.79 2.102 1.13 1 3.054-1.413 3.054-1.413s.363.317.63.902M168.556 527.75h-2.74c-.917-.15-1.596-.432-2.536-.562-1.43-.197-2.087.42-2.218.563l-.027.028h-11.638c-.29-.44-.007-1.458.265-2.208.353-.33.453 1.436.648 1.717.196.282 9.494.104 10.03-.306.538-.412 2.15-1.128 4.394-.564 1.953.49 4.835-.77 5.55-1.104.267.84.498 1.436.498 1.436s.13.69-2.226 1.003"
fill="#466aa5"
/>
<path
d="M174.255 404.248c-2.904-1.02-6.63-3.735-11.106-9.818-11.85-16.112-1.008-35.047.443-35.4 1.454-.35 4.193 12.25 4.193 12.25 1.894 13.035 6.188 27.03 6.47 32.968"
fill="#ef7e29"
/>
<path
d="M137.044 333.973s-8.115 4.295-10.82 21.632c0 0 2.657 3.832 6.4 4.96.535.163 1.096.27 1.667.302 4.6.26 2.754-26.894 2.754-26.894"
fill="#f99746"
/>
<path
d="M106.2 345.782s2.506-4.06 3.12-3.835c.874.322-2.274 5.473-2.274 5.473s2.333-3.85 2.697-3.558c.83.658-.492 3.077-1.803 4.93 0 0 2.347-2.258 2.424-1.85.267 1.425-2.576 4.88-2.576 4.88l-1.59-3.82v-2.22M104.314 349.55c.12-.496.733-10.19.995-9.27.263.92.886 6.003.886 6.003l-1.882 3.267"
fill="#ffb27d"
/>
<path
d="M145.785 318.84s-.225 1.004-2.6.85c0 0-1.997-.13-1.938-1.234 0 0 1.937-.786 4.538.383"
fill="#fff"
/>
<path
d="M188.112 407.91s4.713 3.295 5.435 4.685c.718 1.39 2.398 6.503 2.398 6.503s-1.2.19-2.398-2.02c-1.205-2.21-5.164-2.022-6.485-3.22-1.32-1.2-2.857-4.715-2.857-4.715l3.907-1.233"
fill="#ffb27d"
/>
<path
d="M184.716 410.23s.786 3.88 1.747 5.016c.96 1.137 2.28 3.032 2.82 2.525.54-.503-.602-4.735-.602-4.735l-3.964-2.806M192.884 413.036c.12.19 4.262 4.822 4.262 4.822s-1.503.714-1.923 0c-.42-.717-2.34-4.822-2.34-4.822"
fill="#ffb27d"
/>
</svg>
<div style={logoStyle}>
<i>insta</i>Bank
</div>
<animated.svg
style={overlayStyle}
viewBox="0 0 238 526"
height="526"
width="238"
>
<animated.path
d={x.to({
range: [0, 188],
output: [
"M 269.60295,826 V -136 H -11 V 287 C -11,317.33323 -11.001,325 -11.001,345 -11.001,365 -11,372.66677 -11,403 V 826 Z",
"M 269.60295,826 V -136 H 228 V 287 C 228,317.13885 190,314.87925 190,345 190,375.12075 228,372.96796 228,403 V 826 Z",
],
})}
style={{ y: y.to((y) => y - 320), fill: "#4C54A1" }}
/>
</animated.svg>
<animated.div style={menuStyle}>
<ul style={menuListStyle}>
<li className="MenuItem" style={menuItemStyle}>
Withdraw
</li>
<li className="MenuItem" style={menuItemStyle}>
Deposit
</li>
<li className="MenuItem" style={menuItemStyle}>
Cash out
</li>
<li className="MenuItem" style={menuItemStyle}>
Log out
</li>
</ul>
</animated.div>
<animated.div {...bind()} style={handleStyle}>
<svg style={backStyle} viewBox="0 0 50 50" height="20" width="20">
<animated.path
d={x.to({
range: [0, 94, 188],
output: [
"M 17.967,8 32.967,25 17.967,42",
"M 25,8 25.001,25 25,42",
"M 31.700243,8 16.700243,25 31.700243,42",
],
})}
//d="M 31.700243,8 16.700243,25 31.700243,42"
/>
</svg>
</animated.div>
</div>
<div style={notchStyle}></div>
</div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
!
