├── .eslintrc.json
├── assets
    ├── logo.png
    ├── banner.png
    ├── example.jpg
    ├── example.svg
    └── signature.svg
├── postcss.config.mjs
├── components
    ├── Logo.tsx
    ├── Container.tsx
    ├── Paragraph.tsx
    ├── Icon.tsx
    ├── Wrap.tsx
    ├── AvatarPlaceholder.tsx
    ├── Link.tsx
    ├── DonateButton.tsx
    ├── Header.tsx
    ├── Saved.tsx
    ├── Footer.tsx
    ├── Modal.tsx
    ├── Menu.tsx
    ├── Example.tsx
    ├── Webcam.tsx
    ├── DownloadButton.tsx
    ├── Button.tsx
    ├── FAQs.tsx
    ├── ColorPicker.tsx
    └── Avatar.tsx
├── utilities
    ├── nanoid.ts
    ├── constants.ts
    ├── convert.ts
    ├── vision.ts
    ├── features.ts
    └── potrace.js
├── app
    ├── sitemap.ts
    ├── not-found.tsx
    ├── globals.css
    ├── layout.tsx
    ├── customize
    │   └── page.tsx
    └── page.tsx
├── tailwind.config.ts
├── .gitignore
├── next.config.ts
├── tsconfig.json
├── package.json
├── types
    └── index.ts
├── README.md
├── public
    └── logo.svg
└── LICENSE


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals"]
3 | }
4 | 


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gregives/LineAvatars.com/HEAD/assets/logo.png


--------------------------------------------------------------------------------
/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gregives/LineAvatars.com/HEAD/assets/banner.png


--------------------------------------------------------------------------------
/assets/example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gregives/LineAvatars.com/HEAD/assets/example.jpg


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/components/Logo.tsx:
--------------------------------------------------------------------------------
 1 | export function Logo() {
 2 |   return (
 3 |     <>
 4 |       <span className="whitespace-nowrap">
 5 |         Line&#8202;Avatars&#8202;
 6 |         <span className="font-normal text-zinc-500">.com</span>
 7 |       </span>
 8 |     </>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/utilities/nanoid.ts:
--------------------------------------------------------------------------------
1 | import { customAlphabet, customRandom } from "nanoid";
2 | // @ts-ignore
3 | import seedrandom from "seedrandom";
4 | 
5 | const ALPHABET =
6 |   "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
7 | 
8 | export const generateId = customAlphabet(ALPHABET, 20);
9 | 


--------------------------------------------------------------------------------
/components/Container.tsx:
--------------------------------------------------------------------------------
1 | import { twMerge } from "tailwind-merge";
2 | 
3 | type ContainerProperties = JSX.IntrinsicElements["div"];
4 | 
5 | export function Container({ className, ...properties }: ContainerProperties) {
6 |   return <div className={twMerge("px-6 py-8", className)} {...properties} />;
7 | }
8 | 


--------------------------------------------------------------------------------
/components/Paragraph.tsx:
--------------------------------------------------------------------------------
1 | import { twMerge } from "tailwind-merge";
2 | 
3 | type ParagraphProperties = JSX.IntrinsicElements["p"];
4 | 
5 | export function Paragraph({ className, ...properties }: ParagraphProperties) {
6 |   return <p className={twMerge("mb-6 last:mb-0", className)} {...properties} />;
7 | }
8 | 


--------------------------------------------------------------------------------
/app/sitemap.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from "next";
 2 | import { BASE_ORIGIN } from "@/utilities/constants";
 3 | 
 4 | export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 5 |   return [
 6 |     {
 7 |       url: `${BASE_ORIGIN}`,
 8 |       lastModified: new Date(),
 9 |     },
10 |   ];
11 | }
12 | 


--------------------------------------------------------------------------------
/components/Icon.tsx:
--------------------------------------------------------------------------------
 1 | import MaterialDesignIcon from "@mdi/react";
 2 | 
 3 | type IconProperties = React.ComponentProps<typeof MaterialDesignIcon>;
 4 | 
 5 | export function Icon(properties: IconProperties) {
 6 |   return (
 7 |     <MaterialDesignIcon size="1.25em" aria-hidden="true" {...properties} />
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/Wrap.tsx:
--------------------------------------------------------------------------------
 1 | import { twMerge } from "tailwind-merge";
 2 | 
 3 | type WrapProperties = JSX.IntrinsicElements["div"];
 4 | 
 5 | export function Wrap({ className, ...properties }: WrapProperties) {
 6 |   return (
 7 |     <div
 8 |       className={twMerge("flex flex-wrap -m-1.5 *:m-1.5", className)}
 9 |       {...properties}
10 |     />
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/Button";
 2 | import { Container } from "@/components/Container";
 3 | 
 4 | export default function NotFound() {
 5 |   return (
 6 |     <Container>
 7 |       <h1 className="font-semibold mb-6">404 page not found</h1>
 8 |       <Button href="/" className="inline-flex">
 9 |         Go home
10 |       </Button>
11 |     </Container>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .flex > * {
 6 |   @apply min-w-0 min-h-0 flex-shrink-0;
 7 | }
 8 | 
 9 | strong {
10 |   @apply font-semibold;
11 | }
12 | 
13 | :focus {
14 |   @apply outline-none;
15 | }
16 | 
17 | :focus-visible,
18 | label:has(input.sr-only:focus) {
19 |   @apply outline-dashed outline-2 outline-offset-2 outline-zinc-900;
20 | }
21 | 


--------------------------------------------------------------------------------
/components/AvatarPlaceholder.tsx:
--------------------------------------------------------------------------------
 1 | import { twMerge } from "tailwind-merge";
 2 | 
 3 | type AvatarPlaceholderProperties = JSX.IntrinsicElements["div"];
 4 | 
 5 | export function AvatarPlaceholder({
 6 |   className,
 7 |   ...properties
 8 | }: AvatarPlaceholderProperties) {
 9 |   return (
10 |     <div
11 |       className={twMerge(
12 |         "aspect-square rounded-xl bg-zinc-200 animate-pulse",
13 |         className
14 |       )}
15 |       {...properties}
16 |     />
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import defaultTheme from "tailwindcss/defaultTheme";
 3 | 
 4 | export default {
 5 |   content: [
 6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       fontFamily: {
13 |         sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
14 |       },
15 |     },
16 |   },
17 | } satisfies Config;
18 | 


--------------------------------------------------------------------------------
/components/Link.tsx:
--------------------------------------------------------------------------------
 1 | import NextLink from "next/link";
 2 | import React from "react";
 3 | import { twMerge } from "tailwind-merge";
 4 | 
 5 | type LinkProperties = React.ComponentProps<typeof NextLink>;
 6 | 
 7 | export function Link({ className, ...properties }: LinkProperties) {
 8 |   return (
 9 |     <NextLink
10 |       className={twMerge(
11 |         "rounded !outline-offset-4 hover:opacity-75 hover:saturate-150",
12 |         className
13 |       )}
14 |       {...properties}
15 |     />
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/components/DonateButton.tsx:
--------------------------------------------------------------------------------
 1 | import { mdiStar } from "@mdi/js";
 2 | import { Button } from "./Button";
 3 | import { twMerge } from "tailwind-merge";
 4 | 
 5 | type DonateButtonProperties = React.ComponentProps<typeof Button>;
 6 | 
 7 | export function DonateButton({
 8 |   className,
 9 |   ...properties
10 | }: DonateButtonProperties) {
11 |   return (
12 |     // @ts-ignore
13 |     <Button
14 |       className={twMerge("bg-yellow-400 hover:bg-yellow-500", className)}
15 |       leadingIcon={mdiStar}
16 |       href="https://donate.stripe.com/5kA7uk7GlaZw4sodQQ"
17 |       {...properties}
18 |     >
19 |       Donate
20 |     </Button>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | 
32 | # env files (can opt-in for committing if needed)
33 | .env*
34 | 
35 | # vercel
36 | .vercel
37 | 
38 | # typescript
39 | *.tsbuildinfo
40 | next-env.d.ts
41 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { twMerge } from "tailwind-merge";
 2 | import { Link } from "./Link";
 3 | import { Container } from "./Container";
 4 | import { Logo } from "./Logo";
 5 | 
 6 | type HeaderProperties = JSX.IntrinsicElements["header"];
 7 | 
 8 | export function Header({ className, ...properties }: HeaderProperties) {
 9 |   return (
10 |     <header
11 |       className={twMerge("flex justify-between", className)}
12 |       {...properties}
13 |     >
14 |       <Container className="pb-0">
15 |         <Link href="/" className="text-sm font-medium">
16 |           <Logo />
17 |         </Link>
18 |       </Container>
19 |     </header>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | import NextBundleAnalyzer from "@next/bundle-analyzer";
 3 | 
 4 | const nextConfig: NextConfig = {
 5 |   images: {
 6 |     remotePatterns: [
 7 |       {
 8 |         protocol: "https",
 9 |         hostname: "images.unsplash.com",
10 |         pathname: "/photo-*",
11 |       },
12 |       {
13 |         protocol: "https",
14 |         hostname: "plus.unsplash.com",
15 |         pathname: "/premium_photo-*",
16 |       },
17 |     ],
18 |   },
19 | };
20 | 
21 | const withBundleAnalyzer = NextBundleAnalyzer({
22 |   enabled: process.env.ANALYZE === "true",
23 | });
24 | 
25 | export default withBundleAnalyzer(nextConfig);
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/utilities/constants.ts:
--------------------------------------------------------------------------------
 1 | export const PRODUCTION_HOST = "www.lineavatars.com";
 2 | export const DEVELOPMENT_HOST = "localhost:3000";
 3 | 
 4 | export const BASE_HOST =
 5 |   typeof window === "undefined"
 6 |     ? process.env.VERCEL_ENV === "production"
 7 |       ? PRODUCTION_HOST
 8 |       : process.env.VERCEL_BRANCH_URL
 9 |       ? process.env.VERCEL_BRANCH_URL
10 |       : DEVELOPMENT_HOST
11 |     : window.location.host;
12 | 
13 | export const BASE_ORIGIN = `https://${BASE_HOST}`;
14 | 
15 | export const SEGMENTS = [
16 |   "hair",
17 |   "body",
18 |   "face",
19 |   "clothes",
20 |   "accessories",
21 | ] as const;
22 | 
23 | export const VIEWBOX = 48;
24 | 
25 | export const CROPPED_RESOLUTION = 1024;
26 | 
27 | export function capitalizeFirstLetter(string: string) {
28 |   return String(string).charAt(0).toUpperCase() + String(string).slice(1);
29 | }
30 | 


--------------------------------------------------------------------------------
/components/Saved.tsx:
--------------------------------------------------------------------------------
 1 | import { AvatarData } from "@/types";
 2 | import Link from "next/link";
 3 | import { useLocalStorage } from "usehooks-ts";
 4 | import { Avatar } from "./Avatar";
 5 | 
 6 | export function Saved() {
 7 |   const [avatars] = useLocalStorage<AvatarData[]>("avatars", [], {
 8 |     initializeWithValue: false,
 9 |   });
10 | 
11 |   if (avatars.length === 0) {
12 |     return null;
13 |   }
14 | 
15 |   return (
16 |     <div className="mt-16">
17 |       <h2 className="font-semibold">Avatars you&rsquo;ve generated</h2>
18 |       <div className="grid grid-cols-4 sm:grid-cols-5 gap-3 mt-6">
19 |         {avatars.map((avatar) => (
20 |           <Link
21 |             key={avatar.id}
22 |             className="rounded-xl"
23 |             href={`/customize?avatar=${avatar.id}`}
24 |           >
25 |             <Avatar avatar={avatar} />
26 |           </Link>
27 |         ))}
28 |       </div>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Container } from "./Container";
 2 | import { Paragraph } from "./Paragraph";
 3 | import { Logo } from "./Logo";
 4 | import { Link } from "./Link";
 5 | import { Wrap } from "./Wrap";
 6 | import { mdiStar } from "@mdi/js";
 7 | import { Icon } from "./Icon";
 8 | 
 9 | type FooterProperties = JSX.IntrinsicElements["footer"];
10 | 
11 | export function Footer(properties: FooterProperties) {
12 |   return (
13 |     <footer {...properties}>
14 |       <Container>
15 |         <Wrap className="justify-between items-center text-zinc-600 text-sm">
16 |           <Paragraph>
17 |             &copy; <Logo /> {new Date().getFullYear()}
18 |           </Paragraph>
19 |           <Link
20 |             href="https://github.com/gregives/LineAvatars.com"
21 |             className="flex items-center"
22 |           >
23 |             <Icon path={mdiStar} className="-ml-0.5 mr-1" />
24 |             Star on GitHub
25 |           </Link>
26 |         </Wrap>
27 |       </Container>
28 |     </footer>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/components/Modal.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Dialog, DialogPanel } from "@headlessui/react";
 4 | import { Container } from "./Container";
 5 | import { twMerge } from "tailwind-merge";
 6 | 
 7 | type ModalProperties = React.ComponentProps<typeof Dialog>;
 8 | 
 9 | export function Modal({ children, className, ...properties }: ModalProperties) {
10 |   return (
11 |     <Dialog as="div" className="relative z-10" {...properties}>
12 |       <div className="fixed inset-0 bg-zinc-900 bg-opacity-50" />
13 |       <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
14 |         <div className="flex min-h-full items-end justify-center p-2 sm:items-center sm:p-0">
15 |           <DialogPanel
16 |             as={Container}
17 |             className={twMerge(
18 |               "rounded-3xl bg-white shadow-xl w-full sm:my-8 sm:max-w-lg",
19 |               className
20 |             )}
21 |           >
22 |             {children}
23 |           </DialogPanel>
24 |         </div>
25 |       </div>
26 |     </Dialog>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/utilities/convert.ts:
--------------------------------------------------------------------------------
 1 | type PotraceOptions = {
 2 |   turnpolicy?: "black" | "white" | "left" | "right" | "minority" | "majority";
 3 |   turdsize?: number;
 4 |   optcurve?: boolean;
 5 |   alphamax?: number;
 6 |   opttolerance?: number;
 7 | };
 8 | 
 9 | export async function convertImageToPath(url: string, size: number) {
10 |   const { Potrace } = await import("@/utilities/potrace");
11 |   const potrace = Potrace();
12 | 
13 |   potrace.loadImageFromUrl(url);
14 |   const image = potrace.img;
15 | 
16 |   const options: PotraceOptions = {
17 |     turdsize: image.width / 10,
18 |     opttolerance: 10000000,
19 |     alphamax: 4 / 3,
20 |   };
21 | 
22 |   potrace.setParameter(options);
23 | 
24 |   return new Promise<string | undefined>((resolve) => {
25 |     potrace.process(() => {
26 |       const svg = potrace.getSVG(size / image.width);
27 | 
28 |       const template = document.createElement("template");
29 |       template.innerHTML = svg;
30 |       const path = template.content.querySelector("path")?.getAttribute("d");
31 | 
32 |       resolve(path ?? undefined);
33 |     });
34 |   });
35 | }
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "avatars",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "analyze": "ANALYZE=true next build"
11 |   },
12 |   "dependencies": {
13 |     "@headlessui/react": "^2.2.0",
14 |     "@luncheon/simplify-svg-path": "^0.2.0",
15 |     "@mdi/js": "^7.4.47",
16 |     "@mdi/react": "^1.6.1",
17 |     "@mediapipe/tasks-vision": "^0.10.20",
18 |     "@next/bundle-analyzer": "^15.1.6",
19 |     "nanoid": "^5.0.9",
20 |     "next": "^15.1.6",
21 |     "paper": "^0.12.18",
22 |     "react": "^19.0.0",
23 |     "react-dom": "^19.0.0",
24 |     "react-shadow": "^20.6.0",
25 |     "react-webcam": "^7.2.0",
26 |     "tailwind-merge": "^3.0.1",
27 |     "usehooks-ts": "^3.1.0"
28 |   },
29 |   "devDependencies": {
30 |     "@types/image-blob-reduce": "^4.1.4",
31 |     "@types/node": "^20.17.17",
32 |     "@types/react": "^18.3.18",
33 |     "@types/react-dom": "^18.3.5",
34 |     "eslint": "^8.57.1",
35 |     "eslint-config-next": "^15.1.6",
36 |     "postcss": "^8.5.1",
37 |     "tailwindcss": "^3.4.17",
38 |     "typescript": "^5.7.3"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
 1 | import { SEGMENTS } from "@/utilities/constants";
 2 | import { NormalizedLandmark } from "@mediapipe/tasks-vision";
 3 | 
 4 | export type Segment = (typeof SEGMENTS)[number];
 5 | 
 6 | export type Bounds = {
 7 |   minX: number;
 8 |   maxX: number;
 9 |   minY: number;
10 |   maxY: number;
11 |   scale: number;
12 | };
13 | 
14 | export type AvatarData = {
15 |   id: string;
16 |   createdAt: number;
17 |   updatedAt: number;
18 |   segments: Record<Segment, string | undefined>;
19 |   landmarks: NormalizedLandmark[];
20 |   bounds: Bounds;
21 |   customizations?: {
22 |     strokeWidth?: number;
23 |     colors?: {
24 |       outline?: string;
25 |       background?: string;
26 |       hair?: string;
27 |       body?: string;
28 |       face?: string;
29 |       clothes?: string;
30 |       accessories?: string;
31 |       eyes?: string;
32 |       eyebrows?: string;
33 |       nose?: string;
34 |       lips?: string;
35 |       shadow?: string;
36 |     };
37 |   };
38 | };
39 | 
40 | export type Features = {
41 |   eyes: NormalizedLandmark[];
42 |   eyebrows: NormalizedLandmark[][];
43 |   nose: NormalizedLandmark[];
44 |   noseDirection: number;
45 |   lips: NormalizedLandmark[][];
46 |   shadow: NormalizedLandmark[];
47 | };
48 | 
49 | export type Feature = keyof Features;
50 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | import { BASE_ORIGIN } from "@/utilities/constants";
 5 | import { Header } from "@/components/Header";
 6 | import { Footer } from "@/components/Footer";
 7 | 
 8 | const sans = Inter({
 9 |   subsets: ["latin"],
10 |   display: "swap",
11 |   variable: "--font-sans",
12 | });
13 | 
14 | export const metadata: Metadata = {
15 |   title: {
16 |     template: "%s \u2013 Line Avatars",
17 |     default: "Line Avatars \u2013 Generate a Notion-style line avatar",
18 |   },
19 |   description:
20 |     "Generate Notion-style line avatars for your social media profile photo. Take a photo and we'll use AI to generate a line avatar for you in 30 seconds, for free!",
21 |   metadataBase: new URL(BASE_ORIGIN),
22 |   alternates: {
23 |     canonical: "./",
24 |   },
25 | };
26 | 
27 | export default function RootLayout({
28 |   children,
29 | }: {
30 |   children: React.ReactNode;
31 | }) {
32 |   return (
33 |     <html lang="en" className={`${sans.variable} h-full text-zinc-900`}>
34 |       <head>
35 |         <link rel="icon" href="/logo.svg" type="image/svg+xml" />
36 |       </head>
37 |       <body className="h-full">
38 |         <div className="w-full max-w-xl mx-auto min-h-full flex flex-col">
39 |           <Header />
40 |           <main className="flex-grow">{children}</main>
41 |           <Footer />
42 |         </div>
43 |       </body>
44 |     </html>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/components/Menu.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 |   Menu as HeadlessMenu,
 5 |   MenuItems as HeadlessMenuItems,
 6 | } from "@headlessui/react";
 7 | import { twMerge } from "tailwind-merge";
 8 | 
 9 | export function Menu({
10 |   as = "div",
11 |   className,
12 |   ...properties
13 | }: React.ComponentProps<typeof HeadlessMenu>) {
14 |   return (
15 |     <HeadlessMenu
16 |       as={as}
17 |       className={twMerge("relative", className)}
18 |       {...properties}
19 |     />
20 |   );
21 | }
22 | 
23 | export function MenuItems({
24 |   className,
25 |   ...properties
26 | }: React.ComponentProps<typeof HeadlessMenuItems>) {
27 |   const anchor =
28 |     typeof properties.anchor === "string" ? properties.anchor : "bottom start";
29 | 
30 |   return (
31 |     <HeadlessMenuItems
32 |       anchor={{
33 |         to: anchor,
34 |         padding: 8,
35 |         ...(typeof properties.anchor === "object" ? properties.anchor : {}),
36 |       }}
37 |       className={twMerge(
38 |         "w-min z-10 py-2 rounded-lg bg-white shadow-lg border border-stone-300 focus:outline-none",
39 |         anchor.startsWith("bottom")
40 |           ? "mt-2"
41 |           : anchor.startsWith("top")
42 |           ? "mb-2"
43 |           : anchor.startsWith("right")
44 |           ? "ml-2"
45 |           : anchor.startsWith("left")
46 |           ? "mr-2"
47 |           : undefined,
48 |         className
49 |       )}
50 |       {...properties}
51 |     />
52 |   );
53 | }
54 | 
55 | export { MenuButton, MenuItem } from "@headlessui/react";
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Graphic showing a photo of a person turning into a line avatar](./assets/banner.png)
 2 | 
 3 | # [LineAvatars.com](https://lineavatars.com)
 4 | 
 5 | Website to generate Notion-style line avatars using Google's [MediaPipe AI models](https://ai.google.dev/edge/mediapipe/solutions/guide). The website runs entirely client-side and stores generated avatars in LocalStorage.
 6 | 
 7 | The website is built with the following technologies:
 8 | 
 9 | - [MediaPipe Solutions](https://ai.google.dev/edge/mediapipe/solutions/guide)
10 | - [Potrace](https://potrace.sourceforge.net/)
11 | - [Next.js](https://nextjs.org)
12 | - [Tailwind CSS](https://tailwindcss.com/)
13 | 
14 | ## Getting Started
15 | 
16 | Clone the repository:
17 | 
18 | ```bash
19 | git clone https://github.com/gregives/lineavatars.com
20 | ```
21 | 
22 | Install the dependencies using Yarn:
23 | 
24 | ```bash
25 | yarn
26 | ```
27 | 
28 | Run the development server:
29 | 
30 | ```bash
31 | yarn dev
32 | ```
33 | 
34 | Open [http://localhost:3000](http://localhost:3000) in your browser to see the development server.
35 | 
36 | ## Contribute
37 | 
38 | I would appreciate help improving LineAvatars.com and the avatars it generates. Here is a list of some improvements I have in mind:
39 | 
40 | - [ ] Add suite of images to test
41 | - [ ] Support all skin tones
42 | - [ ] Support glasses and other accessories
43 | - [ ] Support hats
44 | - [ ] Add detail to ears
45 | 
46 | ## License
47 | 
48 | Due to [Potrace](https://potrace.sourceforge.net/) being distributed under the GNU General Public License, LineAvatars.com must also be distributed under the GNU General Public License. See the [LICENSE](./LICENSE) file for details.
49 | 


--------------------------------------------------------------------------------
/components/Example.tsx:
--------------------------------------------------------------------------------
 1 | import { twMerge } from "tailwind-merge";
 2 | 
 3 | type ExampleProperties = JSX.IntrinsicElements["div"];
 4 | 
 5 | export function Example({
 6 |   className,
 7 |   children,
 8 |   ...properties
 9 | }: ExampleProperties) {
10 |   return (
11 |     <div
12 |       className={twMerge(
13 |         "relative max-w-sm flex justify-between items-center *:w-[42%] mr-4",
14 |         className
15 |       )}
16 |       {...properties}
17 |     >
18 |       {children}
19 |       <svg
20 |         xmlns="http://www.w3.org/2000/svg"
21 |         width="65.76062"
22 |         height="20.94"
23 |         viewBox="0 0 65.76062 20.94"
24 |         className="absolute left-1/2 -translate-x-1/2 !w-[10%] fill-zinc-900"
25 |       >
26 |         <path d="M3.0696,14.35003c14.77852-4.66461,30.54831-5.6899,45.76236-2.61603,4.44585,.89825,8.8161,2.1243,13.095,3.6261,1.274,.44715,2.73515-.50817,3.0753-1.7461,.37901-1.37937-.46745-2.62652-1.7461-3.0753C47.82195,5.12165,31.2588,3.6356,15.11839,6.30519c-4.53218,.74961-8.99807,1.84099-13.37799,3.22345C-1.31727,10.49374-.01125,15.32246,3.0696,14.35003h0Z" />
27 |         <path d="M55.97417,3.76117l2.58581,4.86421,1.32984,2.5016,.66492,1.2508c.08649,.16269,.16913,.42327,.29552,.55591-.51452-.53997,1.42541-2.15361,.51312-1.82543-.8054,.28974-1.58804,.8423-2.34456,1.24356-.82749,.4389-1.65498,.87781-2.48247,1.31671-1.65498,.87781-3.30996,1.75562-4.96494,2.63342-1.15699,.61367-1.60767,2.31798-.89688,3.42047,.75851,1.17651,2.18291,1.55329,3.42047,.89688,1.93081-1.02411,3.86162-2.04822,5.79243-3.07233,.91943-.48767,1.83887-.97534,2.7583-1.46301,1.14784-.60882,2.34415-1.1119,2.8815-2.38522,.54904-1.30103,.0367-2.54313-.58127-3.70559l-1.55149-2.91853c-1.03432-1.94569-2.06865-3.89137-3.10297-5.83706-.61473-1.15638-2.31725-1.60814-3.42047-.89688-1.17565,.75796-1.55443,2.18355-.89688,3.42047h0Z" />
28 |       </svg>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/components/Webcam.tsx:
--------------------------------------------------------------------------------
 1 | import ReactWebcam from "react-webcam";
 2 | import { Modal } from "./Modal";
 3 | import { Button } from "./Button";
 4 | import { twMerge } from "tailwind-merge";
 5 | import { useEffect, useRef, useState } from "react";
 6 | 
 7 | type WebcamProperties = React.ComponentProps<typeof Modal> & {
 8 |   onCapture: (image: string) => void;
 9 | };
10 | 
11 | export function Webcam({
12 |   onCapture,
13 |   className,
14 |   ...properties
15 | }: WebcamProperties) {
16 |   const [loading, setLoading] = useState(false);
17 |   const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
18 |   const [deviceId, setDeviceId] = useState<string>();
19 | 
20 |   const webcamRef = useRef<ReactWebcam>(null);
21 | 
22 |   useEffect(() => {
23 |     (async () => {
24 |       if (properties.open) {
25 |         setDevices(await navigator.mediaDevices.enumerateDevices());
26 |       } else {
27 |         setLoading(false);
28 |       }
29 |     })();
30 |   }, [properties.open]);
31 | 
32 |   const onClick = () => {
33 |     if (webcamRef.current) {
34 |       const image = webcamRef.current.getScreenshot();
35 | 
36 |       if (image) {
37 |         setLoading(true);
38 |         onCapture(image);
39 |       }
40 |     }
41 |   };
42 | 
43 |   return (
44 |     <Modal
45 |       className={twMerge("flex flex-col space-y-4", className)}
46 |       {...properties}
47 |     >
48 |       <ReactWebcam
49 |         key={deviceId}
50 |         className="w-full aspect-square object-cover rounded-xl bg-zinc-100"
51 |         mirrored
52 |         audio={false}
53 |         videoConstraints={{
54 |           width: 1024,
55 |           height: 1024,
56 |           ...(deviceId
57 |             ? {
58 |                 deviceId,
59 |               }
60 |             : {
61 |                 facingMode: "user",
62 |               }),
63 |         }}
64 |         ref={webcamRef}
65 |       />
66 |       <Button onClick={onClick} loading={loading}>
67 |         Capture
68 |       </Button>
69 |     </Modal>
70 |   );
71 | }
72 | 


--------------------------------------------------------------------------------
/components/DownloadButton.tsx:
--------------------------------------------------------------------------------
 1 | import { mdiDownload, mdiStar } from "@mdi/js";
 2 | import { Button } from "./Button";
 3 | import { Modal } from "./Modal";
 4 | import { useState } from "react";
 5 | import { Logo } from "./Logo";
 6 | import { Paragraph } from "./Paragraph";
 7 | import { Wrap } from "./Wrap";
 8 | import Image from "next/image";
 9 | import signature from "@/assets/signature.svg";
10 | import { DonateButton } from "./DonateButton";
11 | 
12 | function download(filename: string, avatar: string) {
13 |   const element = document.createElement("a");
14 |   element.setAttribute(
15 |     "href",
16 |     "data:image/svg+xml;charset=utf-8," + encodeURIComponent(avatar)
17 |   );
18 |   element.setAttribute("download", filename);
19 | 
20 |   element.style.display = "none";
21 |   document.body.appendChild(element);
22 |   element.click();
23 |   document.body.removeChild(element);
24 | }
25 | 
26 | type DownloadButtonProperties = React.ComponentProps<typeof Button>;
27 | 
28 | export function DownloadButton(properties: DownloadButtonProperties) {
29 |   const [open, setOpen] = useState(false);
30 | 
31 |   const downloadAvatar = () => {
32 |     const avatar = document.getElementById("download");
33 | 
34 |     if (avatar) {
35 |       const shadowRoot = avatar.shadowRoot;
36 | 
37 |       if (shadowRoot) {
38 |         download(
39 |           "avatar-" +
40 |             new Date().toISOString().split(/\D/).slice(0, 6).join("") +
41 |             ".svg",
42 |           shadowRoot.innerHTML
43 |         );
44 |       }
45 |     }
46 | 
47 |     setOpen(true);
48 |   };
49 | 
50 |   return (
51 |     <>
52 |       <Button
53 |         leadingIcon={mdiDownload}
54 |         {...properties}
55 |         onClick={downloadAvatar}
56 |       >
57 |         Download
58 |       </Button>
59 |       <Modal open={open} onClose={setOpen}>
60 |         <h2 className="font-semibold">We hope you like your avatar</h2>
61 |         <Paragraph className="my-6">
62 |           If you want to show your appreciation for your new avatar, please
63 |           consider donating. Just $1 will help us to make <Logo /> even better.
64 |         </Paragraph>
65 |         <Image
66 |           src={signature}
67 |           alt="Greg Ives"
68 |           className="max-w-28 -ml-1 mb-1"
69 |         />
70 |         <Paragraph className="text-sm mb-6">
71 |           Creator of <Logo />
72 |         </Paragraph>
73 |         <Wrap>
74 |           <DonateButton />
75 |           <Button color="zinc" onClick={() => setOpen(false)}>
76 |             No thanks
77 |           </Button>
78 |         </Wrap>
79 |       </Modal>
80 |     </>
81 |   );
82 | }
83 | 


--------------------------------------------------------------------------------
/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { twMerge } from "tailwind-merge";
 4 | import NextLink from "next/link";
 5 | import React from "react";
 6 | import { Icon } from "./Icon";
 7 | import { mdiLoading } from "@mdi/js";
 8 | 
 9 | type ButtonProperties = (
10 |   | ({
11 |       href?: undefined;
12 |     } & JSX.IntrinsicElements["button"])
13 |   | Omit<React.ComponentProps<typeof NextLink>, "as">
14 | ) & {
15 |   size?: "xs" | "sm" | "md" | "lg" | "xl";
16 |   color?: "zinc" | "teal";
17 |   variant?: "fill" | "soft" | "outline" | "menu" | "text";
18 |   disabled?: boolean;
19 |   loading?: boolean;
20 |   leadingIcon?: string;
21 |   trailingIcon?: string;
22 |   as?: React.ElementType;
23 | };
24 | 
25 | const styles = {
26 |   fill: {
27 |     teal: "bg-teal-600 hover:bg-teal-500 text-white",
28 |     zinc: "bg-zinc-700 hover:bg-zinc-500 text-white",
29 |   },
30 |   soft: {
31 |     teal: "bg-teal-200 hover:bg-teal-300",
32 |     zinc: "bg-zinc-100 hover:bg-zinc-200",
33 |   },
34 |   outline: {
35 |     teal: "ring-2 ring-inset ring-teal-200 hover:ring-teal-400",
36 |     zinc: "ring-2 ring-inset ring-zinc-200 hover:ring-zinc-400",
37 |   },
38 |   menu: {
39 |     teal: "hover:bg-teal-100 ui-active:bg-teal-100",
40 |     zinc: "hover:bg-zinc-100 ui-active:bg-zinc-100",
41 |   },
42 |   text: {
43 |     teal: "hover:bg-teal-100 text-teal-700",
44 |     zinc: "hover:bg-zinc-100",
45 |   },
46 | };
47 | 
48 | export function Button({
49 |   children,
50 |   className,
51 |   href,
52 |   size = "md",
53 |   color = "teal",
54 |   variant = "soft",
55 |   disabled,
56 |   loading,
57 |   leadingIcon,
58 |   trailingIcon,
59 |   as: Component = href === undefined ? "button" : NextLink,
60 |   ...properties
61 | }: ButtonProperties) {
62 |   className = twMerge(
63 |     "flex justify-center items-center font-medium rounded-xl",
64 |     size === "xs"
65 |       ? "py-1 px-2 space-x-0.5 text-xs"
66 |       : size === "sm"
67 |       ? "py-1.5 px-3 space-x-1 text-sm"
68 |       : size === "md"
69 |       ? "py-2 px-4 space-x-1.5 text-base"
70 |       : size === "lg"
71 |       ? "py-2.5 px-5 space-x-2 text-base sm:text-lg"
72 |       : "py-2.5 px-5 space-x-2 sm:py-3 sm:px-6 sm:space-x-2.5 text-lg sm:text-xl",
73 |     variant === "menu" && "rounded-none",
74 |     styles[variant][color],
75 |     className
76 |   );
77 | 
78 |   return (
79 |     <Component
80 |       className={className}
81 |       type={Component === "button" ? "button" : undefined}
82 |       href={href}
83 |       {...properties}
84 |     >
85 |       {!trailingIcon && loading ? (
86 |         <Icon className="-my-1 animate-spin" path={mdiLoading} />
87 |       ) : leadingIcon ? (
88 |         <Icon className="-my-1" path={leadingIcon} />
89 |       ) : null}
90 |       {children && <span>{children}</span>}
91 |       {trailingIcon && loading ? (
92 |         <Icon className="-my-1 animate-spin" path={mdiLoading} />
93 |       ) : trailingIcon ? (
94 |         <Icon className="-my-1" path={trailingIcon} />
95 |       ) : null}
96 |     </Component>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/components/FAQs.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Disclosure,
  3 |   DisclosureButton,
  4 |   DisclosurePanel,
  5 | } from "@headlessui/react";
  6 | import { twMerge } from "tailwind-merge";
  7 | import { Icon } from "./Icon";
  8 | import { mdiChevronDown, mdiStar } from "@mdi/js";
  9 | import { Link } from "./Link";
 10 | import { Logo } from "./Logo";
 11 | import { Button } from "./Button";
 12 | import { DonateButton } from "./DonateButton";
 13 | 
 14 | const questions = [
 15 |   {
 16 |     question: "What is a line avatar?",
 17 |     answer: (
 18 |       <>
 19 |         A line avatar, or a Notion-style line avatar, is a simple representation
 20 |         of a person&rsquo;s face. It is most often used as a profile photo for
 21 |         social media.
 22 |       </>
 23 |     ),
 24 |   },
 25 |   {
 26 |     question: "Who first created line avatars?",
 27 |     answer: (
 28 |       <>
 29 |         Line avatars were popularised by Notion, a productivity app. Notion have
 30 |         since created{" "}
 31 |         <Link
 32 |           href="https://faces.notion.com"
 33 |           className="underline underline-offset-2"
 34 |         >
 35 |           Notion Faces
 36 |         </Link>{" "}
 37 |         where you can create your own (although it doesn&rsquo;t use your webcam
 38 |         like we do).
 39 |       </>
 40 |     ),
 41 |   },
 42 |   {
 43 |     question: "How much do line avatars cost?",
 44 |     answer: (
 45 |       <>
 46 |         Line avatars can cost as much as $150 when they are created for you by a
 47 |         designer, however, by using AI we can create you one for free!
 48 |       </>
 49 |     ),
 50 |   },
 51 |   {
 52 |     question: (
 53 |       <>
 54 |         Is <Logo /> safe to use?
 55 |       </>
 56 |     ),
 57 |     answer: (
 58 |       <>
 59 |         Yes, the processing is done entirely in your browser and you can view
 60 |         the source code on{" "}
 61 |         <Link
 62 |           href="https://github.com/gregives/LineAvatars.com"
 63 |           className="underline underline-offset-2"
 64 |         >
 65 |           GitHub
 66 |         </Link>
 67 |         .
 68 |       </>
 69 |     ),
 70 |   },
 71 |   {
 72 |     question: (
 73 |       <>
 74 |         How can I support <Logo />?
 75 |       </>
 76 |     ),
 77 |     answer: (
 78 |       <>
 79 |         If you know how to code, you can help to improve <Logo /> by
 80 |         contributing to our{" "}
 81 |         <Link
 82 |           href="https://github.com/gregives/LineAvatars.com"
 83 |           className="underline underline-offset-2"
 84 |         >
 85 |           GitHub repository
 86 |         </Link>
 87 |         . If you don&rsquo;t know how to code, any donation would be greatly
 88 |         appreciated.
 89 |         <div className="mt-6">
 90 |           <DonateButton className="inline-flex" />
 91 |         </div>
 92 |       </>
 93 |     ),
 94 |   },
 95 | ];
 96 | 
 97 | type FAQsProperties = JSX.IntrinsicElements["div"];
 98 | 
 99 | export function FAQs({ className, ...properties }: FAQsProperties) {
100 |   return (
101 |     <div className={twMerge("space-y-4", className)} {...properties}>
102 |       {questions.map(({ question, answer }, index) => (
103 |         <Disclosure key={index} as="div" className="space-y-2">
104 |           <h2 className="relative font-semibold">
105 |             <DisclosureButton className="group text-left rounded-lg">
106 |               {question}
107 |               <span className="whitespace-nowrap">
108 |                 &nbsp;
109 |                 <Icon
110 |                   path={mdiChevronDown}
111 |                   className="inline -mt-0.5 group-data-[open]:rotate-180"
112 |                 />
113 |               </span>
114 |             </DisclosureButton>
115 |           </h2>
116 |           <DisclosurePanel as="p">{answer}</DisclosurePanel>
117 |         </Disclosure>
118 |       ))}
119 |     </div>
120 |   );
121 | }
122 | 


--------------------------------------------------------------------------------
/app/customize/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Avatar } from "@/components/Avatar";
  4 | import { AvatarPlaceholder } from "@/components/AvatarPlaceholder";
  5 | import { Button } from "@/components/Button";
  6 | import { ColorPicker } from "@/components/ColorPicker";
  7 | import { Container } from "@/components/Container";
  8 | import { DownloadButton } from "@/components/DownloadButton";
  9 | import { Paragraph } from "@/components/Paragraph";
 10 | import { Saved } from "@/components/Saved";
 11 | import { Wrap } from "@/components/Wrap";
 12 | import { AvatarData } from "@/types";
 13 | import { capitalizeFirstLetter } from "@/utilities/constants";
 14 | import { mdiAutorenew } from "@mdi/js";
 15 | import { useSearchParams } from "next/navigation";
 16 | import { Suspense } from "react";
 17 | import { useLocalStorage } from "usehooks-ts";
 18 | 
 19 | const CUSTOMIZABLE_FEATURES = [
 20 |   "outline",
 21 |   "background",
 22 |   "hair",
 23 |   "body",
 24 |   "face",
 25 |   "clothes",
 26 |   "accessories",
 27 |   "eyes",
 28 |   "eyebrows",
 29 |   "nose",
 30 |   "lips",
 31 |   "shadow",
 32 | ] as const;
 33 | 
 34 | type CustomizableFeature = (typeof CUSTOMIZABLE_FEATURES)[number];
 35 | 
 36 | function CustomizeAvatar() {
 37 |   const [avatars, setAvatars] = useLocalStorage<AvatarData[]>("avatars", [], {
 38 |     initializeWithValue: false,
 39 |   });
 40 | 
 41 |   const searchParams = useSearchParams();
 42 | 
 43 |   const avatarId = searchParams.get("avatar");
 44 |   const avatar = avatars.find((avatar) => avatar.id === avatarId);
 45 | 
 46 |   const updateColor = (feature: CustomizableFeature, color: string) => {
 47 |     const avatarIndex = avatars.findIndex((avatar) => avatar.id === avatarId);
 48 | 
 49 |     avatars[avatarIndex].customizations = {
 50 |       ...avatars[avatarIndex].customizations,
 51 |       colors: {
 52 |         ...avatars[avatarIndex].customizations?.colors,
 53 |         [feature]: color,
 54 |       },
 55 |     };
 56 | 
 57 |     setAvatars([...avatars]);
 58 |   };
 59 | 
 60 |   const resetColor = (feature: CustomizableFeature) => {
 61 |     const avatarIndex = avatars.findIndex((avatar) => avatar.id === avatarId);
 62 | 
 63 |     delete avatars[avatarIndex].customizations?.colors?.[feature];
 64 | 
 65 |     setAvatars([...avatars]);
 66 |   };
 67 | 
 68 |   return (
 69 |     <>
 70 |       <div className="w-40 my-6">
 71 |         {avatar ? (
 72 |           <Avatar id="download" avatar={avatar} />
 73 |         ) : (
 74 |           <AvatarPlaceholder />
 75 |         )}
 76 |       </div>
 77 |       <div className="space-y-2">
 78 |         {CUSTOMIZABLE_FEATURES.map((feature) => (
 79 |           <div key={feature} className="flex items-center space-x-2">
 80 |             <h2 className="mr-auto">{capitalizeFirstLetter(feature)}</h2>
 81 |             <Button color="zinc" size="xs" onClick={() => resetColor(feature)}>
 82 |               Reset
 83 |             </Button>
 84 |             <ColorPicker
 85 |               size="sm"
 86 |               color={avatar?.customizations?.colors?.[feature]}
 87 |               onChange={(color) => updateColor(feature, color)}
 88 |             />
 89 |           </div>
 90 |         ))}
 91 |       </div>
 92 |     </>
 93 |   );
 94 | }
 95 | 
 96 | export default function CustomizePage() {
 97 |   return (
 98 |     <Container>
 99 |       <h1 className="font-semibold">Customize your avatar</h1>
100 |       <Suspense
101 |         fallback={
102 |           <>
103 |             <div className="w-40 my-6">
104 |               <AvatarPlaceholder />
105 |             </div>
106 |             <Paragraph>Loading&hellip;</Paragraph>
107 |           </>
108 |         }
109 |       >
110 |         <CustomizeAvatar />
111 |       </Suspense>
112 |       <Wrap className="mt-6">
113 |         <DownloadButton />
114 |         <Button color="zinc" leadingIcon={mdiAutorenew} href="/">
115 |           Generate another
116 |         </Button>
117 |       </Wrap>
118 |       <Saved />
119 |     </Container>
120 |   );
121 | }
122 | 


--------------------------------------------------------------------------------
/utilities/vision.ts:
--------------------------------------------------------------------------------
  1 | import type { NormalizedLandmark } from "@mediapipe/tasks-vision";
  2 | import { SEGMENTS, VIEWBOX } from "./constants";
  3 | import { Bounds, AvatarData, Segment } from "@/types";
  4 | import { convertImageToPath } from "./convert";
  5 | import { generateId } from "./nanoid";
  6 | 
  7 | function createCanvas(width: number, height: number) {
  8 |   const canvas = document.createElement("canvas");
  9 |   canvas.width = width;
 10 |   canvas.height = height;
 11 | 
 12 |   const context = canvas.getContext("2d");
 13 | 
 14 |   if (context === null) {
 15 |     throw new Error("Could not get canvas context");
 16 |   }
 17 | 
 18 |   return {
 19 |     canvas,
 20 |     context,
 21 |   };
 22 | }
 23 | 
 24 | function getBounds(landmarks: NormalizedLandmark[]): Bounds {
 25 |   const minX = Math.min(...landmarks.map((landmark) => landmark.x));
 26 |   const maxX = Math.max(...landmarks.map((landmark) => landmark.x));
 27 |   const minY = Math.min(...landmarks.map((landmark) => landmark.y));
 28 |   const maxY = Math.max(...landmarks.map((landmark) => landmark.y));
 29 | 
 30 |   return {
 31 |     minX,
 32 |     maxX,
 33 |     minY,
 34 |     maxY,
 35 |     scale: Math.max(0.5 / (maxY - minY), 1),
 36 |   };
 37 | }
 38 | 
 39 | export async function getFaceData(photo: string): Promise<AvatarData> {
 40 |   const image = document.createElement("img");
 41 | 
 42 |   await new Promise((resolve) => {
 43 |     image.onload = resolve;
 44 |     image.src = photo;
 45 |   });
 46 | 
 47 |   const { FaceLandmarker, FilesetResolver, ImageSegmenter } = await import(
 48 |     "@mediapipe/tasks-vision"
 49 |   );
 50 | 
 51 |   const vision = await FilesetResolver.forVisionTasks(
 52 |     "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
 53 |   );
 54 | 
 55 |   const [imageSegmenter, faceLandmarker] = await Promise.all([
 56 |     ImageSegmenter.createFromOptions(vision, {
 57 |       baseOptions: {
 58 |         modelAssetPath:
 59 |           "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_multiclass_256x256/float32/latest/selfie_multiclass_256x256.tflite",
 60 |       },
 61 |       outputCategoryMask: true,
 62 |       outputConfidenceMasks: false,
 63 |       runningMode: "IMAGE",
 64 |     }),
 65 |     FaceLandmarker.createFromOptions(vision, {
 66 |       baseOptions: {
 67 |         modelAssetPath:
 68 |           "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
 69 |       },
 70 |       runningMode: "IMAGE",
 71 |       numFaces: 1,
 72 |     }),
 73 |   ]);
 74 | 
 75 |   const faceLandmarkerResult = faceLandmarker.detect(image);
 76 | 
 77 |   const landmarks = faceLandmarkerResult.faceLandmarks[0];
 78 |   const bounds = getBounds(landmarks);
 79 | 
 80 |   const imageSegmenterResult = imageSegmenter.segment(image);
 81 | 
 82 |   if (imageSegmenterResult.categoryMask === undefined) {
 83 |     throw new Error("Could not segment image");
 84 |   }
 85 | 
 86 |   const mask = imageSegmenterResult.categoryMask.getAsUint8Array();
 87 | 
 88 |   // @ts-ignore
 89 |   const segments: Record<Segment, string | undefined> = {};
 90 | 
 91 |   await Promise.all(
 92 |     SEGMENTS.map(async (segment, segmentIndex) => {
 93 |       const { canvas, context } = createCanvas(image.width, image.height);
 94 | 
 95 |       const imageData = context.getImageData(
 96 |         0,
 97 |         0,
 98 |         image.width,
 99 |         image.height
100 |       ).data;
101 | 
102 |       mask.forEach((value, index) => {
103 |         if (value === segmentIndex + 1) {
104 |           imageData[index * 4] = 0;
105 |           imageData[index * 4 + 1] = 0;
106 |           imageData[index * 4 + 2] = 0;
107 |           imageData[index * 4 + 3] = 255;
108 |         } else {
109 |           imageData[index * 4] = 255;
110 |           imageData[index * 4 + 1] = 255;
111 |           imageData[index * 4 + 2] = 255;
112 |           imageData[index * 4 + 3] = 255;
113 |         }
114 |       });
115 | 
116 |       const uint8Array = new Uint8ClampedArray(imageData.buffer);
117 |       const dataNew = new ImageData(uint8Array, image.width, image.height);
118 |       context.putImageData(dataNew, 0, 0);
119 | 
120 |       segments[segment] = await convertImageToPath(
121 |         canvas.toDataURL(),
122 |         bounds.scale * VIEWBOX
123 |       );
124 |     })
125 |   );
126 | 
127 |   const createdAt = Date.now();
128 | 
129 |   return {
130 |     id: generateId(),
131 |     createdAt,
132 |     updatedAt: createdAt,
133 |     segments,
134 |     landmarks,
135 |     bounds,
136 |   };
137 | }
138 | 


--------------------------------------------------------------------------------
/components/ColorPicker.tsx:
--------------------------------------------------------------------------------
  1 | import { twMerge } from "tailwind-merge";
  2 | import { Button } from "./Button";
  3 | import { Modal } from "./Modal";
  4 | import { useState } from "react";
  5 | import colors from "tailwindcss/colors";
  6 | import { mdiWaterOff } from "@mdi/js";
  7 | import { capitalizeFirstLetter } from "@/utilities/constants";
  8 | 
  9 | type ColorPickerProperties = Omit<
 10 |   React.ComponentProps<typeof Button>,
 11 |   "color" | "onChange"
 12 | > & {
 13 |   color: string | undefined;
 14 |   onChange: (color: string) => void;
 15 | };
 16 | 
 17 | export function ColorPicker({
 18 |   color = "#000",
 19 |   onChange,
 20 |   className,
 21 |   ...properties
 22 | }: ColorPickerProperties) {
 23 |   const [open, setOpen] = useState(false);
 24 | 
 25 |   return (
 26 |     <>
 27 |       {/* @ts-ignore */}
 28 |       <Button
 29 |         color="zinc"
 30 |         variant="outline"
 31 |         style={{ backgroundColor: color }}
 32 |         className={twMerge(
 33 |           "block w-12 hover:opacity-75 ring-black/10 hover:ring-black/10",
 34 |           className
 35 |         )}
 36 |         {...properties}
 37 |         onClick={() => setOpen(true)}
 38 |       >
 39 |         &nbsp;<span className="sr-only">Pick color</span>
 40 |       </Button>
 41 |       <Modal open={open} onClose={setOpen}>
 42 |         <h1 className="font-semibold mb-6">Pick a color</h1>
 43 |         <div className="relative pb-[10%] mb-2">
 44 |           <div className="absolute inset-0 grid grid-cols-3 gap-2">
 45 |             <Button
 46 |               color="zinc"
 47 |               variant="outline"
 48 |               leadingIcon={mdiWaterOff}
 49 |               onClick={() => {
 50 |                 onChange("#0000");
 51 |                 setOpen(false);
 52 |               }}
 53 |               title="Transparent"
 54 |             >
 55 |               <span className="sr-only">Transparent</span>
 56 |             </Button>
 57 |             <Button
 58 |               color="zinc"
 59 |               variant="outline"
 60 |               onClick={() => {
 61 |                 onChange("#fff");
 62 |                 setOpen(false);
 63 |               }}
 64 |               title="White"
 65 |             >
 66 |               <span className="sr-only">White</span>
 67 |             </Button>
 68 |             <Button
 69 |               className="bg-black hover:bg-black/75"
 70 |               onClick={() => {
 71 |                 onChange("#000");
 72 |                 setOpen(false);
 73 |               }}
 74 |               title="Black"
 75 |             >
 76 |               <span className="sr-only">Black</span>
 77 |             </Button>
 78 |           </div>
 79 |         </div>
 80 |         <div className="grid grid-cols-11">
 81 |           {(
 82 |             [
 83 |               "zinc",
 84 |               "red",
 85 |               "orange",
 86 |               "amber",
 87 |               "yellow",
 88 |               "lime",
 89 |               "green",
 90 |               "emerald",
 91 |               "teal",
 92 |               "cyan",
 93 |               "sky",
 94 |               "blue",
 95 |               "indigo",
 96 |               "violet",
 97 |               "purple",
 98 |               "fuchsia",
 99 |               "pink",
100 |               "rose",
101 |             ] as const
102 |           ).flatMap((hue, hueIndex, hues) =>
103 |             (
104 |               [
105 |                 "50",
106 |                 "100",
107 |                 "200",
108 |                 "300",
109 |                 "400",
110 |                 "500",
111 |                 "600",
112 |                 "700",
113 |                 "800",
114 |                 "900",
115 |                 "950",
116 |               ] as const
117 |             ).map((shade, shadeIndex, shades) => (
118 |               <button
119 |                 key={hue + shade}
120 |                 className={twMerge(
121 |                   "aspect-square hover:opacity-75 focus:z-10",
122 |                   shadeIndex === 0
123 |                     ? hueIndex === 0
124 |                       ? "rounded-tl-xl"
125 |                       : hueIndex === hues.length - 1
126 |                       ? "rounded-bl-xl"
127 |                       : null
128 |                     : shadeIndex === shades.length - 1
129 |                     ? hueIndex === 0
130 |                       ? "rounded-tr-xl"
131 |                       : hueIndex === hues.length - 1
132 |                       ? "rounded-br-xl"
133 |                       : null
134 |                     : null
135 |                 )}
136 |                 style={{ backgroundColor: colors[hue][shade] }}
137 |                 onClick={() => {
138 |                   onChange(colors[hue][shade]);
139 |                   setOpen(false);
140 |                 }}
141 |                 title={`${capitalizeFirstLetter(hue)} ${shade}`}
142 |               >
143 |                 <span className="sr-only">
144 |                   {capitalizeFirstLetter(hue)} {shade}
145 |                 </span>
146 |               </button>
147 |             ))
148 |           )}
149 |         </div>
150 |       </Modal>
151 |     </>
152 |   );
153 | }
154 | 


--------------------------------------------------------------------------------
/utilities/features.ts:
--------------------------------------------------------------------------------
  1 | import { AvatarData, Features } from "@/types";
  2 | import { NormalizedLandmark } from "@mediapipe/tasks-vision";
  3 | 
  4 | function averageLandmark(
  5 |   landmark1: NormalizedLandmark,
  6 |   landmark2: NormalizedLandmark,
  7 |   weight = 0.5
  8 | ): NormalizedLandmark {
  9 |   return {
 10 |     x: landmark1.x + (landmark2.x - landmark1.x) * weight,
 11 |     y: landmark1.y + (landmark2.y - landmark1.y) * weight,
 12 |     z: landmark1.z + (landmark2.z - landmark1.z) * weight,
 13 |     visibility: 1,
 14 |   };
 15 | }
 16 | 
 17 | export function buildFeatures(avatar: AvatarData): Features {
 18 |   const middleOfNose = avatar.landmarks[5];
 19 |   const leftEye = avatar.landmarks[468];
 20 |   const rightEye = avatar.landmarks[473];
 21 | 
 22 |   const eyes: NormalizedLandmark[] = [];
 23 | 
 24 |   if (leftEye.x < middleOfNose.x) {
 25 |     eyes.push(leftEye);
 26 |   }
 27 | 
 28 |   if (rightEye.x > middleOfNose.x) {
 29 |     eyes.push(rightEye);
 30 |   }
 31 | 
 32 |   const leftEyebrow = [
 33 |     averageLandmark(avatar.landmarks[65], avatar.landmarks[55], 2 / 3),
 34 |     avatar.landmarks[65],
 35 |     avatar.landmarks[52],
 36 |     avatar.landmarks[53],
 37 |     averageLandmark(avatar.landmarks[46], avatar.landmarks[225]),
 38 |   ].filter((point, index, points) =>
 39 |     index ? point.x < points[index - 1].x : true
 40 |   );
 41 | 
 42 |   const rightEyebrow: NormalizedLandmark[] = [
 43 |     averageLandmark(avatar.landmarks[295], avatar.landmarks[285], 2 / 3),
 44 |     avatar.landmarks[295],
 45 |     avatar.landmarks[282],
 46 |     avatar.landmarks[283],
 47 |     averageLandmark(avatar.landmarks[276], avatar.landmarks[445]),
 48 |   ].filter((point, index, points) =>
 49 |     index ? point.x > points[index - 1].x : true
 50 |   );
 51 | 
 52 |   const leftNostril = avatar.landmarks[60];
 53 |   const endOfNose = avatar.landmarks[4];
 54 |   const rightNostril = avatar.landmarks[290];
 55 | 
 56 |   let nose: NormalizedLandmark[];
 57 |   let noseDirection: number;
 58 | 
 59 |   if (
 60 |     Math.abs(endOfNose.x - leftNostril.x) >
 61 |     Math.abs(endOfNose.x - rightNostril.x)
 62 |   ) {
 63 |     noseDirection = 1;
 64 |     nose = [
 65 |       avatar.landmarks[168],
 66 |       avatar.landmarks[6],
 67 |       avatar.landmarks[197],
 68 |       avatar.landmarks[195],
 69 |       avatar.landmarks[5],
 70 |       avatar.landmarks[4],
 71 |       avatar.landmarks[1],
 72 |       avatar.landmarks[19],
 73 |       avatar.landmarks[94],
 74 |       avatar.landmarks[99],
 75 |       avatar.landmarks[240],
 76 |     ];
 77 |   } else {
 78 |     noseDirection = -1;
 79 |     nose = [
 80 |       avatar.landmarks[168],
 81 |       avatar.landmarks[6],
 82 |       avatar.landmarks[197],
 83 |       avatar.landmarks[195],
 84 |       avatar.landmarks[5],
 85 |       avatar.landmarks[4],
 86 |       avatar.landmarks[1],
 87 |       avatar.landmarks[19],
 88 |       avatar.landmarks[94],
 89 |       avatar.landmarks[328],
 90 |       avatar.landmarks[460],
 91 |     ];
 92 |   }
 93 | 
 94 |   const leftTopLip: NormalizedLandmark[] = [
 95 |     avatar.landmarks[0],
 96 |     avatar.landmarks[37],
 97 |     avatar.landmarks[39],
 98 |     avatar.landmarks[40],
 99 |     avatar.landmarks[185],
100 |     avatar.landmarks[61],
101 |     avatar.landmarks[78],
102 |     avatar.landmarks[191],
103 |     avatar.landmarks[80],
104 |     avatar.landmarks[81],
105 |     avatar.landmarks[82],
106 |     avatar.landmarks[13],
107 |   ];
108 | 
109 |   const rightTopLip: NormalizedLandmark[] = [
110 |     avatar.landmarks[0],
111 |     avatar.landmarks[267],
112 |     avatar.landmarks[269],
113 |     avatar.landmarks[270],
114 |     avatar.landmarks[409],
115 |     avatar.landmarks[291],
116 |     avatar.landmarks[308],
117 |     avatar.landmarks[415],
118 |     avatar.landmarks[310],
119 |     avatar.landmarks[311],
120 |     avatar.landmarks[312],
121 |     avatar.landmarks[13],
122 |   ];
123 | 
124 |   const leftBottomLip: NormalizedLandmark[] = [
125 |     avatar.landmarks[17],
126 |     avatar.landmarks[84],
127 |     avatar.landmarks[181],
128 |     avatar.landmarks[91],
129 |     avatar.landmarks[146],
130 |     avatar.landmarks[61],
131 |     avatar.landmarks[78],
132 |     avatar.landmarks[95],
133 |     avatar.landmarks[88],
134 |     avatar.landmarks[178],
135 |     avatar.landmarks[87],
136 |     avatar.landmarks[14],
137 |   ];
138 | 
139 |   const rightBottomLip: NormalizedLandmark[] = [
140 |     avatar.landmarks[17],
141 |     avatar.landmarks[314],
142 |     avatar.landmarks[405],
143 |     avatar.landmarks[321],
144 |     avatar.landmarks[375],
145 |     avatar.landmarks[291],
146 |     avatar.landmarks[308],
147 |     avatar.landmarks[324],
148 |     avatar.landmarks[318],
149 |     avatar.landmarks[402],
150 |     avatar.landmarks[317],
151 |     avatar.landmarks[14],
152 |   ];
153 | 
154 |   return {
155 |     eyes,
156 |     eyebrows: [leftEyebrow, rightEyebrow],
157 |     nose,
158 |     noseDirection,
159 |     lips: [
160 |       [...leftTopLip.reverse(), ...rightTopLip.slice(1, -1)],
161 |       [...rightBottomLip.reverse(), ...leftBottomLip.slice(1, -1)],
162 |     ],
163 |     shadow: [
164 |       avatar.landmarks[93],
165 |       avatar.landmarks[58],
166 |       averageLandmark(avatar.landmarks[18], avatar.landmarks[152], 2.5),
167 |       avatar.landmarks[288],
168 |       avatar.landmarks[323],
169 |     ],
170 |   };
171 | }
172 | 


--------------------------------------------------------------------------------
/components/Avatar.tsx:
--------------------------------------------------------------------------------
  1 | import root from "react-shadow";
  2 | import { AvatarData } from "@/types";
  3 | import { VIEWBOX } from "@/utilities/constants";
  4 | import { buildFeatures } from "@/utilities/features";
  5 | import simplifySvgPath from "@luncheon/simplify-svg-path";
  6 | import { NormalizedLandmark } from "@mediapipe/tasks-vision";
  7 | import { twMerge } from "tailwind-merge";
  8 | 
  9 | type AvatarProperties = JSX.IntrinsicElements["div"] & {
 10 |   avatar: AvatarData;
 11 | };
 12 | 
 13 | export function Avatar({ avatar, className, ...properties }: AvatarProperties) {
 14 |   const translateX = Math.min(
 15 |     Math.max(
 16 |       (0.5 -
 17 |         ((avatar.bounds.minX + avatar.bounds.maxX) / 2) * avatar.bounds.scale) *
 18 |         VIEWBOX,
 19 |       VIEWBOX - VIEWBOX * avatar.bounds.scale
 20 |     ),
 21 |     0
 22 |   );
 23 | 
 24 |   const translateY = Math.min(
 25 |     Math.max(
 26 |       (0.5 -
 27 |         ((avatar.bounds.minY + avatar.bounds.maxY) / 2) * avatar.bounds.scale) *
 28 |         VIEWBOX,
 29 |       VIEWBOX - VIEWBOX * avatar.bounds.scale
 30 |     ),
 31 |     0
 32 |   );
 33 | 
 34 |   const transform = `translate(${translateX} ${translateY})`;
 35 | 
 36 |   const pointToViewbox = (
 37 |     point: NormalizedLandmark,
 38 |     offset = {
 39 |       x: 0,
 40 |       y: 0,
 41 |     }
 42 |   ) => {
 43 |     return [
 44 |       point.x * VIEWBOX * avatar.bounds.scale + translateX + offset.x,
 45 |       point.y * VIEWBOX * avatar.bounds.scale + translateY + offset.y,
 46 |     ] as const;
 47 |   };
 48 | 
 49 |   const features = buildFeatures(avatar);
 50 | 
 51 |   const strokeColor = avatar.customizations?.colors?.outline ?? "#000";
 52 |   const strokeWidth = avatar.customizations?.strokeWidth ?? 1;
 53 | 
 54 |   return (
 55 |     <root.div
 56 |       className={twMerge(
 57 |         "w-full aspect-square rounded-xl overflow-hidden",
 58 |         className
 59 |       )}
 60 |       {...properties}
 61 |     >
 62 |       <svg
 63 |         xmlns="http://www.w3.org/2000/svg"
 64 |         viewBox="0 0 48 48"
 65 |         strokeLinecap="round"
 66 |         strokeLinejoin="round"
 67 |       >
 68 |         <defs>
 69 |           <path id="face" d={avatar.segments.face} transform={transform} />
 70 |           <clipPath id="faceClip">
 71 |             <use href="#face" />
 72 |           </clipPath>
 73 |           <path id="body" d={avatar.segments.body} transform={transform} />
 74 |           <clipPath id="bodyClip">
 75 |             <use href="#body" />
 76 |           </clipPath>
 77 |         </defs>
 78 |         <rect
 79 |           width={48}
 80 |           height={48}
 81 |           fill={avatar.customizations?.colors?.background ?? "#e4e4e7"}
 82 |         />
 83 |         <use
 84 |           href="#body"
 85 |           fill={avatar.customizations?.colors?.body ?? "#fff"}
 86 |         />
 87 |         {features.shadow && (
 88 |           <path
 89 |             d={simplifySvgPath(
 90 |               features.shadow.map((point) => pointToViewbox(point))
 91 |             )}
 92 |             fill={avatar.customizations?.colors?.shadow ?? "#0003"}
 93 |             clipPath="url(#bodyClip)"
 94 |           />
 95 |         )}
 96 |         <path
 97 |           d={avatar.segments.clothes}
 98 |           fill={avatar.customizations?.colors?.clothes ?? strokeColor}
 99 |           stroke={avatar.customizations?.colors?.clothes ?? strokeColor}
100 |           strokeWidth={strokeWidth / 2}
101 |           transform={transform}
102 |         />
103 |         <use
104 |           href="#body"
105 |           fill="none"
106 |           stroke={strokeColor}
107 |           strokeWidth={strokeWidth}
108 |         />
109 |         <use
110 |           href="#face"
111 |           fill={avatar.customizations?.colors?.face ?? "#fff"}
112 |         />
113 |         {features.eyes.map((eye, index) => {
114 |           const [cx, cy] = pointToViewbox(eye);
115 | 
116 |           return (
117 |             <ellipse
118 |               key={index}
119 |               cx={cx}
120 |               cy={cy}
121 |               rx={strokeWidth}
122 |               ry={strokeWidth * 1.25}
123 |               clipPath="url(#faceClip)"
124 |               fill={avatar.customizations?.colors?.eyes ?? strokeColor}
125 |             />
126 |           );
127 |         })}
128 |         {features.eyebrows.map((eyebrow, index) => (
129 |           <path
130 |             key={index}
131 |             d={simplifySvgPath(eyebrow.map((point) => pointToViewbox(point)))}
132 |             fill="none"
133 |             stroke={avatar.customizations?.colors?.eyebrows ?? strokeColor}
134 |             strokeWidth={strokeWidth}
135 |             clipPath="url(#faceClip)"
136 |           />
137 |         ))}
138 |         {features.nose && (
139 |           <path
140 |             d={simplifySvgPath(
141 |               features.nose.map((point) =>
142 |                 pointToViewbox(point, {
143 |                   x: features.noseDirection,
144 |                   y: 0,
145 |                 })
146 |               ),
147 |               {
148 |                 precision: 2,
149 |                 tolerance: 1,
150 |               }
151 |             )}
152 |             fill={avatar.customizations?.colors?.face ?? "#fff"}
153 |             stroke={avatar.customizations?.colors?.nose ?? strokeColor}
154 |             strokeWidth={strokeWidth}
155 |             clipPath="url(#faceClip)"
156 |           />
157 |         )}
158 |         {features.lips.map((lip, index) => (
159 |           <path
160 |             key={index}
161 |             d={simplifySvgPath(
162 |               lip.map((point) => pointToViewbox(point)),
163 |               {
164 |                 tolerance: 0,
165 |                 precision: 10,
166 |                 closed: true,
167 |               }
168 |             )}
169 |             fill={avatar.customizations?.colors?.lips ?? "#e4e4e7"}
170 |             stroke={avatar.customizations?.colors?.lips ?? "#e4e4e7"}
171 |             strokeWidth={strokeWidth * 0.25}
172 |             clipPath="url(#faceClip)"
173 |           />
174 |         ))}
175 |         <use
176 |           href="#face"
177 |           fill="none"
178 |           stroke={strokeColor}
179 |           strokeWidth={strokeWidth}
180 |         />
181 |         {avatar.segments.hair && (
182 |           <path
183 |             d={avatar.segments.hair}
184 |             fill={avatar.customizations?.colors?.hair ?? strokeColor}
185 |             stroke={avatar.customizations?.colors?.hair ?? strokeColor}
186 |             strokeWidth={strokeWidth}
187 |             transform={transform}
188 |           />
189 |         )}
190 |         {avatar.segments.accessories && (
191 |           <path
192 |             d={avatar.segments.accessories}
193 |             fill={avatar.customizations?.colors?.accessories ?? strokeColor}
194 |             stroke={avatar.customizations?.colors?.accessories ?? strokeColor}
195 |             strokeWidth={strokeWidth}
196 |             transform={transform}
197 |           />
198 |         )}
199 |       </svg>
200 |     </root.div>
201 |   );
202 | }
203 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Button } from "@/components/Button";
  4 | import { Container } from "@/components/Container";
  5 | import { Paragraph } from "@/components/Paragraph";
  6 | import { Webcam } from "@/components/Webcam";
  7 | import { mdiAutorenew, mdiCamera, mdiPalette, mdiUpload } from "@mdi/js";
  8 | import { ChangeEventHandler, useRef, useState } from "react";
  9 | import { CROPPED_RESOLUTION } from "@/utilities/constants";
 10 | import Image from "next/image";
 11 | import exampleJPG from "@/assets/example.jpg";
 12 | import exampleSVG from "@/assets/example.svg";
 13 | import { Avatar } from "@/components/Avatar";
 14 | import { Example } from "@/components/Example";
 15 | import { AvatarData } from "@/types";
 16 | import { getFaceData } from "@/utilities/vision";
 17 | import { useLocalStorage } from "usehooks-ts";
 18 | import { Wrap } from "@/components/Wrap";
 19 | import { Saved } from "@/components/Saved";
 20 | import { AvatarPlaceholder } from "@/components/AvatarPlaceholder";
 21 | import { DownloadButton } from "@/components/DownloadButton";
 22 | import { FAQs } from "@/components/FAQs";
 23 | 
 24 | const fileToBase64 = (file: Blob): Promise<string> =>
 25 |   new Promise((resolve, reject) => {
 26 |     const reader = new FileReader();
 27 |     reader.readAsDataURL(file);
 28 |     reader.onload = () => resolve(reader.result as string);
 29 |     reader.onerror = reject;
 30 |   });
 31 | 
 32 | export default function HomePage() {
 33 |   const uploadRef = useRef<HTMLInputElement>(null);
 34 | 
 35 |   const [uploading, setUploading] = useState(false);
 36 |   const [webcamOpen, setWebcamOpen] = useState(false);
 37 | 
 38 |   const [photo, setPhoto] = useState<string>();
 39 |   const [avatar, setAvatar] = useState<AvatarData>();
 40 | 
 41 |   const [, setValue] = useLocalStorage<AvatarData[]>("avatars", [], {
 42 |     initializeWithValue: false,
 43 |   });
 44 | 
 45 |   const generateAvatar = async (image: string) => {
 46 |     setWebcamOpen(false);
 47 | 
 48 |     const canvas = document.createElement("canvas");
 49 |     canvas.width = CROPPED_RESOLUTION;
 50 |     canvas.height = CROPPED_RESOLUTION;
 51 | 
 52 |     const context = canvas.getContext("2d");
 53 | 
 54 |     if (context === null) {
 55 |       return;
 56 |     }
 57 | 
 58 |     const imageObject = new window.Image();
 59 | 
 60 |     imageObject.onload = async () => {
 61 |       const sourceSize = Math.min(imageObject.width, imageObject.height);
 62 | 
 63 |       context.drawImage(
 64 |         imageObject,
 65 |         imageObject.width / 2 - sourceSize / 2,
 66 |         imageObject.height / 2 - sourceSize / 2,
 67 |         sourceSize,
 68 |         sourceSize,
 69 |         0,
 70 |         0,
 71 |         CROPPED_RESOLUTION,
 72 |         CROPPED_RESOLUTION
 73 |       );
 74 | 
 75 |       const photo = canvas.toDataURL("image/jpeg", 0.75);
 76 | 
 77 |       setPhoto(photo);
 78 |       const avatar = await getFaceData(photo);
 79 |       setAvatar(avatar);
 80 |       setValue((avatars) => [avatar, ...avatars]);
 81 |     };
 82 | 
 83 |     imageObject.src = image;
 84 |   };
 85 | 
 86 |   const onChange: ChangeEventHandler<HTMLInputElement> = async (event) => {
 87 |     const files = event.target.files;
 88 | 
 89 |     if (files && files.length > 0) {
 90 |       const [file] = files;
 91 | 
 92 |       setUploading(true);
 93 | 
 94 |       const imageBase64 = await fileToBase64(file);
 95 | 
 96 |       generateAvatar(imageBase64);
 97 |       setUploading(false);
 98 |     }
 99 |   };
100 | 
101 |   return (
102 |     <Container>
103 |       {photo ? (
104 |         <>
105 |           <h1 className="font-semibold">Generating your avatar&hellip;</h1>
106 |           <Example className="my-6">
107 |             <Image
108 |               src={photo}
109 |               alt=""
110 |               width={CROPPED_RESOLUTION}
111 |               height={CROPPED_RESOLUTION}
112 |               className="rounded-xl"
113 |               unoptimized
114 |             />
115 |             {avatar ? (
116 |               <Avatar id="download" avatar={avatar} />
117 |             ) : (
118 |               <AvatarPlaceholder />
119 |             )}
120 |           </Example>
121 |           {avatar && (
122 |             <>
123 |               <Paragraph>
124 |                 Here&rsquo;s your avatar! Download an SVG of your avatar or
125 |                 click customize to change the colors.
126 |               </Paragraph>
127 |               <Wrap className="mb-4">
128 |                 <DownloadButton />
129 |                 <Button
130 |                   variant="outline"
131 |                   color="zinc"
132 |                   leadingIcon={mdiPalette}
133 |                   href={`/customize?avatar=${avatar.id}`}
134 |                 >
135 |                   Customize
136 |                 </Button>
137 |                 <Button
138 |                   color="zinc"
139 |                   leadingIcon={mdiAutorenew}
140 |                   onClick={() => {
141 |                     setPhoto(undefined);
142 |                     setAvatar(undefined);
143 |                   }}
144 |                 >
145 |                   Reset
146 |                 </Button>
147 |               </Wrap>
148 |             </>
149 |           )}
150 |         </>
151 |       ) : (
152 |         <>
153 |           <h1 className="font-semibold">
154 |             Generate your line avatar in 30&nbsp;seconds
155 |           </h1>
156 |           <Example className="my-6">
157 |             <Image
158 |               src={exampleJPG}
159 |               alt="Photo from webcam"
160 |               className="rounded-xl -scale-x-100"
161 |               priority
162 |             />
163 |             <Image
164 |               src={exampleSVG}
165 |               alt="Photo from webcam"
166 |               className="rounded-xl bg-zinc-200"
167 |               priority
168 |             />
169 |           </Example>
170 |           <Paragraph>
171 |             Upload or capture a photo of your face, preferably at a slight
172 |             angle. Then we&rsquo;ll use AI to generate a line avatar for you.{" "}
173 |             <strong>For free!</strong>
174 |           </Paragraph>
175 |           <Wrap>
176 |             <Button
177 |               leadingIcon={mdiCamera}
178 |               className="col-start-1"
179 |               onClick={() => {
180 |                 setWebcamOpen(true);
181 |               }}
182 |             >
183 |               Take a photo
184 |             </Button>
185 |             <Button
186 |               as="label"
187 |               variant="outline"
188 |               color="zinc"
189 |               leadingIcon={mdiUpload}
190 |               loading={uploading}
191 |               className="cursor-pointer"
192 |             >
193 |               Upload an image
194 |               <input
195 |                 type="file"
196 |                 accept="image/*"
197 |                 className="sr-only"
198 |                 onChange={onChange}
199 |               />
200 |             </Button>
201 |           </Wrap>
202 |           <FAQs className="mt-12" />
203 |         </>
204 |       )}
205 |       <Saved />
206 |       <Webcam
207 |         open={webcamOpen}
208 |         onClose={() => {
209 |           setWebcamOpen(false);
210 |         }}
211 |         onCapture={generateAvatar}
212 |       />
213 |     </Container>
214 |   );
215 | }
216 | 


--------------------------------------------------------------------------------
/assets/example.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" stroke-linecap="round"
 2 |     stroke-linejoin="round">
 3 |     <defs>
 4 |         <path id="face"
 5 |             d="M25.206 12.540 C 24.983 12.593,24.594 12.686,24.342 12.747 C 23.970 12.836,23.807 12.850,23.479 12.821 C 22.295 12.716,21.641 12.983,20.258 14.139 C 19.965 14.383,19.674 14.616,19.612 14.658 C 19.186 14.937,17.718 17.014,17.365 17.839 C 17.230 18.153,17.044 19.244,16.775 21.297 C 16.732 21.632,16.664 22.135,16.625 22.414 C 16.586 22.694,16.532 23.334,16.504 23.836 C 16.419 25.374,16.179 25.724,15.688 25.024 C 15.499 24.754,15.450 24.717,15.189 24.642 C 15.030 24.596,14.820 24.518,14.722 24.469 C 13.687 23.947,12.608 25.859,13.255 27.068 C 13.327 27.203,13.419 27.546,13.628 28.455 C 13.724 28.874,13.874 29.411,13.961 29.648 C 14.048 29.886,14.141 30.168,14.169 30.276 C 14.383 31.126,15.364 31.692,16.095 31.387 C 16.591 31.180,16.700 31.315,17.148 32.694 C 17.235 32.959,17.401 33.439,17.518 33.760 C 17.635 34.081,17.764 34.467,17.805 34.617 C 17.850 34.784,17.966 35.002,18.103 35.176 C 18.226 35.333,18.327 35.487,18.327 35.520 C 18.327 35.552,18.430 35.639,18.556 35.712 C 18.681 35.786,18.784 35.864,18.784 35.886 C 18.784 36.183,22.718 39.821,24.140 40.839 C 25.793 42.022,27.411 42.226,29.778 41.549 C 30.693 41.287,31.880 40.099,32.503 38.822 C 32.555 38.716,32.650 38.606,32.714 38.577 C 32.778 38.547,32.869 38.436,32.916 38.330 C 32.968 38.212,33.047 38.125,33.116 38.108 C 33.200 38.087,33.247 38.018,33.291 37.855 C 33.324 37.732,33.405 37.565,33.472 37.485 C 33.538 37.405,33.609 37.271,33.629 37.187 C 33.649 37.103,33.776 36.806,33.912 36.527 C 34.482 35.352,34.523 35.241,34.866 33.963 C 35.023 33.378,35.168 32.631,35.259 31.933 C 35.305 31.584,35.385 30.990,35.439 30.613 C 35.655 29.073,35.680 28.623,35.640 26.907 C 35.629 26.405,35.649 26.099,35.714 25.764 C 35.816 25.240,35.797 24.586,35.665 24.092 C 35.621 23.927,35.562 23.618,35.535 23.407 C 35.459 22.824,35.344 22.253,35.126 21.384 C 35.017 20.950,34.928 20.549,34.928 20.492 C 34.928 20.436,34.895 20.251,34.854 20.082 C 34.814 19.912,34.721 19.526,34.648 19.223 C 34.576 18.920,34.495 18.635,34.469 18.589 C 34.443 18.543,34.287 18.217,34.124 17.866 C 33.960 17.515,33.720 17.053,33.590 16.839 C 33.460 16.625,33.354 16.434,33.354 16.415 C 33.354 16.383,33.091 15.991,32.611 15.306 C 32.259 14.804,31.966 14.538,30.911 13.758 C 30.229 13.254,29.854 13.066,29.293 12.943 C 29.047 12.889,28.781 12.821,28.701 12.791 C 28.348 12.656,27.893 12.581,27.186 12.541 C 26.767 12.517,26.242 12.485,26.018 12.470 C 25.716 12.449,25.508 12.467,25.206 12.540 "
 6 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
 7 |         <clipPath id="faceClip">
 8 |             <use href="#face"></use>
 9 |         </clipPath>
10 |         <path id="body"
11 |             d="M17.900 35.080 C 17.915 35.178,17.949 35.361,17.974 35.486 C 18.092 36.066,18.174 36.653,18.175 36.908 C 18.175 37.099,18.225 37.315,18.334 37.593 C 18.491 37.996,18.492 38.005,18.448 38.558 C 18.325 40.097,18.470 41.286,18.898 42.256 C 19.317 43.205,20.862 44.396,22.109 44.732 C 22.193 44.754,22.444 44.829,22.668 44.898 C 23.923 45.286,24.861 45.526,25.282 45.567 C 26.017 45.638,27.310 45.457,28.151 45.163 C 28.827 44.927,30.152 44.300,30.388 44.103 C 30.470 44.035,30.591 43.951,30.657 43.916 C 31.265 43.596,32.177 42.565,32.743 41.556 C 33.124 40.878,33.496 38.352,33.250 38.107 C 33.176 38.033,32.993 38.155,32.916 38.330 C 32.869 38.436,32.778 38.547,32.714 38.577 C 32.650 38.606,32.555 38.716,32.503 38.822 C 31.880 40.099,30.693 41.287,29.778 41.549 C 27.411 42.226,25.793 42.022,24.140 40.839 C 22.892 39.945,19.789 37.125,19.012 36.178 C 18.736 35.841,18.587 35.698,18.475 35.663 C 18.422 35.646,18.345 35.560,18.302 35.471 C 18.144 35.142,17.868 34.874,17.900 35.080 "
12 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
13 |         <clipPath id="bodyClip">
14 |             <use href="#body"></use>
15 |         </clipPath>
16 |     </defs>
17 |     <use href="#body" fill="white"></use>
18 |     <path d="M14.83635,26.48685c7.39313,23.0904 15.23916,21.93789 17.69718,-1.28715" fill="#d4d4d4"
19 |         clip-path="url(#bodyClip)"></path>
20 |     <use href="#body" fill="none" stroke="black" stroke-width="1"></use>
21 |     <path
22 |         d="M18.044 37.267 C 17.894 37.433,17.363 37.709,16.882 37.872 C 16.640 37.954,16.369 38.064,16.280 38.117 C 16.191 38.169,15.977 38.264,15.803 38.327 C 15.629 38.391,15.461 38.474,15.429 38.513 C 15.396 38.552,15.347 38.583,15.319 38.583 C 15.250 38.583,13.914 39.113,13.504 39.304 C 13.323 39.388,12.991 39.543,12.768 39.647 C 12.266 39.883,11.373 40.230,11.067 40.308 C 10.942 40.340,10.645 40.442,10.407 40.536 C 10.170 40.629,9.897 40.722,9.800 40.742 C 9.530 40.799,8.374 41.266,8.162 41.404 C 8.058 41.472,7.965 41.528,7.955 41.528 C 7.908 41.528,7.139 41.987,6.945 42.130 C 6.825 42.219,6.594 42.380,6.431 42.488 C 5.825 42.888,4.456 44.249,4.002 44.903 C 3.742 45.278,3.263 46.458,2.921 47.569 C 2.856 47.779,2.765 48.053,2.719 48.178 C 2.533 48.681,2.423 49.029,2.358 49.320 C 2.212 49.965,1.922 50.983,1.776 51.361 C 1.693 51.578,1.625 51.807,1.625 51.870 C 1.625 51.986,1.625 51.986,26.805 51.986 C 51.986 51.986,51.986 51.986,51.986 51.047 C 51.986 50.107,51.986 50.107,51.862 50.107 C 51.779 50.107,51.728 50.071,51.704 49.993 C 51.639 49.783,51.273 49.215,50.780 48.559 C 50.377 48.023,49.867 47.189,49.528 46.509 C 49.174 45.798,48.390 44.877,47.695 44.351 C 47.580 44.264,47.341 44.084,47.164 43.950 C 46.808 43.681,45.953 43.162,45.716 43.071 C 45.632 43.038,45.347 42.920,45.081 42.808 C 43.958 42.334,42.974 41.934,42.931 41.934 C 42.758 41.934,39.829 40.484,38.739 39.859 C 38.392 39.660,38.082 39.497,38.050 39.497 C 38.017 39.497,37.582 39.294,37.081 39.047 C 35.455 38.242,34.705 37.882,34.420 37.770 C 34.267 37.711,34.107 37.631,34.065 37.594 C 33.478 37.077,33.280 37.395,33.279 38.862 C 33.278 39.962,33.080 40.956,32.743 41.556 C 32.177 42.565,31.265 43.596,30.657 43.916 C 30.591 43.951,30.470 44.035,30.388 44.103 C 30.152 44.300,28.827 44.927,28.151 45.163 C 27.310 45.457,26.017 45.638,25.282 45.567 C 24.861 45.526,23.923 45.286,22.668 44.898 C 22.444 44.829,22.193 44.754,22.109 44.732 C 20.862 44.396,19.317 43.205,18.898 42.256 C 18.470 41.286,18.325 40.099,18.448 38.558 C 18.492 38.003,18.491 37.997,18.330 37.581 C 18.145 37.103,18.169 37.130,18.044 37.267 "
23 |         stroke="black" stroke-width="0.5"
24 |         transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
25 |     <use href="#face" fill="white"></use>
26 |     <ellipse cx="21.921781797923554" cy="21.752111792300884" rx="1" ry="1.25"
27 |         clip-path="url(#faceClip)"></ellipse>
28 |     <ellipse cx="30.60458553974051" cy="21.044088033790224" rx="1" ry="1.25"
29 |         clip-path="url(#faceClip)"></ellipse>
30 |     <path d="M24.20608,19.66937c-1.91489,-0.55165 -4.219,-1.23392 -5.46749,0.67411" fill="none"
31 |         stroke="black" stroke-width="1" clip-path="url(#faceClip)"></path>
32 |     <path d="M29.508,19.30441c1.05755,-0.5089 3.25917,-1.84247 3.5035,-0.02888" fill="none"
33 |         stroke="black" stroke-width="1" clip-path="url(#faceClip)"></path>
34 |     <path d="M28.07,21.67c0.69,3.47 3.13,7.54 -1.86,6.98" fill="white" stroke="black"
35 |         stroke-width="1" clip-path="url(#faceClip)"></path>
36 |     <path
37 |         d="M27.3930608158,31.9882666371c-0.3071502794,0.0212599644 -0.6158269087,0.0021835037 -0.9236459928,-0.0041955035c-0.3036115609,-0.0062918138 -0.6068271228,-0.025969136 -0.9104025791,-0.0338119163c-0.2784511727,-0.0071937021 -0.5571208516,-0.0035019341 -0.8355559113,-0.0112943947c-0.2116293865,-0.0059227946 -0.4229919253,-0.0191755998 -0.6344351221,-0.0298457091c-0.1925712971,-0.009717772 -0.3852492416,-0.0179351038 -0.5776006125,-0.0313175438c-0.09933111,-0.006910752 -0.3889330049,0.009289942 -0.2972486374,-0.0295482436c0.1850438474,-0.0783859614 0.3960126298,-0.0691813789 0.5950922059,-0.0966205255c0.2393883348,-0.0329949045 0.4807323867,-0.0507560241 0.7199967465,-0.0846382418c0.2933659619,-0.0415435436 0.5853516802,-0.092378124 0.8775295384,-0.1415873995c0.363305125,-0.0611886956 0.7205836176,-0.1800585275 1.0888819027,-0.1896001968c0.3520097962,-0.009119676 0.6968574114,0.1628766231 1.0478192639,0.134243719c0.3052785487,-0.0249058732 0.5699000989,-0.2382029211 0.8716360024,-0.2908407339c0.1909227458,-0.0333064632 0.3870025764,0.0222624124 0.580203436,0.0375674187c0.1522020554,0.0120571587 0.304233265,0.0266916271 0.4558690377,0.0445082813c0.1073010516,0.012607485 0.2137742538,0.0314759024 0.3207298234,0.0467392729c0.0972627361,0.0138801297 0.239237728,-0.0422371741 0.2919221451,0.0406908069c0.0407690876,0.0641726397 -0.1381011483,0.0649418686 -0.2109123632,0.0868227543c-0.1407834744,0.0423075911 -0.2855449285,0.0700274012 -0.4282636159,0.1052594205c-0.1075450276,0.0265489304 -0.2151606542,0.0528207978 -0.3225270111,0.0800833007c-0.1458899391,0.0370444243 -0.2912706674,0.0760815654 -0.4372340611,0.112835496c-0.1844075973,0.0464342728 -0.3673993605,0.0994062433 -0.5538653413,0.1367256971c-0.2378145388,0.0475963962 -0.4760369886,0.1010771032 -0.7179888541,0.117824241z"
38 |         fill="#d4d4d4" stroke="#d4d4d4" stroke-width="0.25" clip-path="url(#faceClip)"></path>
39 |     <path
40 |         d="M27.3929182803,32.0240554598c0.243250384,-0.0151031987 0.4838839255,-0.0615587437 0.723132529,-0.1080233712c0.1998480366,-0.0388126176 0.3948781443,-0.0992807282 0.592662904,-0.1475181187c0.1445268881,-0.0352484183 0.2901523906,-0.0659958766 0.4342563071,-0.102935471c0.1159592429,-0.0297249895 0.2318928916,-0.0601185086 0.3457727035,-0.0970171462c0.1229503917,-0.0398376312 0.2434735761,-0.0868742355 0.3641969754,-0.1330228709c0.071016051,-0.0271471303 0.2204015726,-0.1622561758 0.2109123632,-0.0868227543c-0.0183182436,0.145618853 -0.1574738442,0.2481004075 -0.2459327333,0.365213316c-0.1051375173,0.1391941563 -0.2131911526,0.2770543123 -0.3341374629,0.4027559459c-0.1597171079,0.1659968075 -0.3169936416,0.3390458927 -0.5061283195,0.4705471029c-0.2178179163,0.1514440394 -0.454019128,0.2825351755 -0.7041505093,0.3709333304c-0.2813632233,0.0994357032 -0.578239016,0.1603691015 -0.8754379838,0.1873041346c-0.347868053,0.0315271536 -0.7008152601,0.0270890174 -1.0478006723,-0.013001723c-0.3486515245,-0.0402832432 -0.6939632145,-0.119724818 -1.0281834397,-0.2268577556c-0.3163846502,-0.1014158164 -0.6121504584,-0.2586690816 -0.9147127308,-0.3959297315c-0.2261348371,-0.1025885166 -0.4538765887,-0.203081744 -0.671057468,-0.3234720839c-0.1813263064,-0.100514998 -0.3999866753,-0.1704396935 -0.5221387824,-0.3379549373c-0.0586663388,-0.0804530211 0.1982937326,0.0184868367 0.2972486374,0.0295482436c0.1919864048,0.021460682 0.3830528742,0.0516608596 0.5755415932,0.0680142561c0.2071926348,0.0176026072 0.4151815082,0.0242410093 0.622900586,0.0338026205c0.2785754624,0.0128232337 0.5571509637,0.026879936 0.8359463348,0.033350225c0.2992622263,0.0069452842 0.5986645678,0.0050945906 0.8980019844,0.006891285c0.3163664535,0.0018989067 0.6333430903,0.0238010136 0.9491071838,0.0041955035z"
41 |         fill="#d4d4d4" stroke="#d4d4d4" stroke-width="0.25" clip-path="url(#faceClip)"></path>
42 |     <use href="#face" fill="none" stroke="black" stroke-width="1"></use>
43 |     <path
44 |         d="M24.316 7.841 C 24.162 7.880,23.785 7.948,23.479 7.992 C 22.819 8.087,22.333 8.264,21.881 8.576 C 21.378 8.922,20.865 8.862,20.865 8.456 C 20.865 8.394,20.852 8.329,20.835 8.312 C 20.797 8.275,20.561 8.378,20.561 8.432 C 20.561 8.453,20.521 8.511,20.472 8.559 C 20.423 8.608,20.315 8.751,20.231 8.879 C 20.067 9.127,19.600 9.429,19.012 9.666 C 18.161 10.010,17.943 10.119,17.726 10.311 C 17.596 10.425,17.335 10.609,17.147 10.719 C 16.931 10.846,16.743 11.004,16.639 11.147 C 16.548 11.273,16.341 11.551,16.178 11.767 C 15.794 12.277,15.735 12.397,15.510 13.123 C 15.407 13.458,15.233 13.908,15.124 14.123 C 15.015 14.338,14.926 14.551,14.926 14.598 C 14.926 14.859,14.747 15.254,14.484 15.573 C 13.935 16.239,13.817 17.620,14.168 19.292 C 14.253 19.697,14.356 20.245,14.397 20.510 C 14.439 20.775,14.507 21.118,14.550 21.272 C 14.743 21.971,14.815 22.302,14.849 22.649 C 14.885 23.016,14.944 23.284,15.101 23.780 C 15.209 24.123,15.201 24.347,15.077 24.471 C 15.004 24.544,14.993 24.580,15.039 24.594 C 15.074 24.605,15.189 24.641,15.293 24.673 C 15.436 24.717,15.534 24.804,15.690 25.027 C 16.179 25.723,16.419 25.372,16.504 23.836 C 16.532 23.334,16.586 22.694,16.625 22.414 C 16.664 22.135,16.732 21.632,16.775 21.297 C 17.044 19.244,17.230 18.153,17.365 17.839 C 17.718 17.014,19.186 14.937,19.612 14.658 C 19.674 14.616,19.965 14.383,20.258 14.139 C 21.646 12.980,22.283 12.720,23.492 12.820 C 23.829 12.848,23.992 12.835,24.330 12.751 C 25.564 12.444,25.707 12.424,26.316 12.484 C 26.630 12.514,27.068 12.540,27.290 12.541 C 27.672 12.542,28.384 12.667,28.701 12.790 C 28.781 12.820,29.047 12.889,29.293 12.943 C 29.854 13.066,30.229 13.254,30.911 13.758 C 31.966 14.538,32.259 14.804,32.611 15.306 C 33.091 15.991,33.354 16.383,33.354 16.415 C 33.354 16.434,33.462 16.627,33.593 16.843 C 33.724 17.059,33.975 17.544,34.151 17.920 C 34.533 18.737,34.531 18.742,34.371 17.058 C 34.260 15.889,34.222 15.756,33.829 15.153 C 33.666 14.903,33.511 14.582,33.430 14.326 C 33.357 14.095,33.255 13.833,33.204 13.743 C 33.152 13.654,33.072 13.432,33.027 13.252 C 32.935 12.888,32.785 12.603,32.463 12.184 C 32.214 11.860,31.578 10.672,31.577 10.530 C 31.574 10.006,30.600 9.089,30.010 9.056 C 29.687 9.038,29.672 9.028,29.757 8.892 C 29.838 8.762,29.828 8.752,29.533 8.674 C 29.343 8.623,29.245 8.622,29.064 8.671 C 28.601 8.795,28.253 8.714,28.136 8.456 C 27.999 8.156,26.552 7.933,25.758 8.089 C 25.565 8.126,25.532 8.116,25.359 7.964 C 25.135 7.767,24.777 7.725,24.316 7.841 "
45 |         stroke="black" stroke-width="1"
46 |         transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
47 |     <path d="" stroke="black" stroke-width="0.5"
48 |         transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
49 | </svg>


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" stroke-linecap="round"
 2 |     stroke-linejoin="round">
 3 |     <defs>
 4 |         <circle id="background" cx="24" cy="24" r="24"></circle>
 5 |         <clipPath id="backgroundClip">
 6 |             <use href="#background"></use>
 7 |         </clipPath>
 8 |         <path id="face"
 9 |             d="M25.206 12.540 C 24.983 12.593,24.594 12.686,24.342 12.747 C 23.970 12.836,23.807 12.850,23.479 12.821 C 22.295 12.716,21.641 12.983,20.258 14.139 C 19.965 14.383,19.674 14.616,19.612 14.658 C 19.186 14.937,17.718 17.014,17.365 17.839 C 17.230 18.153,17.044 19.244,16.775 21.297 C 16.732 21.632,16.664 22.135,16.625 22.414 C 16.586 22.694,16.532 23.334,16.504 23.836 C 16.419 25.374,16.179 25.724,15.688 25.024 C 15.499 24.754,15.450 24.717,15.189 24.642 C 15.030 24.596,14.820 24.518,14.722 24.469 C 13.687 23.947,12.608 25.859,13.255 27.068 C 13.327 27.203,13.419 27.546,13.628 28.455 C 13.724 28.874,13.874 29.411,13.961 29.648 C 14.048 29.886,14.141 30.168,14.169 30.276 C 14.383 31.126,15.364 31.692,16.095 31.387 C 16.591 31.180,16.700 31.315,17.148 32.694 C 17.235 32.959,17.401 33.439,17.518 33.760 C 17.635 34.081,17.764 34.467,17.805 34.617 C 17.850 34.784,17.966 35.002,18.103 35.176 C 18.226 35.333,18.327 35.487,18.327 35.520 C 18.327 35.552,18.430 35.639,18.556 35.712 C 18.681 35.786,18.784 35.864,18.784 35.886 C 18.784 36.183,22.718 39.821,24.140 40.839 C 25.793 42.022,27.411 42.226,29.778 41.549 C 30.693 41.287,31.880 40.099,32.503 38.822 C 32.555 38.716,32.650 38.606,32.714 38.577 C 32.778 38.547,32.869 38.436,32.916 38.330 C 32.968 38.212,33.047 38.125,33.116 38.108 C 33.200 38.087,33.247 38.018,33.291 37.855 C 33.324 37.732,33.405 37.565,33.472 37.485 C 33.538 37.405,33.609 37.271,33.629 37.187 C 33.649 37.103,33.776 36.806,33.912 36.527 C 34.482 35.352,34.523 35.241,34.866 33.963 C 35.023 33.378,35.168 32.631,35.259 31.933 C 35.305 31.584,35.385 30.990,35.439 30.613 C 35.655 29.073,35.680 28.623,35.640 26.907 C 35.629 26.405,35.649 26.099,35.714 25.764 C 35.816 25.240,35.797 24.586,35.665 24.092 C 35.621 23.927,35.562 23.618,35.535 23.407 C 35.459 22.824,35.344 22.253,35.126 21.384 C 35.017 20.950,34.928 20.549,34.928 20.492 C 34.928 20.436,34.895 20.251,34.854 20.082 C 34.814 19.912,34.721 19.526,34.648 19.223 C 34.576 18.920,34.495 18.635,34.469 18.589 C 34.443 18.543,34.287 18.217,34.124 17.866 C 33.960 17.515,33.720 17.053,33.590 16.839 C 33.460 16.625,33.354 16.434,33.354 16.415 C 33.354 16.383,33.091 15.991,32.611 15.306 C 32.259 14.804,31.966 14.538,30.911 13.758 C 30.229 13.254,29.854 13.066,29.293 12.943 C 29.047 12.889,28.781 12.821,28.701 12.791 C 28.348 12.656,27.893 12.581,27.186 12.541 C 26.767 12.517,26.242 12.485,26.018 12.470 C 25.716 12.449,25.508 12.467,25.206 12.540 "
10 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
11 |         <clipPath id="faceClip">
12 |             <use href="#face"></use>
13 |         </clipPath>
14 |         <path id="body"
15 |             d="M17.900 35.080 C 17.915 35.178,17.949 35.361,17.974 35.486 C 18.092 36.066,18.174 36.653,18.175 36.908 C 18.175 37.099,18.225 37.315,18.334 37.593 C 18.491 37.996,18.492 38.005,18.448 38.558 C 18.325 40.097,18.470 41.286,18.898 42.256 C 19.317 43.205,20.862 44.396,22.109 44.732 C 22.193 44.754,22.444 44.829,22.668 44.898 C 23.923 45.286,24.861 45.526,25.282 45.567 C 26.017 45.638,27.310 45.457,28.151 45.163 C 28.827 44.927,30.152 44.300,30.388 44.103 C 30.470 44.035,30.591 43.951,30.657 43.916 C 31.265 43.596,32.177 42.565,32.743 41.556 C 33.124 40.878,33.496 38.352,33.250 38.107 C 33.176 38.033,32.993 38.155,32.916 38.330 C 32.869 38.436,32.778 38.547,32.714 38.577 C 32.650 38.606,32.555 38.716,32.503 38.822 C 31.880 40.099,30.693 41.287,29.778 41.549 C 27.411 42.226,25.793 42.022,24.140 40.839 C 22.892 39.945,19.789 37.125,19.012 36.178 C 18.736 35.841,18.587 35.698,18.475 35.663 C 18.422 35.646,18.345 35.560,18.302 35.471 C 18.144 35.142,17.868 34.874,17.900 35.080 "
16 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
17 |         <clipPath id="bodyClip">
18 |             <use href="#body"></use>
19 |         </clipPath>
20 |     </defs>
21 |     <use href="#background" fill="#a1a1aa"></use>
22 |     <g clip-path="url(#backgroundClip)">
23 |         <use href="#body" fill="white"></use>
24 |         <path d="M14.83635,26.48685c7.39313,23.0904 15.23916,21.93789 17.69718,-1.28715"
25 |             fill="#d4d4d4"
26 |             clip-path="url(#bodyClip)"></path>
27 |         <use href="#body" fill="none" stroke="black" stroke-width="1"></use>
28 |         <path
29 |             d="M18.044 37.267 C 17.894 37.433,17.363 37.709,16.882 37.872 C 16.640 37.954,16.369 38.064,16.280 38.117 C 16.191 38.169,15.977 38.264,15.803 38.327 C 15.629 38.391,15.461 38.474,15.429 38.513 C 15.396 38.552,15.347 38.583,15.319 38.583 C 15.250 38.583,13.914 39.113,13.504 39.304 C 13.323 39.388,12.991 39.543,12.768 39.647 C 12.266 39.883,11.373 40.230,11.067 40.308 C 10.942 40.340,10.645 40.442,10.407 40.536 C 10.170 40.629,9.897 40.722,9.800 40.742 C 9.530 40.799,8.374 41.266,8.162 41.404 C 8.058 41.472,7.965 41.528,7.955 41.528 C 7.908 41.528,7.139 41.987,6.945 42.130 C 6.825 42.219,6.594 42.380,6.431 42.488 C 5.825 42.888,4.456 44.249,4.002 44.903 C 3.742 45.278,3.263 46.458,2.921 47.569 C 2.856 47.779,2.765 48.053,2.719 48.178 C 2.533 48.681,2.423 49.029,2.358 49.320 C 2.212 49.965,1.922 50.983,1.776 51.361 C 1.693 51.578,1.625 51.807,1.625 51.870 C 1.625 51.986,1.625 51.986,26.805 51.986 C 51.986 51.986,51.986 51.986,51.986 51.047 C 51.986 50.107,51.986 50.107,51.862 50.107 C 51.779 50.107,51.728 50.071,51.704 49.993 C 51.639 49.783,51.273 49.215,50.780 48.559 C 50.377 48.023,49.867 47.189,49.528 46.509 C 49.174 45.798,48.390 44.877,47.695 44.351 C 47.580 44.264,47.341 44.084,47.164 43.950 C 46.808 43.681,45.953 43.162,45.716 43.071 C 45.632 43.038,45.347 42.920,45.081 42.808 C 43.958 42.334,42.974 41.934,42.931 41.934 C 42.758 41.934,39.829 40.484,38.739 39.859 C 38.392 39.660,38.082 39.497,38.050 39.497 C 38.017 39.497,37.582 39.294,37.081 39.047 C 35.455 38.242,34.705 37.882,34.420 37.770 C 34.267 37.711,34.107 37.631,34.065 37.594 C 33.478 37.077,33.280 37.395,33.279 38.862 C 33.278 39.962,33.080 40.956,32.743 41.556 C 32.177 42.565,31.265 43.596,30.657 43.916 C 30.591 43.951,30.470 44.035,30.388 44.103 C 30.152 44.300,28.827 44.927,28.151 45.163 C 27.310 45.457,26.017 45.638,25.282 45.567 C 24.861 45.526,23.923 45.286,22.668 44.898 C 22.444 44.829,22.193 44.754,22.109 44.732 C 20.862 44.396,19.317 43.205,18.898 42.256 C 18.470 41.286,18.325 40.099,18.448 38.558 C 18.492 38.003,18.491 37.997,18.330 37.581 C 18.145 37.103,18.169 37.130,18.044 37.267 "
30 |             stroke="black" stroke-width="0.5"
31 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
32 |         <use href="#face" fill="white"></use>
33 |         <ellipse cx="21.921781797923554" cy="21.752111792300884" rx="1" ry="1.25"
34 |             clip-path="url(#faceClip)"></ellipse>
35 |         <ellipse cx="30.60458553974051" cy="21.044088033790224" rx="1" ry="1.25"
36 |             clip-path="url(#faceClip)"></ellipse>
37 |         <path d="M24.20608,19.66937c-1.91489,-0.55165 -4.219,-1.23392 -5.46749,0.67411" fill="none"
38 |             stroke="black" stroke-width="1" clip-path="url(#faceClip)"></path>
39 |         <path d="M29.508,19.30441c1.05755,-0.5089 3.25917,-1.84247 3.5035,-0.02888" fill="none"
40 |             stroke="black" stroke-width="1" clip-path="url(#faceClip)"></path>
41 |         <path d="M28.07,21.67c0.69,3.47 3.13,7.54 -1.86,6.98" fill="white" stroke="black"
42 |             stroke-width="1" clip-path="url(#faceClip)"></path>
43 |         <path
44 |             d="M27.3930608158,31.9882666371c-0.3071502794,0.0212599644 -0.6158269087,0.0021835037 -0.9236459928,-0.0041955035c-0.3036115609,-0.0062918138 -0.6068271228,-0.025969136 -0.9104025791,-0.0338119163c-0.2784511727,-0.0071937021 -0.5571208516,-0.0035019341 -0.8355559113,-0.0112943947c-0.2116293865,-0.0059227946 -0.4229919253,-0.0191755998 -0.6344351221,-0.0298457091c-0.1925712971,-0.009717772 -0.3852492416,-0.0179351038 -0.5776006125,-0.0313175438c-0.09933111,-0.006910752 -0.3889330049,0.009289942 -0.2972486374,-0.0295482436c0.1850438474,-0.0783859614 0.3960126298,-0.0691813789 0.5950922059,-0.0966205255c0.2393883348,-0.0329949045 0.4807323867,-0.0507560241 0.7199967465,-0.0846382418c0.2933659619,-0.0415435436 0.5853516802,-0.092378124 0.8775295384,-0.1415873995c0.363305125,-0.0611886956 0.7205836176,-0.1800585275 1.0888819027,-0.1896001968c0.3520097962,-0.009119676 0.6968574114,0.1628766231 1.0478192639,0.134243719c0.3052785487,-0.0249058732 0.5699000989,-0.2382029211 0.8716360024,-0.2908407339c0.1909227458,-0.0333064632 0.3870025764,0.0222624124 0.580203436,0.0375674187c0.1522020554,0.0120571587 0.304233265,0.0266916271 0.4558690377,0.0445082813c0.1073010516,0.012607485 0.2137742538,0.0314759024 0.3207298234,0.0467392729c0.0972627361,0.0138801297 0.239237728,-0.0422371741 0.2919221451,0.0406908069c0.0407690876,0.0641726397 -0.1381011483,0.0649418686 -0.2109123632,0.0868227543c-0.1407834744,0.0423075911 -0.2855449285,0.0700274012 -0.4282636159,0.1052594205c-0.1075450276,0.0265489304 -0.2151606542,0.0528207978 -0.3225270111,0.0800833007c-0.1458899391,0.0370444243 -0.2912706674,0.0760815654 -0.4372340611,0.112835496c-0.1844075973,0.0464342728 -0.3673993605,0.0994062433 -0.5538653413,0.1367256971c-0.2378145388,0.0475963962 -0.4760369886,0.1010771032 -0.7179888541,0.117824241z"
45 |             fill="#d4d4d4" stroke="#d4d4d4" stroke-width="0.25" clip-path="url(#faceClip)"></path>
46 |         <path
47 |             d="M27.3929182803,32.0240554598c0.243250384,-0.0151031987 0.4838839255,-0.0615587437 0.723132529,-0.1080233712c0.1998480366,-0.0388126176 0.3948781443,-0.0992807282 0.592662904,-0.1475181187c0.1445268881,-0.0352484183 0.2901523906,-0.0659958766 0.4342563071,-0.102935471c0.1159592429,-0.0297249895 0.2318928916,-0.0601185086 0.3457727035,-0.0970171462c0.1229503917,-0.0398376312 0.2434735761,-0.0868742355 0.3641969754,-0.1330228709c0.071016051,-0.0271471303 0.2204015726,-0.1622561758 0.2109123632,-0.0868227543c-0.0183182436,0.145618853 -0.1574738442,0.2481004075 -0.2459327333,0.365213316c-0.1051375173,0.1391941563 -0.2131911526,0.2770543123 -0.3341374629,0.4027559459c-0.1597171079,0.1659968075 -0.3169936416,0.3390458927 -0.5061283195,0.4705471029c-0.2178179163,0.1514440394 -0.454019128,0.2825351755 -0.7041505093,0.3709333304c-0.2813632233,0.0994357032 -0.578239016,0.1603691015 -0.8754379838,0.1873041346c-0.347868053,0.0315271536 -0.7008152601,0.0270890174 -1.0478006723,-0.013001723c-0.3486515245,-0.0402832432 -0.6939632145,-0.119724818 -1.0281834397,-0.2268577556c-0.3163846502,-0.1014158164 -0.6121504584,-0.2586690816 -0.9147127308,-0.3959297315c-0.2261348371,-0.1025885166 -0.4538765887,-0.203081744 -0.671057468,-0.3234720839c-0.1813263064,-0.100514998 -0.3999866753,-0.1704396935 -0.5221387824,-0.3379549373c-0.0586663388,-0.0804530211 0.1982937326,0.0184868367 0.2972486374,0.0295482436c0.1919864048,0.021460682 0.3830528742,0.0516608596 0.5755415932,0.0680142561c0.2071926348,0.0176026072 0.4151815082,0.0242410093 0.622900586,0.0338026205c0.2785754624,0.0128232337 0.5571509637,0.026879936 0.8359463348,0.033350225c0.2992622263,0.0069452842 0.5986645678,0.0050945906 0.8980019844,0.006891285c0.3163664535,0.0018989067 0.6333430903,0.0238010136 0.9491071838,0.0041955035z"
48 |             fill="#d4d4d4" stroke="#d4d4d4" stroke-width="0.25" clip-path="url(#faceClip)"></path>
49 |         <use href="#face" fill="none" stroke="black" stroke-width="1"></use>
50 |         <path
51 |             d="M24.316 7.841 C 24.162 7.880,23.785 7.948,23.479 7.992 C 22.819 8.087,22.333 8.264,21.881 8.576 C 21.378 8.922,20.865 8.862,20.865 8.456 C 20.865 8.394,20.852 8.329,20.835 8.312 C 20.797 8.275,20.561 8.378,20.561 8.432 C 20.561 8.453,20.521 8.511,20.472 8.559 C 20.423 8.608,20.315 8.751,20.231 8.879 C 20.067 9.127,19.600 9.429,19.012 9.666 C 18.161 10.010,17.943 10.119,17.726 10.311 C 17.596 10.425,17.335 10.609,17.147 10.719 C 16.931 10.846,16.743 11.004,16.639 11.147 C 16.548 11.273,16.341 11.551,16.178 11.767 C 15.794 12.277,15.735 12.397,15.510 13.123 C 15.407 13.458,15.233 13.908,15.124 14.123 C 15.015 14.338,14.926 14.551,14.926 14.598 C 14.926 14.859,14.747 15.254,14.484 15.573 C 13.935 16.239,13.817 17.620,14.168 19.292 C 14.253 19.697,14.356 20.245,14.397 20.510 C 14.439 20.775,14.507 21.118,14.550 21.272 C 14.743 21.971,14.815 22.302,14.849 22.649 C 14.885 23.016,14.944 23.284,15.101 23.780 C 15.209 24.123,15.201 24.347,15.077 24.471 C 15.004 24.544,14.993 24.580,15.039 24.594 C 15.074 24.605,15.189 24.641,15.293 24.673 C 15.436 24.717,15.534 24.804,15.690 25.027 C 16.179 25.723,16.419 25.372,16.504 23.836 C 16.532 23.334,16.586 22.694,16.625 22.414 C 16.664 22.135,16.732 21.632,16.775 21.297 C 17.044 19.244,17.230 18.153,17.365 17.839 C 17.718 17.014,19.186 14.937,19.612 14.658 C 19.674 14.616,19.965 14.383,20.258 14.139 C 21.646 12.980,22.283 12.720,23.492 12.820 C 23.829 12.848,23.992 12.835,24.330 12.751 C 25.564 12.444,25.707 12.424,26.316 12.484 C 26.630 12.514,27.068 12.540,27.290 12.541 C 27.672 12.542,28.384 12.667,28.701 12.790 C 28.781 12.820,29.047 12.889,29.293 12.943 C 29.854 13.066,30.229 13.254,30.911 13.758 C 31.966 14.538,32.259 14.804,32.611 15.306 C 33.091 15.991,33.354 16.383,33.354 16.415 C 33.354 16.434,33.462 16.627,33.593 16.843 C 33.724 17.059,33.975 17.544,34.151 17.920 C 34.533 18.737,34.531 18.742,34.371 17.058 C 34.260 15.889,34.222 15.756,33.829 15.153 C 33.666 14.903,33.511 14.582,33.430 14.326 C 33.357 14.095,33.255 13.833,33.204 13.743 C 33.152 13.654,33.072 13.432,33.027 13.252 C 32.935 12.888,32.785 12.603,32.463 12.184 C 32.214 11.860,31.578 10.672,31.577 10.530 C 31.574 10.006,30.600 9.089,30.010 9.056 C 29.687 9.038,29.672 9.028,29.757 8.892 C 29.838 8.762,29.828 8.752,29.533 8.674 C 29.343 8.623,29.245 8.622,29.064 8.671 C 28.601 8.795,28.253 8.714,28.136 8.456 C 27.999 8.156,26.552 7.933,25.758 8.089 C 25.565 8.126,25.532 8.116,25.359 7.964 C 25.135 7.767,24.777 7.725,24.316 7.841 "
52 |             stroke="black" stroke-width="1"
53 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
54 |         <path d="" stroke="black" stroke-width="0.5"
55 |             transform="translate(-1.8927809735670102 -3.9858709033127298)"></path>
56 |     </g>
57 | </svg>


--------------------------------------------------------------------------------
/assets/signature.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 -5 400 110"
2 |     stroke-width="2" stroke="#000">
3 |     <path
4 |         d="M 48.793 13.406 L 48.793 5.691 A 0.211 0.211 0 0 0 48.751 5.572 Q 48.661 5.44 48.378 5.29 A 3.083 3.083 0 0 0 48.304 5.251 A 4.491 4.491 0 0 0 47.709 5.007 A 5.871 5.871 0 0 0 47.181 4.861 Q 46.547 4.714 45.912 4.616 Q 45.277 4.519 44.887 4.616 A 44.005 44.005 0 0 0 34.387 8.686 A 37.84 37.84 0 0 0 28.334 12.82 Q 21.449 18.581 16.859 26.491 Q 10.461 37.664 7.471 45.195 A 70.604 70.604 0 0 0 7.338 45.534 Q 4.756 52.136 4.155 56.39 A 19.621 19.621 0 0 0 4.017 57.644 A 17.814 17.814 0 0 0 3.973 58.457 Q 3.899 60.921 4.599 62.478 A 4.444 4.444 0 0 0 5.629 63.943 A 6.006 6.006 0 0 0 8.638 65.426 Q 9.402 65.573 10.267 65.573 A 10.813 10.813 0 0 0 10.902 65.554 Q 14.222 65.359 18.617 63.552 A 66.542 66.542 0 0 0 25.01 60.501 A 77.984 77.984 0 0 0 27.552 59.06 Q 32.093 56.374 36.39 53.103 Q 40.687 49.831 43.91 46.804 Q 46.304 44.555 47.863 42.602 A 22.75 22.75 0 0 0 48.841 41.286 A 12.718 12.718 0 0 0 49.391 40.418 Q 50.325 38.788 50.053 37.85 A 1.34 1.34 0 0 0 49.964 37.624 A 7.024 7.024 0 0 0 48.668 37.507 Q 47.66 37.507 46.547 37.771 A 38.557 38.557 0 0 0 45.016 38.165 Q 44.324 38.359 43.718 38.562 A 21.374 21.374 0 0 0 43.324 38.699 Q 42.445 38.991 40.052 39.773 A 802.56 802.56 0 0 0 37.599 40.578 A 931.236 931.236 0 0 0 35.023 41.433 L 30.043 43.093 A 104.399 104.399 0 0 0 28.993 43.449 Q 27.707 43.893 27.033 44.173 A 9.956 9.956 0 0 0 26.82 44.265 A 3.607 3.607 0 0 1 26.331 44.403 Q 26.053 44.46 25.797 44.46 A 1.996 1.996 0 0 1 24.525 44.021 Q 23.597 43.288 23.256 42.165 Q 23.071 41.561 23.071 40.984 A 3.504 3.504 0 0 1 23.207 40.017 A 1.886 1.886 0 0 1 23.613 39.26 Q 23.903 38.938 24.356 38.768 A 2.516 2.516 0 0 1 24.574 38.699 A 12.959 12.959 0 0 0 25.471 38.491 Q 26.937 38.104 29.525 37.191 A 131.208 131.208 0 0 0 30.091 36.99 A 604 604 0 0 1 34.163 35.549 Q 36.315 34.796 38.707 33.974 A 986.614 986.614 0 0 1 39.027 33.865 Q 44.007 32.156 49.281 30.495 A 114.624 114.624 0 0 1 53.057 29.374 Q 54.931 28.854 56.612 28.468 A 60.551 60.551 0 0 1 58.558 28.054 Q 62.562 27.273 64.662 27.81 A 2.407 2.407 0 0 1 65.265 28.045 Q 66.497 28.752 65.577 30.801 A 7.585 7.585 0 0 1 65.492 30.984 A 40.882 40.882 0 0 1 64.971 31.55 Q 64.036 32.549 62.269 34.353 Q 59.925 36.745 57.289 39.382 A 745.36 745.36 0 0 1 54.713 41.946 A 634.546 634.546 0 0 1 52.259 44.363 A 319.43 319.43 0 0 1 51.168 45.427 Q 49.627 46.923 48.89 47.585 A 7.162 7.162 0 0 0 48.694 47.74 Q 48.161 48.171 46.693 49.441 Q 44.945 50.953 42.739 52.785 A 361.632 361.632 0 0 1 42.591 52.907 A 559.734 559.734 0 0 0 38.05 56.716 Q 36.331 58.174 35.184 59.088 A 48.453 48.453 0 0 1 34.535 59.597 A 1172.02 1172.02 0 0 0 33.857 60.171 Q 32.849 61.025 31.505 62.167 A 3377.257 3377.257 0 0 0 31.312 62.331 A 60.618 60.618 0 0 1 28.699 64.426 A 74.401 74.401 0 0 1 26.966 65.7 Q 24.574 67.409 21.937 68.923 A 30.077 30.077 0 0 1 18.003 70.828 A 26.401 26.401 0 0 1 16.664 71.316 A 17.241 17.241 0 0 1 13.425 72.071 A 14.692 14.692 0 0 1 11.537 72.195 A 7.636 7.636 0 0 1 6.996 70.73 A 17.345 17.345 0 0 1 3.07 66.704 A 15.387 15.387 0 0 1 1.136 62.82 Q 0 59.411 0 55.562 A 27.909 27.909 0 0 1 0.16 52.615 Q 0.746 47.097 3.089 41.091 A 77.363 77.363 0 0 1 8.9 29.324 Q 12.367 23.562 16.713 18.337 A 85.462 85.462 0 0 1 22.221 12.302 A 71.311 71.311 0 0 1 25.599 9.157 A 56.309 56.309 0 0 1 30.397 5.396 A 43.144 43.144 0 0 1 34.584 2.81 A 26.586 26.586 0 0 1 37.813 1.324 Q 40.419 0.344 42.738 0.222 Q 44.496 -0.266 46.302 0.32 A 9.777 9.777 0 0 1 49.574 2.126 A 10.94 10.94 0 0 1 52.015 5.007 Q 52.992 6.667 53.285 8.279 Q 53.373 8.762 53.373 9.228 A 4.722 4.722 0 0 1 52.894 11.306 A 3.75 3.75 0 0 1 51.582 12.79 Q 51.051 13.149 50.355 13.406 Q 50.062 13.601 49.427 13.601 A 3.149 3.149 0 0 1 49.228 13.595 Q 48.793 13.567 48.793 13.406 Z M 135.804 99.343 Q 132.777 98.269 130.873 96.12 A 16.606 16.606 0 0 1 128.285 92.252 A 15.43 15.43 0 0 1 127.943 91.482 A 17.617 17.617 0 0 1 126.689 86.611 A 16.645 16.645 0 0 1 126.673 86.452 A 22.37 22.37 0 0 1 126.586 85.17 Q 126.518 83.405 126.771 81.96 A 9.957 9.957 0 0 1 127.048 80.778 Q 127.385 79.671 127.943 78.982 A 2.41 2.41 0 0 1 128.296 78.623 Q 128.995 78.057 129.847 78.445 A 64.998 64.998 0 0 0 129.843 79.192 Q 129.843 86.545 131.563 90.65 A 13.097 13.097 0 0 0 131.849 91.286 A 14.624 14.624 0 0 0 133.285 93.688 Q 135.002 95.983 137.318 96.755 Q 140.658 97.868 144.861 96.247 A 18.225 18.225 0 0 0 144.935 96.218 A 29.11 29.11 0 0 0 149.476 93.944 A 39.35 39.35 0 0 0 153.529 91.091 A 52.578 52.578 0 0 0 159.32 85.678 A 62.903 62.903 0 0 0 161.83 82.79 A 59.636 59.636 0 0 0 168.173 73.383 A 55.275 55.275 0 0 0 168.519 72.732 A 45.95 45.95 0 0 0 171.327 66.239 A 38.801 38.801 0 0 0 172.425 62.38 Q 173.597 57.253 172.328 53.054 Q 163.539 59.402 158.656 61.062 A 21.609 21.609 0 0 1 157.157 61.515 Q 153.729 62.409 152.107 61.378 A 2.778 2.778 0 0 1 151.869 61.208 Q 149.998 59.721 150.625 55.925 A 14.447 14.447 0 0 1 150.648 55.788 Q 151.236 52.431 152.977 48.498 A 47.672 47.672 0 0 1 153.578 47.195 A 58.496 58.496 0 0 1 157.22 40.726 A 69.872 69.872 0 0 1 159.242 37.771 A 56.632 56.632 0 0 1 162.709 33.413 A 42.673 42.673 0 0 1 166.273 29.812 Q 169.018 27.363 171.623 26.268 A 12.07 12.07 0 0 1 173.256 25.71 A 6.316 6.316 0 0 1 174.204 25.536 Q 176.949 25.254 178.871 27.761 Q 181.117 30.788 181.703 35.915 A 37.097 37.097 0 0 1 181.933 39.573 Q 181.968 41.95 181.731 44.537 A 57.377 57.377 0 0 1 181.41 47.292 A 73.163 73.163 0 0 1 179.796 55.334 A 88.927 88.927 0 0 1 178.334 60.378 Q 176.136 67.214 172.914 73.708 Q 169.691 80.202 165.541 85.769 A 52.335 52.335 0 0 1 160.671 91.444 A 42.624 42.624 0 0 1 156.605 95.046 A 29.083 29.083 0 0 1 150.751 98.609 A 24.867 24.867 0 0 1 146.547 100.075 Q 141.875 101.243 137.05 99.767 A 21.269 21.269 0 0 1 135.804 99.343 Z M 150.843 59.304 L 152.015 60.378 A 12.701 12.701 0 0 1 150.019 62.434 Q 148.935 63.339 147.53 64.187 A 30.201 30.201 0 0 1 144.984 65.554 A 58.933 58.933 0 0 1 136.534 68.815 A 66.765 66.765 0 0 1 134.437 69.411 A 64.483 64.483 0 0 1 126.106 71.078 A 57.025 57.025 0 0 1 123.402 71.365 A 39.299 39.299 0 0 1 121.708 71.468 Q 117.521 71.629 114.906 70.73 A 11.089 11.089 0 0 1 112.759 69.767 A 7.84 7.84 0 0 1 110.463 67.751 Q 108.949 65.749 108.461 63.308 A 15.041 15.041 0 0 1 108.173 60.351 A 17.181 17.181 0 0 1 108.314 58.181 A 28.73 28.73 0 0 1 109.389 53.207 A 26.705 26.705 0 0 1 109.437 53.054 Q 112.172 50.136 115.546 46.41 A 742.784 742.784 0 0 0 116.029 45.876 A 148.315 148.315 0 0 1 123.793 37.917 A 99.95 99.95 0 0 1 132.338 30.642 A 39.655 39.655 0 0 1 137.807 27.134 A 32.888 32.888 0 0 1 141.371 25.515 Q 142.629 24.964 143.476 25.332 A 1.737 1.737 0 0 1 143.861 25.564 Q 144.789 26.296 145.179 27.859 A 11.135 11.135 0 0 1 145.44 29.344 Q 145.527 30.135 145.527 31.022 A 18.895 18.895 0 0 1 145.521 31.472 Q 145.472 33.523 145.179 35.476 A 27.079 27.079 0 0 1 144.838 37.331 A 20.424 20.424 0 0 1 144.398 38.991 A 14.738 14.738 0 0 1 144.154 39.712 Q 143.897 40.406 143.639 40.83 A 2.565 2.565 0 0 1 143.422 41.14 A 7.16 7.16 0 0 1 142.602 41.936 Q 141.668 42.724 140.13 43.646 A 39.396 39.396 0 0 1 138.881 44.363 A 639.137 639.137 0 0 1 135.328 46.303 A 850.014 850.014 0 0 1 131.41 48.415 A 342.994 342.994 0 0 0 123.207 52.956 A 54.958 54.958 0 0 0 120.116 54.853 Q 118.034 56.232 116.468 57.595 Q 113.832 59.89 113.343 62.136 A 2.745 2.745 0 0 0 113.279 62.72 Q 113.279 64.524 115.786 66.064 A 11.928 11.928 0 0 0 116.078 66.238 A 19.761 19.761 0 0 0 117.588 66.354 Q 120.113 66.456 123.325 66.014 A 49.261 49.261 0 0 0 124.134 65.896 Q 128.871 65.163 133.802 63.943 A 269.221 269.221 0 0 0 142.171 61.732 A 245.218 245.218 0 0 0 143.324 61.404 Q 147.43 60.224 150.207 59.475 A 220.481 220.481 0 0 1 150.843 59.304 Z M 354.554 59.304 L 355.726 60.378 A 12.701 12.701 0 0 1 353.73 62.434 Q 352.646 63.339 351.241 64.187 A 30.201 30.201 0 0 1 348.695 65.554 A 58.933 58.933 0 0 1 340.245 68.815 A 66.765 66.765 0 0 1 338.148 69.411 A 64.483 64.483 0 0 1 329.817 71.078 A 57.025 57.025 0 0 1 327.113 71.365 A 39.299 39.299 0 0 1 325.419 71.468 Q 321.231 71.629 318.617 70.73 A 11.089 11.089 0 0 1 316.47 69.767 A 7.84 7.84 0 0 1 314.173 67.751 Q 312.66 65.749 312.172 63.308 A 15.041 15.041 0 0 1 311.884 60.351 A 17.181 17.181 0 0 1 312.025 58.181 A 28.73 28.73 0 0 1 313.1 53.207 A 26.705 26.705 0 0 1 313.148 53.054 Q 315.883 50.136 319.257 46.41 A 742.784 742.784 0 0 0 319.74 45.876 A 148.315 148.315 0 0 1 327.504 37.917 A 99.95 99.95 0 0 1 336.048 30.642 A 39.655 39.655 0 0 1 341.518 27.134 A 32.888 32.888 0 0 1 345.082 25.515 Q 346.34 24.964 347.187 25.332 A 1.737 1.737 0 0 1 347.572 25.564 Q 348.5 26.296 348.89 27.859 A 11.135 11.135 0 0 1 349.151 29.344 Q 349.237 30.135 349.237 31.022 A 18.895 18.895 0 0 1 349.232 31.472 Q 349.183 33.523 348.89 35.476 A 27.079 27.079 0 0 1 348.548 37.331 A 20.424 20.424 0 0 1 348.109 38.991 A 14.738 14.738 0 0 1 347.865 39.712 Q 347.608 40.406 347.35 40.83 A 2.565 2.565 0 0 1 347.132 41.14 A 7.16 7.16 0 0 1 346.313 41.936 Q 345.379 42.724 343.841 43.646 A 39.396 39.396 0 0 1 342.591 44.363 A 639.137 639.137 0 0 1 339.039 46.303 A 850.014 850.014 0 0 1 335.121 48.415 A 342.994 342.994 0 0 0 326.918 52.956 A 54.958 54.958 0 0 0 323.827 54.853 Q 321.745 56.232 320.179 57.595 Q 317.543 59.89 317.054 62.136 A 2.745 2.745 0 0 0 316.99 62.72 Q 316.99 64.524 319.497 66.064 A 11.928 11.928 0 0 0 319.789 66.238 A 19.761 19.761 0 0 0 321.299 66.354 Q 323.824 66.456 327.035 66.014 A 49.261 49.261 0 0 0 327.845 65.896 Q 332.582 65.163 337.513 63.943 A 269.221 269.221 0 0 0 345.882 61.732 A 245.218 245.218 0 0 0 347.035 61.404 Q 351.141 60.224 353.918 59.475 A 220.481 220.481 0 0 1 354.554 59.304 Z M 355.629 70.73 Q 354.457 69.949 355.58 68.63 A 8.761 8.761 0 0 1 356.464 67.744 Q 357.45 66.877 358.974 65.933 A 30.363 30.363 0 0 1 359.193 65.798 Q 361.518 64.385 364.566 62.844 A 112.278 112.278 0 0 1 365.004 62.624 A 382.866 382.866 0 0 1 369.847 60.244 A 336.284 336.284 0 0 1 371.4 59.499 A 3139.549 3139.549 0 0 0 373.951 58.283 Q 375.502 57.543 376.82 56.911 A 46.155 46.155 0 0 0 377.766 56.446 Q 379.313 55.66 379.847 55.202 A 21.968 21.968 0 0 0 381.11 54.051 Q 383.078 52.097 383.213 50.696 A 2.218 2.218 0 0 0 383.216 50.661 Q 383.363 48.855 381.605 47.732 A 9.518 9.518 0 0 0 380.123 46.973 Q 379.358 46.656 378.432 46.393 A 23.094 23.094 0 0 0 376.673 45.974 Q 373.5 45.339 370.131 44.802 A 224.528 224.528 0 0 1 365.242 43.969 A 197.255 197.255 0 0 1 363.685 43.679 A 23.766 23.766 0 0 1 361.951 43.286 Q 360.325 42.847 359.284 42.258 A 6.388 6.388 0 0 1 359.047 42.116 A 3.205 3.205 0 0 1 358.465 41.66 Q 357.716 40.904 357.932 39.857 A 2.877 2.877 0 0 1 358.021 39.529 A 3.349 3.349 0 0 1 358.52 38.622 Q 359.432 37.385 361.756 35.736 A 36.515 36.515 0 0 1 362.269 35.378 Q 363.316 34.631 365.107 33.368 A 1476.509 1476.509 0 0 1 366.273 32.546 A 135.268 135.268 0 0 1 369.741 30.189 A 162.348 162.348 0 0 1 371.986 28.738 Q 375.062 26.784 378.089 25.222 A 37.761 37.761 0 0 1 379.886 24.35 Q 381.758 23.507 383.168 23.171 Q 384.242 22.976 385.365 23.366 A 5.115 5.115 0 0 1 386.321 23.808 A 3.904 3.904 0 0 1 387.172 24.49 Q 387.855 25.222 387.806 26.101 A 1.364 1.364 0 0 1 387.502 26.87 Q 387.172 27.295 386.488 27.663 A 585.785 585.785 0 0 1 378.386 32.131 A 508.057 508.057 0 0 1 375.795 33.523 A 111.07 111.07 0 0 0 367.108 38.693 A 124.277 124.277 0 0 0 365.492 39.773 A 1.942 1.942 0 0 0 365.405 40.073 Q 365.375 40.224 365.375 40.366 A 1.26 1.26 0 0 0 365.638 41.14 A 3.155 3.155 0 0 0 366.179 41.706 A 2.675 2.675 0 0 0 366.664 42.019 A 125.014 125.014 0 0 1 372.081 42.693 Q 378.485 43.642 382.24 45.046 Q 386.339 46.579 388.094 48.352 A 5.362 5.362 0 0 1 388.881 49.343 Q 390.297 51.687 388.539 54.324 A 16.438 16.438 0 0 1 386.674 56.612 Q 385.661 57.661 384.368 58.693 A 31.529 31.529 0 0 1 383.314 59.499 A 50.308 50.308 0 0 1 378.836 62.411 A 63.628 63.628 0 0 1 375.355 64.284 A 98.046 98.046 0 0 1 369.873 66.825 A 81.309 81.309 0 0 1 366.713 68.093 A 90.518 90.518 0 0 1 363.744 69.155 Q 362.273 69.651 360.958 70.028 A 46.254 46.254 0 0 1 359.437 70.437 A 26.599 26.599 0 0 1 358.533 70.647 Q 356.536 71.073 355.827 70.828 A 0.774 0.774 0 0 1 355.629 70.73 Z M 261.52 66.857 A 6.232 6.232 0 0 0 264.027 69.558 Q 266.588 71.095 269.423 70.74 A 9.854 9.854 0 0 0 271.351 70.29 A 18.92 18.92 0 0 0 272.236 69.966 Q 275.726 68.592 279.408 65.603 A 59.823 59.823 0 0 0 283.03 62.402 A 75.279 75.279 0 0 0 287.66 57.546 A 295.928 295.928 0 0 0 295.57 48.122 A 1126.259 1126.259 0 0 0 299.232 43.545 A 895.73 895.73 0 0 0 302.601 39.284 A 91.827 91.827 0 0 1 302.894 38.914 Q 304.936 36.342 306.617 34.614 A 26.864 26.864 0 0 1 308.168 33.132 A 28.499 28.499 0 0 0 308.309 32.696 Q 309.38 29.303 308.461 28.982 A 0.818 0.818 0 0 0 308.392 28.961 Q 307.589 28.757 305.864 29.981 A 18.29 18.29 0 0 0 304.994 30.642 A 31.963 31.963 0 0 0 304.764 30.828 Q 303.133 32.165 301.039 34.225 A 110.091 110.091 0 0 0 298.89 36.404 A 1083.831 1083.831 0 0 0 295.167 40.298 A 1306.369 1306.369 0 0 0 291.224 44.46 A 1907.538 1907.538 0 0 1 283.021 53.103 A 201.764 201.764 0 0 1 282.473 53.675 Q 280.563 55.659 278.79 57.389 A 120.944 120.944 0 0 1 275.355 60.622 Q 272.938 62.804 271.029 64.156 A 21.66 21.66 0 0 1 269.398 65.212 A 8.542 8.542 0 0 1 269.04 65.409 Q 267.367 66.275 266.56 65.639 A 1.482 1.482 0 0 1 266.175 65.163 A 52.909 52.909 0 0 1 266.089 62.144 A 50.704 50.704 0 0 1 266.224 58.425 A 203.602 203.602 0 0 1 266.81 51.882 A 209.148 209.148 0 0 0 267.396 45.388 A 40.358 40.358 0 0 0 267.507 42.384 A 43.138 43.138 0 0 0 267.347 38.699 L 267.006 38.259 A 7.434 7.434 0 0 0 266.835 38.048 Q 266.683 37.867 266.502 37.672 A 14.274 14.274 0 0 0 266.127 37.282 A 6.69 6.69 0 0 0 266.11 37.266 Q 265.858 37.016 265.606 36.819 A 4.084 4.084 0 0 0 265.052 36.452 Q 264.664 36.241 264.302 36.335 A 1.044 1.044 0 0 0 264.027 36.452 A 35.86 35.86 0 0 1 263.912 37.004 Q 263.614 38.381 263.05 40.554 Q 262.703 41.893 262.356 43.408 A 143.516 143.516 0 0 0 261.683 46.511 Q 261 49.831 260.511 53.347 Q 260.104 56.277 260.104 59.003 A 35.734 35.734 0 0 0 260.121 60.085 A 22.727 22.727 0 0 0 260.356 62.774 A 17.192 17.192 0 0 0 261.097 65.847 A 8.386 8.386 0 0 0 261.52 66.857 Z M 239.222 60.769 L 261.293 3.347 A 7.867 7.867 0 0 1 261.487 2.887 Q 262.06 1.652 262.562 2.029 Q 263.057 2.4 263.378 3.468 A 7.867 7.867 0 0 1 263.49 3.884 A 11.724 11.724 0 0 1 263.746 5.398 Q 263.832 6.203 263.832 7.107 Q 263.832 8.306 263.659 9.183 A 5.41 5.41 0 0 1 263.441 9.988 A 5037.732 5037.732 0 0 1 257.142 24.88 Q 253.968 32.351 251.088 39.919 A 368.552 368.552 0 0 0 245.668 55.154 Q 243.129 62.82 241.371 70.73 Q 240.72 71.137 240.238 71.137 A 1.037 1.037 0 0 1 240.052 71.12 Q 239.515 71.023 239.076 70.583 Q 238.636 70.144 238.392 69.558 Q 238.148 68.972 238.05 68.484 A 2.656 2.656 0 0 1 237.974 68.108 Q 237.898 67.544 237.985 66.725 A 10.521 10.521 0 0 1 238.002 66.579 Q 238.148 65.359 238.392 64.089 A 27.707 27.707 0 0 1 238.632 62.963 Q 238.774 62.362 238.929 61.843 A 62.117 62.117 0 0 0 238.998 61.613 Q 239.222 60.854 239.222 60.769 Z M 61.931 70.665 A 0.11 0.11 0 0 0 61.976 70.73 A 8.614 8.614 0 0 1 61.983 70.733 Q 62.374 70.929 63.148 71.365 A 27.166 27.166 0 0 0 63.366 71.486 Q 63.819 71.735 63.968 71.789 A 0.202 0.202 0 0 0 64.027 71.804 A 0.42 0.42 0 0 0 64.107 71.796 Q 64.741 71.673 65.921 69.656 A 29.731 29.731 0 0 0 66.517 68.581 Q 68.226 65.359 70.814 60.476 A 165.374 165.374 0 0 1 73.634 55.386 A 221.078 221.078 0 0 1 76.918 49.88 A 77.406 77.406 0 0 1 84.73 39.284 A 51.308 51.308 0 0 1 85.817 38.088 A 45.468 45.468 0 0 1 94.105 31.081 Q 99.183 27.761 105.043 27.663 Q 105.968 26.239 105.882 25.412 A 1.035 1.035 0 0 0 105.677 24.88 A 1.651 1.651 0 0 0 105.612 24.8 Q 105.138 24.255 104.155 24.08 A 5.636 5.636 0 0 0 103.334 24.001 A 12.21 12.21 0 0 0 102.985 23.996 Q 101.385 23.996 99.232 24.392 A 50.781 50.781 0 0 0 94.593 25.466 A 81.24 81.24 0 0 0 94.449 25.507 Q 92.291 26.121 90.589 26.736 A 39.178 39.178 0 0 0 89.975 26.963 Q 89.08 27.303 88.672 27.522 A 1.856 1.856 0 0 0 88.441 27.663 A 37.805 37.805 0 0 0 81.166 33.669 Q 77.894 37.136 75.16 40.945 A 1.801 1.801 0 0 1 75.088 40.996 Q 74.482 41.405 73.935 41.013 A 1.644 1.644 0 0 1 73.695 40.798 A 16.372 16.372 0 0 1 73.161 40.196 A 20.21 20.21 0 0 1 72.328 39.138 Q 71.986 38.674 71.644 38.283 A 9.519 9.519 0 0 0 70.961 37.575 Q 70.385 37.041 69.809 37.441 A 1.598 1.598 0 0 0 69.593 37.624 A 4.992 4.992 0 0 0 69.181 38.151 Q 68.401 39.284 67.591 41.482 A 40.916 40.916 0 0 0 67.456 41.855 Q 66.984 43.176 66.543 44.687 A 69.76 69.76 0 0 0 65.687 47.927 Q 64.808 51.589 64.027 55.593 Q 63.246 59.597 62.757 62.917 Q 62.391 65.407 62.162 67.266 A 99.35 99.35 0 0 0 62.025 68.435 A 40.987 40.987 0 0 0 61.98 68.86 Q 61.828 70.373 61.931 70.665 Z M 155.583 51.927 A 14.996 14.996 0 0 0 155.58 51.98 A 24.987 24.987 0 0 0 155.538 52.994 A 29.707 29.707 0 0 0 155.531 53.64 A 28.465 28.465 0 0 0 155.55 54.7 A 23.908 23.908 0 0 0 155.58 55.3 A 12.235 12.235 0 0 0 155.606 55.65 Q 155.652 56.152 155.726 56.374 A 6.68 6.68 0 0 0 157.352 56.576 Q 159.579 56.576 161.902 55.087 A 13.031 13.031 0 0 0 162.172 54.909 A 26.121 26.121 0 0 0 166.667 51.025 A 31.308 31.308 0 0 0 168.275 49.148 Q 171.058 45.632 172.963 41.726 Q 174.823 37.91 175.285 35.306 A 11.782 11.782 0 0 0 175.306 35.183 A 8.384 8.384 0 0 0 175.368 34.744 Q 175.518 33.414 175.101 32.767 A 1.28 1.28 0 0 0 174.281 32.204 Q 172.816 31.863 168.91 35.378 A 134.979 134.979 0 0 0 168.275 35.964 Q 167.57 36.619 166.657 37.481 A 441.867 441.867 0 0 0 165.785 38.308 A 89.569 89.569 0 0 0 162.828 41.256 A 101.881 101.881 0 0 0 161.83 42.312 A 52.608 52.608 0 0 0 158.119 46.755 A 24.18 24.18 0 0 0 157.002 48.381 Q 156.501 49.183 156.145 49.922 A 11.21 11.21 0 0 0 155.726 50.906 Q 155.632 51.188 155.583 51.927 Z M 137.139 34.015 A 32.448 32.448 0 0 0 136.781 34.255 A 51.26 51.26 0 0 0 136.058 34.756 Q 134.989 35.508 133.61 36.547 A 145.069 145.069 0 0 0 133.412 36.697 A 249.169 249.169 0 0 0 131.337 38.283 A 312.73 312.73 0 0 0 129.115 40.017 A 303.79 303.79 0 0 0 126.918 41.762 A 235.378 235.378 0 0 0 124.916 43.386 A 160.796 160.796 0 0 0 123.577 44.496 Q 123.056 44.933 122.597 45.327 A 77.055 77.055 0 0 0 121.742 46.072 A 36.983 36.983 0 0 0 121.484 46.302 Q 120.493 47.195 120.668 47.195 Q 122.23 47.488 124.72 46.755 A 27.779 27.779 0 0 0 127.828 45.627 A 34.807 34.807 0 0 0 129.896 44.656 A 42.742 42.742 0 0 0 135.023 41.579 A 27.429 27.429 0 0 0 136.71 40.304 Q 137.995 39.248 138.881 38.21 A 9.607 9.607 0 0 0 139.561 37.319 Q 140.31 36.198 140.345 35.281 A 1.459 1.459 0 0 0 140.346 35.224 Q 140.346 33.998 138.246 33.425 Q 138.162 33.341 137.139 34.015 Z M 340.85 34.015 A 32.448 32.448 0 0 0 340.492 34.255 A 51.26 51.26 0 0 0 339.769 34.756 Q 338.7 35.508 337.321 36.547 A 145.069 145.069 0 0 0 337.123 36.697 A 249.169 249.169 0 0 0 335.047 38.283 A 312.73 312.73 0 0 0 332.826 40.017 A 303.79 303.79 0 0 0 330.629 41.762 A 235.378 235.378 0 0 0 328.627 43.386 A 160.796 160.796 0 0 0 327.288 44.496 Q 326.767 44.933 326.308 45.327 A 77.055 77.055 0 0 0 325.453 46.072 A 36.983 36.983 0 0 0 325.195 46.302 Q 324.204 47.195 324.379 47.195 Q 325.941 47.488 328.431 46.755 A 27.779 27.779 0 0 0 331.539 45.627 A 34.807 34.807 0 0 0 333.607 44.656 A 42.742 42.742 0 0 0 338.734 41.579 A 27.429 27.429 0 0 0 340.421 40.304 Q 341.706 39.248 342.591 38.21 A 9.607 9.607 0 0 0 343.272 37.319 Q 344.021 36.198 344.056 35.281 A 1.459 1.459 0 0 0 344.057 35.224 Q 344.057 33.998 341.957 33.425 Q 341.873 33.341 340.85 34.015 Z" />
5 | </svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 | Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 | Everyone is permitted to copy and distribute verbatim copies
  6 | of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 | The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 | The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works. By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users. We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors. You can apply it to
 20 | your programs, too.
 21 | 
 22 | When we speak of free software, we are referring to freedom, not
 23 | price. Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 | To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights. Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 | For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received. You must make sure that they, too, receive
 37 | or can get the source code. And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 | Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 | For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software. For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 | Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so. This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software. The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable. Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products. If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 | Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary. To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 | The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 | 0. Definitions.
 74 | 
 75 | "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 | "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 | "The Program" refers to any copyrightable work licensed under this
 81 | License. Each licensee is addressed as "you". "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 | To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy. The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 | A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 | To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy. Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 | To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies. Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 | An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License. If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 | 1. Source Code.
113 | 
114 | The "source code" for a work means the preferred form of the work
115 | for making modifications to it. "Object code" means any non-source
116 | form of a work.
117 | 
118 | A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 | The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form. A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 | The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities. However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work. For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 | The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 | The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 | 2. Basic Permissions.
155 | 
156 | All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met. This License explicitly affirms your unlimited
159 | permission to run the unmodified Program. The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work. This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 | You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force. You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright. Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 | Conveying under any other circumstances is permitted solely under
176 | the conditions stated below. Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 | No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 | When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 | 4. Conveying Verbatim Copies.
196 | 
197 | You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 | You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 | 5. Conveying Modified Source Versions.
209 | 
210 | You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 | A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit. Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 | 6. Conveying Non-Source Forms.
246 | 
247 | You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 | A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 | A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling. In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage. For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product. A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 | "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source. The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 | If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information. But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 | The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed. Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 | Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 | 7. Additional Terms.
344 | 
345 | "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law. If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 | When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it. (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.) You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 | Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 | All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10. If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term. If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 | If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 | Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 | 8. Termination.
408 | 
409 | You may not propagate or modify a covered work except as expressly
410 | provided under this License. Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 | However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 | Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 | Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License. If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 | 9. Acceptance Not Required for Having Copies.
436 | 
437 | You are not required to accept this License in order to receive or
438 | run a copy of the Program. Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance. However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work. These actions infringe copyright if you do
443 | not accept this License. Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 | 10. Automatic Licensing of Downstream Recipients.
447 | 
448 | Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License. You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 | An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations. If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 | You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License. For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 | 11. Patents.
472 | 
473 | A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based. The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 | A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version. For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 | Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 | In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement). To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 | If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients. "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 | If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 | A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License. You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 | Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 | 12. No Surrender of Others' Freedom.
541 | 
542 | If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License. If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all. For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 | 13. Use with the GNU Affero General Public License.
553 | 
554 | Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work. The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 | 14. Revised Versions of this License.
564 | 
565 | The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time. Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 | Each version is given a distinguishing version number. If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation. If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 | If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 | Later license versions may give you additional or different
585 | permissions. However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 | 15. Disclaimer of Warranty.
590 | 
591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 | 16. Limitation of Liability.
601 | 
602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 | 17. Interpretation of Sections 15 and 16.
613 | 
614 | If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 | If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 | To do so, attach the following notices to the program. It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     <one line to give the program's name and a brief idea of what it does.>
635 |     Copyright (C) <year>  <name of author>
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 | If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     <program>  Copyright (C) <year>  <name of author>
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License. Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 | You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <https://www.gnu.org/licenses/>.
668 | 
669 | The GNU General Public License does not permit incorporating your program
670 | into proprietary programs. If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library. If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License. But first, please read
674 | <https://www.gnu.org/licenses/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------
/utilities/potrace.js:
--------------------------------------------------------------------------------
   1 | // prettier-ignore
   2 | 
   3 | // https://github.com/kilobtye/potrace
   4 | export const Potrace = function() {
   5 | 
   6 |   function Point(x, y) {
   7 |     this.x = x;
   8 |     this.y = y;
   9 |   }
  10 |   
  11 |   Point.prototype.copy = function(){
  12 |     return new Point(this.x, this.y);
  13 |   };
  14 | 
  15 |   function Bitmap(w, h) {
  16 |     this.w = w;
  17 |     this.h = h;
  18 |     this.size = w * h;
  19 |     this.arraybuffer = new ArrayBuffer(this.size);
  20 |     this.data = new Int8Array(this.arraybuffer);
  21 |   }
  22 | 
  23 |   Bitmap.prototype.at = function (x, y) {
  24 |     return (x >= 0 && x < this.w && y >=0 && y < this.h) && 
  25 |         this.data[this.w * y + x] === 1;
  26 |   };
  27 | 
  28 |   Bitmap.prototype.index = function(i) {
  29 |     var point = new Point();
  30 |     point.y = Math.floor(i / this.w);
  31 |     point.x = i - point.y * this.w;
  32 |     return point;
  33 |   };
  34 | 
  35 |   Bitmap.prototype.flip = function(x, y) {
  36 |     if (this.at(x, y)) {
  37 |       this.data[this.w * y + x] = 0;
  38 |     } else {
  39 |       this.data[this.w * y + x] = 1;
  40 |     }
  41 |   };
  42 |     
  43 |   Bitmap.prototype.copy = function() {
  44 |     var bm = new Bitmap(this.w, this.h), i;
  45 |     for (i = 0; i < this.size; i++) {
  46 |       bm.data[i] = this.data[i];
  47 |     }
  48 |     return bm;
  49 |   };
  50 | 
  51 |   function Path() {
  52 |     this.area = 0;
  53 |     this.len = 0;
  54 |     this.curve = {};
  55 |     this.pt = [];
  56 |     this.minX = 100000;
  57 |     this.minY = 100000;
  58 |     this.maxX= -1;
  59 |     this.maxY = -1;
  60 |   }
  61 | 
  62 |   function Curve(n) {
  63 |     this.n = n;
  64 |     this.tag = new Array(n);
  65 |     this.c = new Array(n * 3);
  66 |     this.alphaCurve = 0;
  67 |     this.vertex = new Array(n);
  68 |     this.alpha = new Array(n);
  69 |     this.alpha0 = new Array(n);
  70 |     this.beta = new Array(n);
  71 |   }
  72 | 
  73 |   var imgElement = document.createElement("img"),
  74 |       imgCanvas = document.createElement("canvas"),
  75 |       bm = null,
  76 |       pathlist = [],
  77 |       callback,
  78 |       info = {
  79 |         isReady: false,
  80 |         turnpolicy: "minority", 
  81 |         turdsize: 2,
  82 |         optcurve: true,
  83 |         alphamax: 1,
  84 |         opttolerance: 0.2
  85 |       };
  86 | 
  87 |   imgElement.onload = function() {
  88 |     loadCanvas();
  89 |     loadBm();
  90 |   };
  91 | 
  92 |   function loadImageFromFile(file) {
  93 |     if (info.isReady) {
  94 |       clear();
  95 |     }
  96 |     imgElement.file = file;
  97 |     var reader = new FileReader();
  98 |     reader.onload = (function(aImg) {
  99 |       return function(e) {
 100 |         aImg.src = e.target.result;
 101 |       };
 102 |     })(imgElement);
 103 |     reader.readAsDataURL(file);
 104 |   }
 105 |   
 106 |   function loadImageFromUrl(url) {
 107 |     if (info.isReady) {
 108 |       clear();
 109 |     }
 110 |     imgElement.src = url;
 111 |     
 112 |   }
 113 |   
 114 |   function setParameter(obj) {
 115 |    var key;
 116 |    for (key in obj) {
 117 |      if (obj.hasOwnProperty(key)) {
 118 |        info[key] = obj[key];
 119 |      }
 120 |     }
 121 |   }
 122 |   
 123 |   function loadCanvas() {
 124 |     imgCanvas.width = imgElement.width;
 125 |     imgCanvas.height = imgElement.height;
 126 |     var ctx = imgCanvas.getContext('2d');
 127 |     ctx.drawImage(imgElement, 0, 0);
 128 |   }
 129 |   
 130 |   function loadBm() {
 131 |     var ctx = imgCanvas.getContext('2d');
 132 |     bm = new Bitmap(imgCanvas.width, imgCanvas.height);
 133 |     var imgdataobj = ctx.getImageData(0, 0, bm.w, bm.h);
 134 |     var l = imgdataobj.data.length, i, j, color;
 135 |     for (i = 0, j = 0; i < l; i += 4, j++) {
 136 |       color = 0.2126 * imgdataobj.data[i] + 0.7153 * imgdataobj.data[i + 1] +
 137 |           0.0721 * imgdataobj.data[i + 2];
 138 |       bm.data[j] = (color < 128 ? 1 : 0);
 139 |     }
 140 |     info.isReady = true;
 141 |   }
 142 |   
 143 |   
 144 |   function bmToPathlist() {
 145 |   
 146 |     var bm1 = bm.copy(),
 147 |       currentPoint = new Point(0, 0),
 148 |       path;
 149 |     
 150 |     function findNext(point) {
 151 |       var i = bm1.w * point.y + point.x;
 152 |       while (i < bm1.size && bm1.data[i] !== 1) {
 153 |         i++;
 154 |       }
 155 |       return i < bm1.size && bm1.index(i);
 156 |     }
 157 |     
 158 |     function majority(x, y) {
 159 |       var i, a, ct;
 160 |       for (i = 2; i < 5; i++) {
 161 |         ct = 0;
 162 |         for (a = -i + 1; a <= i - 1; a++) {
 163 |           ct += bm1.at(x + a, y + i - 1) ? 1 : -1;
 164 |           ct += bm1.at(x + i - 1, y + a - 1) ? 1 : -1;
 165 |           ct += bm1.at(x + a - 1, y - i) ? 1 : -1;
 166 |           ct += bm1.at(x - i, y + a) ? 1 : -1;
 167 |         }
 168 |         if (ct > 0) {
 169 |           return 1;
 170 |         } else if (ct < 0) {
 171 |           return 0;
 172 |         }
 173 |       }
 174 |       return 0;
 175 |     }
 176 |     
 177 |     function findPath(point) {
 178 |       var path = new Path(),
 179 |         x = point.x, y = point.y,
 180 |         dirx = 0, diry = 1, tmp;
 181 |       
 182 |       path.sign = bm.at(point.x, point.y) ? "+" : "-";
 183 |       
 184 |       while (1) {
 185 |         path.pt.push(new Point(x, y));
 186 |         if (x > path.maxX)
 187 |           path.maxX = x;
 188 |         if (x < path.minX)
 189 |           path.minX = x;
 190 |         if (y > path.maxY)
 191 |           path.maxY = y;
 192 |         if (y < path.minY)
 193 |           path.minY = y;
 194 |         path.len++;
 195 |         
 196 |         x += dirx;
 197 |         y += diry;
 198 |         path.area -= x * diry;
 199 |         
 200 |         if (x === point.x && y === point.y)
 201 |           break;
 202 |         
 203 |         var l = bm1.at(x + (dirx + diry - 1 ) / 2, y + (diry - dirx - 1) / 2);
 204 |         var r = bm1.at(x + (dirx - diry - 1) / 2, y + (diry + dirx - 1) / 2);
 205 |         
 206 |         if (r && !l) {
 207 |           if (info.turnpolicy === "right" ||
 208 |           (info.turnpolicy === "black" && path.sign === '+') ||
 209 |           (info.turnpolicy === "white" && path.sign === '-') ||
 210 |           (info.turnpolicy === "majority" && majority(x, y)) ||
 211 |           (info.turnpolicy === "minority" && !majority(x, y))) {
 212 |             tmp = dirx;
 213 |             dirx = -diry;
 214 |             diry = tmp;
 215 |           } else {
 216 |             tmp = dirx;
 217 |             dirx = diry;
 218 |             diry = -tmp;
 219 |           }
 220 |         } else if (r) {
 221 |           tmp = dirx;
 222 |           dirx = -diry;
 223 |           diry = tmp;
 224 |         } else if (!l) {
 225 |           tmp = dirx;
 226 |           dirx = diry;
 227 |           diry = -tmp;
 228 |         }
 229 |       }
 230 |       return path;
 231 |     }
 232 |     
 233 |     function xorPath(path){
 234 |       var y1 = path.pt[0].y,
 235 |         len = path.len,
 236 |         x, y, maxX, minY, i, j;
 237 |       for (i = 1; i < len; i++) {
 238 |         x = path.pt[i].x;
 239 |         y = path.pt[i].y;
 240 |         
 241 |         if (y !== y1) {
 242 |           minY = y1 < y ? y1 : y;
 243 |           maxX = path.maxX;
 244 |           for (j = x; j < maxX; j++) {
 245 |             bm1.flip(j, minY);
 246 |           }
 247 |           y1 = y;
 248 |         }
 249 |       }
 250 |       
 251 |     }
 252 |     
 253 |     while (currentPoint = findNext(currentPoint)) {
 254 | 
 255 |       path = findPath(currentPoint);
 256 |       
 257 |       xorPath(path);
 258 |       
 259 |       if (path.area > info.turdsize) {
 260 |         pathlist.push(path);
 261 |       }
 262 |     }
 263 |     
 264 |   }
 265 |   
 266 | 
 267 |   function processPath() {
 268 |   
 269 |     function Quad() {
 270 |       this.data = [0,0,0,0,0,0,0,0,0];
 271 |     }
 272 | 
 273 |     Quad.prototype.at = function(x, y) {
 274 |       return this.data[x * 3 + y];
 275 |     };
 276 |     
 277 |     function Sum(x, y, xy, x2, y2) {
 278 |       this.x = x;
 279 |       this.y = y;
 280 |       this.xy = xy;
 281 |       this.x2 = x2;
 282 |       this.y2 = y2;
 283 |     }
 284 |     
 285 |     function mod(a, n) {
 286 |         return a >= n ? a % n : a>=0 ? a : n-1-(-1-a) % n;
 287 |     }
 288 |   
 289 |     function xprod(p1, p2) {
 290 |       return p1.x * p2.y - p1.y * p2.x;
 291 |     }
 292 |     
 293 |     function cyclic(a, b, c) {
 294 |       if (a <= c) {
 295 |         return (a <= b && b < c);
 296 |       } else {
 297 |         return (a <= b || b < c);
 298 |       }
 299 |     }
 300 |       
 301 |     function sign(i) {
 302 |       return i > 0 ? 1 : i < 0 ? -1 : 0;
 303 |     }
 304 |     
 305 |     function quadform(Q, w) {
 306 |       var v = new Array(3), i, j, sum;
 307 |     
 308 |       v[0] = w.x;
 309 |       v[1] = w.y;
 310 |       v[2] = 1;
 311 |       sum = 0.0;
 312 |     
 313 |       for (i=0; i<3; i++) {
 314 |         for (j=0; j<3; j++) {
 315 |           sum += v[i] * Q.at(i, j) * v[j];
 316 |         }
 317 |       }
 318 |       return sum;
 319 |     }
 320 |   
 321 |     function interval(lambda, a, b) {
 322 |       var res = new Point();
 323 |     
 324 |       res.x = a.x + lambda * (b.x - a.x);
 325 |       res.y = a.y + lambda * (b.y - a.y);
 326 |       return res;
 327 |     }
 328 |     
 329 |     function dorth_infty(p0, p2) {
 330 |       var r = new Point();
 331 |       
 332 |       r.y = sign(p2.x - p0.x);
 333 |       r.x = -sign(p2.y - p0.y);
 334 |     
 335 |       return r;
 336 |     }
 337 |     
 338 |     function ddenom(p0, p2) {
 339 |       var r = dorth_infty(p0, p2);
 340 |     
 341 |       return r.y * (p2.x - p0.x) - r.x * (p2.y - p0.y);
 342 |     }
 343 |     
 344 |     function dpara(p0, p1, p2) {
 345 |       var x1, y1, x2, y2;
 346 |     
 347 |       x1 = p1.x - p0.x;
 348 |       y1 = p1.y - p0.y;
 349 |       x2 = p2.x - p0.x;
 350 |       y2 = p2.y - p0.y;
 351 |     
 352 |       return x1 * y2 - x2 * y1;
 353 |     }
 354 |     
 355 |     function cprod(p0, p1, p2, p3) {
 356 |       var x1, y1, x2, y2;
 357 |     
 358 |       x1 = p1.x - p0.x;
 359 |       y1 = p1.y - p0.y;
 360 |       x2 = p3.x - p2.x;
 361 |       y2 = p3.y - p2.y;
 362 |     
 363 |       return x1 * y2 - x2 * y1;
 364 |     }
 365 |       
 366 |     function iprod(p0, p1, p2) {
 367 |       var x1, y1, x2, y2;
 368 |     
 369 |       x1 = p1.x - p0.x;
 370 |       y1 = p1.y - p0.y;
 371 |       x2 = p2.x - p0.x;
 372 |       y2 = p2.y - p0.y;
 373 |     
 374 |       return x1*x2 + y1*y2;
 375 |     }
 376 |       
 377 |     function iprod1(p0, p1, p2, p3) {
 378 |       var x1, y1, x2, y2;
 379 |     
 380 |       x1 = p1.x - p0.x;
 381 |       y1 = p1.y - p0.y;
 382 |       x2 = p3.x - p2.x;
 383 |       y2 = p3.y - p2.y;
 384 |     
 385 |       return x1 * x2 + y1 * y2;
 386 |     }
 387 |     
 388 |     function ddist(p, q) {
 389 |       return Math.sqrt((p.x - q.x) * (p.x - q.x) + (p.y - q.y) * (p.y - q.y));
 390 |     }
 391 |     
 392 |     function bezier(t, p0, p1, p2, p3) {
 393 |       var s = 1 - t, res = new Point();
 394 |     
 395 |       res.x = s*s*s*p0.x + 3*(s*s*t)*p1.x + 3*(t*t*s)*p2.x + t*t*t*p3.x;
 396 |       res.y = s*s*s*p0.y + 3*(s*s*t)*p1.y + 3*(t*t*s)*p2.y + t*t*t*p3.y;
 397 |     
 398 |       return res;
 399 |     }
 400 |   
 401 |     function tangent(p0, p1, p2, p3, q0, q1) {
 402 |       var A, B, C, a, b, c, d, s, r1, r2;
 403 |     
 404 |       A = cprod(p0, p1, q0, q1);
 405 |       B = cprod(p1, p2, q0, q1);
 406 |       C = cprod(p2, p3, q0, q1);
 407 |     
 408 |       a = A - 2 * B + C;
 409 |       b = -2 * A + 2 * B;
 410 |       c = A;
 411 |       
 412 |       d = b * b - 4 * a * c;
 413 |     
 414 |       if (a===0 || d<0) {
 415 |         return -1.0;
 416 |       }
 417 |     
 418 |       s = Math.sqrt(d);
 419 |     
 420 |       r1 = (-b + s) / (2 * a);
 421 |       r2 = (-b - s) / (2 * a);
 422 |     
 423 |       if (r1 >= 0 && r1 <= 1) {
 424 |         return r1;
 425 |       } else if (r2 >= 0 && r2 <= 1) {
 426 |         return r2;
 427 |       } else {
 428 |         return -1.0;
 429 |       }
 430 |     }
 431 |     
 432 |     function calcSums(path) {
 433 |       var i, x, y;
 434 |       path.x0 = path.pt[0].x;
 435 |       path.y0 = path.pt[0].y;
 436 |       
 437 |       path.sums = [];
 438 |       var s = path.sums;
 439 |       s.push(new Sum(0, 0, 0, 0, 0));
 440 |       for(i = 0; i < path.len; i++){
 441 |         x = path.pt[i].x - path.x0;
 442 |         y = path.pt[i].y - path.y0;
 443 |         s.push(new Sum(s[i].x + x, s[i].y + y, s[i].xy + x * y,
 444 |             s[i].x2 + x * x, s[i].y2 + y * y));
 445 |       }
 446 |     }
 447 |    
 448 |     function calcLon(path) {
 449 |       
 450 |       var n = path.len, pt = path.pt, dir,
 451 |         pivk = new Array(n),
 452 |         nc = new Array(n),
 453 |         ct = new Array(4);
 454 |       path.lon = new Array(n);
 455 |       
 456 |       var constraint = [new Point(), new Point()],
 457 |           cur = new Point(),
 458 |           off = new Point(),
 459 |           dk = new Point(),
 460 |           foundk;
 461 |       
 462 |       var i, j, k1, a, b, c, d, k = 0;
 463 |       for(i = n - 1; i >= 0; i--){
 464 |         if (pt[i].x != pt[k].x && pt[i].y != pt[k].y) {
 465 |           k = i + 1;
 466 |         }
 467 |         nc[i] = k;
 468 |       }
 469 |       
 470 |       for (i = n - 1; i >= 0; i--) {
 471 |         ct[0] = ct[1] = ct[2] = ct[3] = 0;
 472 |         dir = (3 + 3 * (pt[mod(i + 1, n)].x - pt[i].x) + 
 473 |             (pt[mod(i + 1, n)].y - pt[i].y)) / 2;
 474 |         ct[dir]++;
 475 |         
 476 |         constraint[0].x = 0;
 477 |         constraint[0].y = 0;
 478 |         constraint[1].x = 0;
 479 |         constraint[1].y = 0;
 480 |         
 481 |         k = nc[i];
 482 |         k1 = i;
 483 |         while (1) {
 484 |           foundk = 0;
 485 |           dir =  (3 + 3 * sign(pt[k].x - pt[k1].x) + 
 486 |               sign(pt[k].y - pt[k1].y)) / 2;
 487 |           ct[dir]++;
 488 |           
 489 |           if (ct[0] && ct[1] && ct[2] && ct[3]) {
 490 |             pivk[i] = k1;
 491 |             foundk = 1;
 492 |             break;
 493 |           }
 494 |           
 495 |           cur.x = pt[k].x - pt[i].x;
 496 |           cur.y = pt[k].y - pt[i].y;
 497 |           
 498 |           if (xprod(constraint[0], cur) < 0 || xprod(constraint[1], cur) > 0) {
 499 |             break;
 500 |           }
 501 |               
 502 |           if (Math.abs(cur.x) <= 1 && Math.abs(cur.y) <= 1) {
 503 |           
 504 |           } else {
 505 |             off.x = cur.x + ((cur.y >= 0 && (cur.y > 0 || cur.x < 0)) ? 1 : -1);
 506 |             off.y = cur.y + ((cur.x <= 0 && (cur.x < 0 || cur.y < 0)) ? 1 : -1);
 507 |             if (xprod(constraint[0], off) >= 0) {
 508 |               constraint[0].x = off.x;
 509 |               constraint[0].y = off.y;
 510 |             }
 511 |             off.x = cur.x + ((cur.y <= 0 && (cur.y < 0 || cur.x < 0)) ? 1 : -1);
 512 |             off.y = cur.y + ((cur.x >= 0 && (cur.x > 0 || cur.y < 0)) ? 1 : -1);
 513 |             if (xprod(constraint[1], off) <= 0) {
 514 |               constraint[1].x = off.x;
 515 |               constraint[1].y = off.y;
 516 |             }
 517 |           }
 518 |           k1 = k;
 519 |           k = nc[k1];
 520 |           if (!cyclic(k, i, k1)) {
 521 |             break;
 522 |           }
 523 |         }
 524 |         if (foundk === 0) {
 525 |           dk.x = sign(pt[k].x-pt[k1].x);
 526 |           dk.y = sign(pt[k].y-pt[k1].y);
 527 |           cur.x = pt[k1].x - pt[i].x;
 528 |           cur.y = pt[k1].y - pt[i].y;
 529 |   
 530 |           a = xprod(constraint[0], cur);
 531 |           b = xprod(constraint[0], dk);
 532 |           c = xprod(constraint[1], cur);
 533 |           d = xprod(constraint[1], dk);
 534 |   
 535 |           j = 10000000;
 536 |           if (b < 0) {
 537 |             j = Math.floor(a / -b);
 538 |           }
 539 |           if (d > 0) {
 540 |             j = Math.min(j, Math.floor(-c / d));
 541 |           }
 542 |           pivk[i] = mod(k1+j,n);
 543 |         }
 544 |       }
 545 |       
 546 |       j=pivk[n-1];
 547 |       path.lon[n-1]=j;
 548 |       for (i=n-2; i>=0; i--) {
 549 |         if (cyclic(i+1,pivk[i],j)) {
 550 |           j=pivk[i];
 551 |         }
 552 |         path.lon[i]=j;
 553 |       }
 554 |   
 555 |       for (i=n-1; cyclic(mod(i+1,n),j,path.lon[i]); i--) {
 556 |         path.lon[i] = j;
 557 |       }
 558 |     }
 559 |     
 560 |     function bestPolygon(path) {
 561 |       
 562 |       function penalty3(path, i, j) {
 563 |         
 564 |         var n = path.len, pt = path.pt, sums = path.sums;
 565 |         var x, y, xy, x2, y2,
 566 |           k, a, b, c, s,
 567 |           px, py, ex, ey,
 568 |           r = 0;
 569 |         if (j>=n) {
 570 |           j -= n;
 571 |           r = 1;
 572 |         }
 573 |         
 574 |         if (r === 0) {
 575 |           x = sums[j+1].x - sums[i].x;
 576 |           y = sums[j+1].y - sums[i].y;
 577 |           x2 = sums[j+1].x2 - sums[i].x2;
 578 |           xy = sums[j+1].xy - sums[i].xy;
 579 |           y2 = sums[j+1].y2 - sums[i].y2;
 580 |           k = j+1 - i;
 581 |         } else {
 582 |           x = sums[j+1].x - sums[i].x + sums[n].x;
 583 |           y = sums[j+1].y - sums[i].y + sums[n].y;
 584 |           x2 = sums[j+1].x2 - sums[i].x2 + sums[n].x2;
 585 |           xy = sums[j+1].xy - sums[i].xy + sums[n].xy;
 586 |           y2 = sums[j+1].y2 - sums[i].y2 + sums[n].y2;
 587 |           k = j+1 - i + n;
 588 |         } 
 589 |       
 590 |         px = (pt[i].x + pt[j].x) / 2.0 - pt[0].x;
 591 |         py = (pt[i].y + pt[j].y) / 2.0 - pt[0].y;
 592 |         ey = (pt[j].x - pt[i].x);
 593 |         ex = -(pt[j].y - pt[i].y);
 594 |       
 595 |         a = ((x2 - 2*x*px) / k + px*px);
 596 |         b = ((xy - x*py - y*px) / k + px*py);
 597 |         c = ((y2 - 2*y*py) / k + py*py);
 598 |         
 599 |         s = ex*ex*a + 2*ex*ey*b + ey*ey*c;
 600 |       
 601 |         return Math.sqrt(s);
 602 |       }
 603 |       
 604 |       var i, j, m, k,    
 605 |       n = path.len,
 606 |       pen = new Array(n + 1),
 607 |       prev = new Array(n + 1),
 608 |       clip0 = new Array(n),
 609 |       clip1 = new Array(n + 1),
 610 |       seg0 = new Array (n + 1),
 611 |       seg1 = new Array(n + 1),
 612 |       thispen, best, c;
 613 |       
 614 |       for (i=0; i<n; i++) {
 615 |         c = mod(path.lon[mod(i-1,n)]-1,n);
 616 |         if (c == i) {
 617 |           c = mod(i+1,n);
 618 |         }
 619 |         if (c < i) {
 620 |           clip0[i] = n;
 621 |         } else {
 622 |           clip0[i] = c;
 623 |         }
 624 |       }
 625 |       
 626 |       j = 1;
 627 |       for (i=0; i<n; i++) {
 628 |         while (j <= clip0[i]) {
 629 |           clip1[j] = i;
 630 |           j++;
 631 |         }
 632 |       }
 633 |       
 634 |       i = 0;
 635 |       for (j=0; i<n; j++) {
 636 |         seg0[j] = i;
 637 |         i = clip0[i];
 638 |       }
 639 |       seg0[j] = n;
 640 |       m = j;
 641 |     
 642 |       i = n;
 643 |       for (j=m; j>0; j--) {
 644 |         seg1[j] = i;
 645 |         i = clip1[i];
 646 |       }
 647 |       seg1[0] = 0;
 648 |       
 649 |       pen[0]=0;
 650 |       for (j=1; j<=m; j++) {
 651 |         for (i=seg1[j]; i<=seg0[j]; i++) {
 652 |           best = -1;
 653 |           for (k=seg0[j-1]; k>=clip1[i]; k--) {
 654 |             thispen = penalty3(path, k, i) + pen[k];
 655 |             if (best < 0 || thispen < best) {
 656 |               prev[i] = k;
 657 |               best = thispen;
 658 |             }
 659 |           }
 660 |           pen[i] = best;
 661 |         }
 662 |       }
 663 |       path.m = m;
 664 |       path.po = new Array(m);
 665 |     
 666 |       for (i=n, j=m-1; i>0; j--) {
 667 |         i = prev[i];
 668 |         path.po[j] = i;
 669 |       }
 670 |     }
 671 |     
 672 |     function adjustVertices(path) {
 673 |       
 674 |       function pointslope(path, i, j, ctr, dir) {
 675 |     
 676 |         var n = path.len, sums = path.sums,
 677 |           x, y, x2, xy, y2,
 678 |           k, a, b, c, lambda2, l, r=0;
 679 |       
 680 |         while (j>=n) {
 681 |           j-=n;
 682 |           r+=1;
 683 |         }
 684 |         while (i>=n) {
 685 |           i-=n;
 686 |           r-=1;
 687 |         }
 688 |         while (j<0) {
 689 |           j+=n;
 690 |           r-=1;
 691 |         }
 692 |         while (i<0) {
 693 |           i+=n;
 694 |           r+=1;
 695 |         }
 696 |         
 697 |         x = sums[j+1].x-sums[i].x+r*sums[n].x;
 698 |         y = sums[j+1].y-sums[i].y+r*sums[n].y;
 699 |         x2 = sums[j+1].x2-sums[i].x2+r*sums[n].x2;
 700 |         xy = sums[j+1].xy-sums[i].xy+r*sums[n].xy;
 701 |         y2 = sums[j+1].y2-sums[i].y2+r*sums[n].y2;
 702 |         k = j+1-i+r*n;
 703 |         
 704 |         ctr.x = x/k;
 705 |         ctr.y = y/k;
 706 |       
 707 |         a = (x2-x*x/k)/k;
 708 |         b = (xy-x*y/k)/k;
 709 |         c = (y2-y*y/k)/k;
 710 |         
 711 |         lambda2 = (a+c+Math.sqrt((a-c)*(a-c)+4*b*b))/2;
 712 |       
 713 |         a -= lambda2;
 714 |         c -= lambda2;
 715 |       
 716 |         if (Math.abs(a) >= Math.abs(c)) {
 717 |           l = Math.sqrt(a*a+b*b);
 718 |           if (l!==0) {
 719 |             dir.x = -b/l;
 720 |             dir.y = a/l;
 721 |           }
 722 |         } else {
 723 |           l = Math.sqrt(c*c+b*b);
 724 |           if (l!==0) {
 725 |             dir.x = -c/l;
 726 |             dir.y = b/l;
 727 |           }
 728 |         }
 729 |         if (l===0) {
 730 |           dir.x = dir.y = 0; 
 731 |         }
 732 |       }
 733 |       
 734 |       var m = path.m, po = path.po, n = path.len, pt = path.pt,
 735 |         x0 = path.x0, y0 = path.y0,
 736 |         ctr = new Array(m), dir = new Array(m),
 737 |         q = new Array(m),
 738 |         v = new Array(3), d, i, j, k, l,
 739 |         s = new Point();
 740 |       
 741 |       path.curve = new Curve(m);
 742 |   
 743 |       for (i=0; i<m; i++) {
 744 |         j = po[mod(i+1,m)];
 745 |         j = mod(j-po[i],n)+po[i];
 746 |         ctr[i] = new Point();
 747 |         dir[i] = new Point();
 748 |         pointslope(path, po[i], j, ctr[i], dir[i]);
 749 |       }
 750 |     
 751 |       for (i=0; i<m; i++) {
 752 |         q[i] = new Quad();
 753 |         d = dir[i].x * dir[i].x + dir[i].y * dir[i].y;
 754 |         if (d === 0.0) {
 755 |           for (j=0; j<3; j++) {
 756 |             for (k=0; k<3; k++) {
 757 |               q[i].data[j * 3 + k] = 0;
 758 |             }
 759 |           }
 760 |         } else {
 761 |           v[0] = dir[i].y;
 762 |           v[1] = -dir[i].x;
 763 |           v[2] = - v[1] * ctr[i].y - v[0] * ctr[i].x;
 764 |           for (l=0; l<3; l++) {
 765 |             for (k=0; k<3; k++) {
 766 |               q[i].data[l * 3 + k] = v[l] * v[k] / d;
 767 |             }
 768 |           }
 769 |         }
 770 |       }
 771 |      
 772 |       var Q, w, dx, dy, det, min, cand, xmin, ymin, z;
 773 |       for (i=0; i<m; i++) {
 774 |         Q = new Quad();
 775 |         w = new Point();
 776 |     
 777 |         s.x = pt[po[i]].x-x0;
 778 |         s.y = pt[po[i]].y-y0;
 779 |     
 780 |         j = mod(i-1,m);
 781 |         
 782 |         for (l=0; l<3; l++) {
 783 |           for (k=0; k<3; k++) {
 784 |             Q.data[l * 3 + k] = q[j].at(l, k) + q[i].at(l, k);
 785 |           }
 786 |         }
 787 |         
 788 |         while(1) {
 789 |           
 790 |           det = Q.at(0, 0)*Q.at(1, 1) - Q.at(0, 1)*Q.at(1, 0);
 791 |           if (det !== 0.0) {
 792 |             w.x = (-Q.at(0, 2)*Q.at(1, 1) + Q.at(1, 2)*Q.at(0, 1)) / det;
 793 |             w.y = ( Q.at(0, 2)*Q.at(1, 0) - Q.at(1, 2)*Q.at(0, 0)) / det;
 794 |             break;
 795 |           }
 796 |     
 797 |           if (Q.at(0, 0)>Q.at(1, 1)) {
 798 |             v[0] = -Q.at(0, 1);
 799 |             v[1] = Q.at(0, 0);
 800 |           } else if (Q.at(1, 1)) {
 801 |             v[0] = -Q.at(1, 1);
 802 |             v[1] = Q.at(1, 0);
 803 |           } else {
 804 |             v[0] = 1;
 805 |             v[1] = 0;
 806 |           }
 807 |           d = v[0] * v[0] + v[1] * v[1];
 808 |           v[2] = - v[1] * s.y - v[0] * s.x;
 809 |           for (l=0; l<3; l++) {
 810 |             for (k=0; k<3; k++) {
 811 |               Q.data[l * 3 + k] += v[l] * v[k] / d;
 812 |             }
 813 |           }
 814 |         }
 815 |         dx = Math.abs(w.x-s.x);
 816 |         dy = Math.abs(w.y-s.y);
 817 |         if (dx <= 0.5 && dy <= 0.5) {
 818 |           path.curve.vertex[i] = new Point(w.x+x0, w.y+y0);
 819 |           continue;
 820 |         }
 821 |     
 822 |         min = quadform(Q, s);
 823 |         xmin = s.x;
 824 |         ymin = s.y;
 825 |     
 826 |         if (Q.at(0, 0) !== 0.0) {
 827 |           for (z=0; z<2; z++) {
 828 |             w.y = s.y-0.5+z;
 829 |             w.x = - (Q.at(0, 1) * w.y + Q.at(0, 2)) / Q.at(0, 0);
 830 |             dx = Math.abs(w.x-s.x);
 831 |             cand = quadform(Q, w);
 832 |             if (dx <= 0.5 && cand < min) {
 833 |               min = cand;
 834 |               xmin = w.x;
 835 |               ymin = w.y;
 836 |             }
 837 |           }
 838 |         }
 839 |   
 840 |         if (Q.at(1, 1) !== 0.0) {
 841 |           for (z=0; z<2; z++) {
 842 |             w.x = s.x-0.5+z;
 843 |             w.y = - (Q.at(1, 0) * w.x + Q.at(1, 2)) / Q.at(1, 1);
 844 |             dy = Math.abs(w.y-s.y);
 845 |             cand = quadform(Q, w);
 846 |             if (dy <= 0.5 && cand < min) {
 847 |               min = cand;
 848 |               xmin = w.x;
 849 |               ymin = w.y;
 850 |             }
 851 |           }
 852 |         }
 853 |   
 854 |         for (l=0; l<2; l++) {
 855 |           for (k=0; k<2; k++) {
 856 |             w.x = s.x-0.5+l;
 857 |             w.y = s.y-0.5+k;
 858 |             cand = quadform(Q, w);
 859 |             if (cand < min) {
 860 |               min = cand;
 861 |               xmin = w.x;
 862 |               ymin = w.y;
 863 |             }
 864 |           }
 865 |         }
 866 |     
 867 |         path.curve.vertex[i] = new Point(xmin + x0, ymin + y0);
 868 |       }
 869 |     }
 870 |     
 871 |     function reverse(path) {
 872 |       var curve = path.curve, m = curve.n, v = curve.vertex, i, j, tmp;
 873 |     
 874 |       for (i=0, j=m-1; i<j; i++, j--) {
 875 |         tmp = v[i];
 876 |         v[i] = v[j];
 877 |         v[j] = tmp;
 878 |       }
 879 |     }
 880 |     
 881 |     function smooth(path) {
 882 |       var m = path.curve.n, curve = path.curve;
 883 | 
 884 |       var i, j, k, dd, denom, alpha,
 885 |         p2, p3, p4;
 886 |     
 887 |       for (i=0; i<m; i++) {
 888 |         j = mod(i+1, m);
 889 |         k = mod(i+2, m);
 890 |         p4 = interval(1/2.0, curve.vertex[k], curve.vertex[j]);
 891 |     
 892 |         denom = ddenom(curve.vertex[i], curve.vertex[k]);
 893 |         if (denom !== 0.0) {
 894 |           dd = dpara(curve.vertex[i], curve.vertex[j], curve.vertex[k]) / denom;
 895 |           dd = Math.abs(dd);
 896 |           alpha = dd>1 ? (1 - 1.0/dd) : 0;
 897 |           alpha = alpha / 0.75;
 898 |         } else {
 899 |           alpha = 4/3.0;
 900 |         }
 901 |         curve.alpha0[j] = alpha;
 902 |     
 903 |         if (alpha >= info.alphamax) { 
 904 |           curve.tag[j] = "CORNER";
 905 |           curve.c[3 * j + 1] = curve.vertex[j];
 906 |           curve.c[3 * j + 2] = p4;
 907 |         } else {
 908 |           if (alpha < 0.55) {
 909 |             alpha = 0.55;
 910 |           } else if (alpha > 1) {
 911 |             alpha = 1;
 912 |           }
 913 |           p2 = interval(0.5+0.5*alpha, curve.vertex[i], curve.vertex[j]);
 914 |           p3 = interval(0.5+0.5*alpha, curve.vertex[k], curve.vertex[j]);
 915 |           curve.tag[j] = "CURVE";
 916 |           curve.c[3 * j + 0] = p2;
 917 |           curve.c[3 * j + 1] = p3;
 918 |           curve.c[3 * j + 2] = p4;
 919 |         }
 920 |         curve.alpha[j] = alpha;  
 921 |         curve.beta[j] = 0.5;
 922 |       }
 923 |       curve.alphacurve = 1;
 924 |     }
 925 |     
 926 |     function optiCurve(path) {
 927 |       function Opti(){
 928 |         this.pen = 0;
 929 |         this.c = [new Point(), new Point()];
 930 |         this.t = 0;
 931 |         this.s = 0;
 932 |         this.alpha = 0;
 933 |       }
 934 |       
 935 |       function opti_penalty(path, i, j, res, opttolerance, convc, areac) {
 936 |         var m = path.curve.n, curve = path.curve, vertex = curve.vertex, 
 937 |           k, k1, k2, conv, i1,
 938 |           area, alpha, d, d1, d2,
 939 |           p0, p1, p2, p3, pt,
 940 |           A, R, A1, A2, A3, A4,
 941 |           s, t;
 942 |       
 943 |         if (i==j) {
 944 |           return 1;
 945 |         }
 946 |       
 947 |         k = i;
 948 |         i1 = mod(i+1, m);
 949 |         k1 = mod(k+1, m);
 950 |         conv = convc[k1];
 951 |         if (conv === 0) {
 952 |           return 1;
 953 |         }
 954 |         d = ddist(vertex[i], vertex[i1]);
 955 |         for (k=k1; k!=j; k=k1) {
 956 |           k1 = mod(k+1, m);
 957 |           k2 = mod(k+2, m);
 958 |           if (convc[k1] != conv) {
 959 |             return 1;
 960 |           }
 961 |           if (sign(cprod(vertex[i], vertex[i1], vertex[k1], vertex[k2])) !=
 962 |               conv) {
 963 |             return 1;
 964 |           }
 965 |           if (iprod1(vertex[i], vertex[i1], vertex[k1], vertex[k2]) <
 966 |               d * ddist(vertex[k1], vertex[k2]) * -0.999847695156) {
 967 |             return 1;
 968 |           }
 969 |         }
 970 |     
 971 |         p0 = curve.c[mod(i,m) * 3 + 2].copy();
 972 |         p1 = vertex[mod(i+1,m)].copy();
 973 |         p2 = vertex[mod(j,m)].copy();
 974 |         p3 = curve.c[mod(j,m) * 3 + 2].copy();
 975 |       
 976 |         area = areac[j] - areac[i];
 977 |         area -= dpara(vertex[0], curve.c[i * 3 + 2], curve.c[j * 3 + 2])/2;
 978 |         if (i>=j) {
 979 |           area += areac[m];
 980 |         }
 981 |       
 982 |         A1 = dpara(p0, p1, p2);
 983 |         A2 = dpara(p0, p1, p3);
 984 |         A3 = dpara(p0, p2, p3);
 985 |   
 986 |         A4 = A1+A3-A2;    
 987 |         
 988 |         if (A2 == A1) {
 989 |           return 1;
 990 |         }
 991 |       
 992 |         t = A3/(A3-A4);
 993 |         s = A2/(A2-A1);
 994 |         A = A2 * t / 2.0;
 995 |         
 996 |         if (A === 0.0) {
 997 |           return 1;
 998 |         }
 999 |       
1000 |         R = area / A;
1001 |         alpha = 2 - Math.sqrt(4 - R / 0.3);
1002 |       
1003 |         res.c[0] = interval(t * alpha, p0, p1);
1004 |         res.c[1] = interval(s * alpha, p3, p2);
1005 |         res.alpha = alpha;
1006 |         res.t = t;
1007 |         res.s = s;
1008 |       
1009 |         p1 = res.c[0].copy();
1010 |         p2 = res.c[1].copy(); 
1011 |       
1012 |         res.pen = 0;
1013 |       
1014 |         for (k=mod(i+1,m); k!=j; k=k1) {
1015 |           k1 = mod(k+1,m);
1016 |           t = tangent(p0, p1, p2, p3, vertex[k], vertex[k1]);
1017 |           if (t<-0.5) {
1018 |             return 1;
1019 |           }
1020 |           pt = bezier(t, p0, p1, p2, p3);
1021 |           d = ddist(vertex[k], vertex[k1]);
1022 |           if (d === 0.0) {
1023 |             return 1;
1024 |           }
1025 |           d1 = dpara(vertex[k], vertex[k1], pt) / d;
1026 |           if (Math.abs(d1) > opttolerance) {
1027 |             return 1;
1028 |           }
1029 |           if (iprod(vertex[k], vertex[k1], pt) < 0 ||
1030 |               iprod(vertex[k1], vertex[k], pt) < 0) {
1031 |             return 1;
1032 |           }
1033 |           res.pen += d1 * d1;
1034 |         }
1035 |       
1036 |         for (k=i; k!=j; k=k1) {
1037 |           k1 = mod(k+1,m);
1038 |           t = tangent(p0, p1, p2, p3, curve.c[k * 3 + 2], curve.c[k1 * 3 + 2]);
1039 |           if (t<-0.5) {
1040 |             return 1;
1041 |           }
1042 |           pt = bezier(t, p0, p1, p2, p3);
1043 |           d = ddist(curve.c[k * 3 + 2], curve.c[k1 * 3 + 2]);
1044 |           if (d === 0.0) {
1045 |             return 1;
1046 |           }
1047 |           d1 = dpara(curve.c[k * 3 + 2], curve.c[k1 * 3 + 2], pt) / d;
1048 |           d2 = dpara(curve.c[k * 3 + 2], curve.c[k1 * 3 + 2], vertex[k1]) / d;
1049 |           d2 *= 0.75 * curve.alpha[k1];
1050 |           if (d2 < 0) {
1051 |             d1 = -d1;
1052 |             d2 = -d2;
1053 |           }
1054 |           if (d1 < d2 - opttolerance) {
1055 |             return 1;
1056 |           }
1057 |           if (d1 < d2) {
1058 |             res.pen += (d1 - d2) * (d1 - d2);
1059 |           }
1060 |         }
1061 |       
1062 |         return 0;
1063 |       }
1064 |     
1065 |       var curve = path.curve, m = curve.n, vert = curve.vertex, 
1066 |         pt = new Array(m + 1),
1067 |         pen = new Array(m + 1),
1068 |         len = new Array(m + 1),
1069 |         opt = new Array(m + 1),
1070 |         om, i,j,r,
1071 |         o = new Opti(), p0,
1072 |         i1, area, alpha, ocurve,
1073 |         s, t;
1074 |       
1075 |       var convc = new Array(m), areac = new Array(m + 1);
1076 |       
1077 |       for (i=0; i<m; i++) {
1078 |         if (curve.tag[i] == "CURVE") {
1079 |           convc[i] = sign(dpara(vert[mod(i-1,m)], vert[i], vert[mod(i+1,m)]));
1080 |         } else {
1081 |           convc[i] = 0;
1082 |         }
1083 |       }
1084 |     
1085 |       area = 0.0;
1086 |       areac[0] = 0.0;
1087 |       p0 = curve.vertex[0];
1088 |       for (i=0; i<m; i++) {
1089 |         i1 = mod(i+1, m);
1090 |         if (curve.tag[i1] == "CURVE") {
1091 |           alpha = curve.alpha[i1];
1092 |           area += 0.3 * alpha * (4-alpha) *
1093 |               dpara(curve.c[i * 3 + 2], vert[i1], curve.c[i1 * 3 + 2])/2;
1094 |           area += dpara(p0, curve.c[i * 3 + 2], curve.c[i1 * 3 + 2])/2;
1095 |         }
1096 |         areac[i+1] = area;
1097 |       }
1098 |     
1099 |       pt[0] = -1;
1100 |       pen[0] = 0;
1101 |       len[0] = 0;
1102 |     
1103 |     
1104 |       for (j=1; j<=m; j++) {
1105 |         pt[j] = j-1;
1106 |         pen[j] = pen[j-1];
1107 |         len[j] = len[j-1]+1;
1108 |     
1109 |         for (i=j-2; i>=0; i--) {
1110 |           r = opti_penalty(path, i, mod(j,m), o, info.opttolerance, convc, 
1111 |               areac);
1112 |           if (r) {
1113 |             break;
1114 |           }
1115 |             if (len[j] > len[i]+1 ||
1116 |                 (len[j] == len[i]+1 && pen[j] > pen[i] + o.pen)) {
1117 |               pt[j] = i;
1118 |               pen[j] = pen[i] + o.pen;
1119 |               len[j] = len[i] + 1;
1120 |               opt[j] = o;
1121 |               o = new Opti();
1122 |             }
1123 |         }
1124 |       }
1125 |       om = len[m];
1126 |       ocurve = new Curve(om);
1127 |       s = new Array(om);
1128 |       t = new Array(om);
1129 |     
1130 |       j = m;
1131 |       for (i=om-1; i>=0; i--) {
1132 |         if (pt[j]==j-1) {
1133 |           ocurve.tag[i]     = curve.tag[mod(j,m)];
1134 |           ocurve.c[i * 3 + 0]    = curve.c[mod(j,m) * 3 + 0];
1135 |           ocurve.c[i * 3 + 1]    = curve.c[mod(j,m) * 3 + 1];
1136 |           ocurve.c[i * 3 + 2]    = curve.c[mod(j,m) * 3 + 2];
1137 |           ocurve.vertex[i]  = curve.vertex[mod(j,m)];
1138 |           ocurve.alpha[i]   = curve.alpha[mod(j,m)];
1139 |           ocurve.alpha0[i]  = curve.alpha0[mod(j,m)];
1140 |           ocurve.beta[i]    = curve.beta[mod(j,m)];
1141 |           s[i] = t[i] = 1.0;
1142 |         } else {
1143 |           ocurve.tag[i] = "CURVE";
1144 |           ocurve.c[i * 3 + 0] = opt[j].c[0];
1145 |           ocurve.c[i * 3 + 1] = opt[j].c[1];
1146 |           ocurve.c[i * 3 + 2] = curve.c[mod(j,m) * 3 + 2];
1147 |           ocurve.vertex[i] = interval(opt[j].s, curve.c[mod(j,m) * 3 + 2],
1148 |                                        vert[mod(j,m)]);
1149 |           ocurve.alpha[i] = opt[j].alpha;
1150 |           ocurve.alpha0[i] = opt[j].alpha;
1151 |           s[i] = opt[j].s;
1152 |           t[i] = opt[j].t;
1153 |         }
1154 |         j = pt[j];
1155 |       }
1156 |     
1157 |       for (i=0; i<om; i++) {
1158 |         i1 = mod(i+1,om);
1159 |         ocurve.beta[i] = s[i] / (s[i] + t[i1]);
1160 |       }
1161 |       ocurve.alphacurve = 1;
1162 |       path.curve = ocurve;
1163 |     }
1164 |     
1165 |     for (var i = 0; i < pathlist.length; i++) {
1166 |       var path = pathlist[i];
1167 |       calcSums(path);
1168 |       calcLon(path);
1169 |       bestPolygon(path);
1170 |       adjustVertices(path);
1171 |       
1172 |       if (path.sign === "-") {
1173 |         reverse(path);
1174 |       }
1175 |       
1176 |       smooth(path);
1177 |       
1178 |       if (info.optcurve) {
1179 |         optiCurve(path);
1180 |       }
1181 |     }
1182 |   
1183 |   }
1184 | 
1185 |   function process(c) {
1186 |     if (c) {
1187 |       callback = c;
1188 |     }
1189 |     if (!info.isReady) {
1190 |       setTimeout(process, 100);
1191 |       return;
1192 |     }
1193 |     bmToPathlist();
1194 |     processPath();
1195 |     callback();
1196 |     callback = null;
1197 |   }
1198 | 
1199 |   function clear() {
1200 |     bm = null;
1201 |     pathlist = [];
1202 |     callback = null;
1203 |     info.isReady = false;
1204 |   }
1205 |   
1206 |   function getSVG(size, opt_type) {
1207 |   
1208 |     function path(curve) {
1209 |     
1210 |       function bezier(i) {
1211 |         var b = 'C ' + (curve.c[i * 3 + 0].x * size).toFixed(3) + ' ' +
1212 |             (curve.c[i * 3 + 0].y * size).toFixed(3) + ',';
1213 |         b += (curve.c[i * 3 + 1].x * size).toFixed(3) + ' ' +
1214 |             (curve.c[i * 3 + 1].y * size).toFixed(3) + ',';
1215 |         b += (curve.c[i * 3 + 2].x * size).toFixed(3) + ' ' +
1216 |             (curve.c[i * 3 + 2].y * size).toFixed(3) + ' ';
1217 |         return b;
1218 |       }
1219 |     
1220 |       function segment(i) {
1221 |         var s = 'L ' + (curve.c[i * 3 + 1].x * size).toFixed(3) + ' ' +
1222 |             (curve.c[i * 3 + 1].y * size).toFixed(3) + ' ';
1223 |         s += (curve.c[i * 3 + 2].x * size).toFixed(3) + ' ' +
1224 |             (curve.c[i * 3 + 2].y * size).toFixed(3) + ' ';
1225 |         return s;
1226 |       }
1227 | 
1228 |       var n = curve.n, i;
1229 |       var p = 'M' + (curve.c[(n - 1) * 3 + 2].x * size).toFixed(3) +
1230 |           ' ' + (curve.c[(n - 1) * 3 + 2].y * size).toFixed(3) + ' ';
1231 |       for (i = 0; i < n; i++) {
1232 |         if (curve.tag[i] === "CURVE") {
1233 |           p += bezier(i);
1234 |         } else if (curve.tag[i] === "CORNER") {
1235 |           p += segment(i);
1236 |         }
1237 |       }
1238 |       //p += 
1239 |       return p;
1240 |     }
1241 | 
1242 |     var w = bm.w * size, h = bm.h * size,
1243 |       len = pathlist.length, c, i, strokec, fillc, fillrule;
1244 | 
1245 |     var svg = '<svg id="svg" version="1.1" width="' + w + '" height="' + h +
1246 |         '" xmlns="http://www.w3.org/2000/svg">';
1247 |     svg += '<path d="';
1248 |     for (i = 0; i < len; i++) {
1249 |       c = pathlist[i].curve;
1250 |       svg += path(c);
1251 |     }
1252 |     if (opt_type === "curve") {
1253 |       strokec = "black";
1254 |       fillc = "none";
1255 |       fillrule = '';
1256 |     } else {
1257 |       strokec = "none";
1258 |       fillc = "black";
1259 |       fillrule = ' fill-rule="evenodd"';
1260 |     }
1261 |     svg += '" stroke="' + strokec + '" fill="' + fillc + '"' + fillrule + '/></svg>';
1262 |     return svg;
1263 |   }
1264 |   
1265 |   return{
1266 |     loadImageFromFile: loadImageFromFile,
1267 |     loadImageFromUrl: loadImageFromUrl,
1268 |     setParameter: setParameter,
1269 |     process: process,
1270 |     getSVG: getSVG,
1271 |     img: imgElement
1272 |   };
1273 | };
1274 | 


--------------------------------------------------------------------------------