endpild-laman/components/logo/JP/JP-small.tsx

import { FC } from "react";
import { HasAnimation, joinClasses } from "@utils/common";
import { LogoSmallProps } from "@components/logo/logo.types";
import { motion } from "framer-motion";
import styles from "@components/logo/JP/JP-small.module.scss";
import { Forceful } from "@utils/anims";

export const LogoSmall_JP: FC<HasAnimation & LogoSmallProps> = ({dontAnimateChild, opacity}) => {
    return (
        <motion.svg
            fill="none"
            initial={{ opacity: 1 }}
            animate={{ opacity }}
            exit={{ opacity: 0 }}
            transition={{ duration: .5, ease: Forceful }}
            data-logo={""}
            viewBox="0 0 215 38"
            xmlns="http://www.w3.org/2000/svg"
            data-noanim={dontAnimateChild}
            className={joinClasses(styles.logo, "fh")}
        >
            <defs>
                <clipPath id={"cn-square__hide"}>
                    <rect x="187.956" y="10.4616" width="26.6" height="26.6"/>
                </clipPath>
            </defs>
            <path className={joinClasses(styles["arknights"], "_1")} d="M2.12245 9.41732L0.922455 8.21732C1.50187 7.94173 2.01044 7.53705 2.40914 7.03435C2.80784 6.53164 3.08606 5.94427 3.22245 5.31732C3.46405 4.57602 3.53247 3.78919 3.42245 3.01732H1.12245V1.51732H8.42245L9.42245 2.41732L6.22246 6.01732L4.92245 4.91732L6.92245 3.01732H5.02245C5.07149 4.45939 4.79818 5.89425 4.22245 7.21732C3.66764 8.07667 2.95509 8.82316 2.12245 9.41732Z"/>
            <path className={joinClasses(styles["arknights"], "_2")} d="M16.0565 5.91732H8.05646V4.41732H16.0565V5.91732Z"/>
            <path className={joinClasses(styles["arknights"], "_3")} d="M21.8565 3.81732H19.4565C18.8891 4.60564 18.2162 5.31225 17.4565 5.91732L16.3565 4.71732C17.6646 3.77501 18.6439 2.44588 19.1565 0.917318L20.6565 1.51732L20.2565 2.21732H22.8565L23.6565 3.01732C23.3958 4.60666 22.704 6.09401 21.6565 7.31732C20.6711 8.23257 19.516 8.946 18.2565 9.41732L17.2565 8.01732C17.2565 8.01732 21.1565 6.91732 21.8565 3.81732Z"/>
            <path className={joinClasses(styles["arknights"], "_4")} d="M31.8564 4.91732H28.7564C28.7564 5.95056 28.4794 7.03753 27.8745 7.91277C27.2898 8.6251 26.7143 9.18046 25.8564 9.51732L24.7564 8.21732C25.5258 7.96738 26.2157 7.51897 26.7564 6.91732C27.1629 6.34404 27.2188 5.61732 27.2564 4.91732H24.1564V3.31732H27.2564V1.31732H28.7564V3.31732H31.8564V4.91732Z"/>
            <path className={joinClasses(styles["arknights"], "_5")} d="M34.5565 5.61732C33.7458 6.18122 32.8735 6.65092 31.9564 7.01732L31.1564 5.61732C33.543 4.6678 35.6199 3.07556 37.1565 1.01732L38.3565 2.01732C37.7158 2.92921 36.9403 3.73845 36.0565 4.41732V9.21732H34.5565V5.61732Z"/>
            <g className={joinClasses(styles["arknights"], "_6")}>
                <path d="M40.5565 9.31732L39.5565 8.01732C40.9027 7.50803 42.1286 6.72484 43.1565 5.71732C44.3565 4.41732 44.3565 1.41732 44.3565 1.41732L46.0565 1.81732C45.9305 3.52546 45.4311 5.16554 44.423 6.58301C43.3565 7.72712 42.0343 8.70609 40.5565 9.31732Z"/>
                <path d="M43.3565 4.21732L41.8565 4.81732C41.8201 3.65906 41.3572 2.55505 40.5565 1.71732L42.0565 1.11732C42.797 1.99314 43.2508 3.07524 43.3565 4.21732Z"/>
                <path d="M41.2565 4.91732L39.7565 5.61732C39.7352 4.4263 39.2719 3.28572 38.4565 2.41732L39.9565 1.91732C40.7073 2.74755 41.1641 3.80175 41.2565 4.91732Z"/>
            </g>
            <path id={styles["chr1"]} className={"_1"} d="M26.7565 10.6616L22.4565 15.7616H16.3565V31.3616H26.7565V36.4616H0.856453V31.3616H11.2565V15.7616H0.856453V10.6616H26.7565Z"/>
            <g id={styles["chr2"]} className={"_2"}>
                <path id={styles["chr2-t"]} d="M28.2565 36.4616V30.6616L54.1565 22.96V28.7616L28.2565 36.4616Z"/>
                <path id={styles["chr2-b"]} d="M30.3565 17.1616V11.9616L44.2565 16.4616V21.5616L30.3565 17.1616Z"/>
            </g>
            <g id={styles["chr3"]} className={"_3"}>
                <path className={styles["main"]} d="M55.6564 10.4616H60.7565V18.6616L76.1565 23.5616V28.6616L60.7565 23.7616V36.4616H55.6564V10.4616Z"/>
                <path className={styles["sub-1"]} d="M63.9565 10.6616H69.2565V15.7616H63.9565V10.6616Z"/>
                <path className={styles["sub-2"]} d="M76.1564 15.7616H70.8564V10.6616H76.1564V15.7616Z"/>
            </g>
            <path id={styles["chr4"]} className={"_4"} d="M77.6565 10.4616H103.956C100.056 27.5616 90.1565 34.0616 83.7565 36.5616V29.3616C89.3812 26.5233 93.6837 21.6113 95.7565 15.6616H77.6565V10.4616Z"/>
            <path id={styles["chr5"]} className={"_5"} d="M110.546 21.4668L102.762 24.2656L102.753 18.4691L121.265 11.8482V17.6623L115.661 19.6672V34.1586H110.546V21.4668Z"/>
            <path id={styles["chr6"]} className={"_6"} d="M120.056 26.0616V20.9616H140.256L135.856 26.0616H120.056Z"/>
            <g id={styles["chr7"]} className={"_7"}>
                <path d="M143.656 10.4616H148.856V25.9616C148.856 25.9616 149.056 34.6616 137.456 36.2616V30.2616C137.456 30.2616 143.556 30.1616 143.556 24.1616C143.556 18.1616 143.656 10.4616 143.656 10.4616Z"/>
                <path d="M156.456 10.4616V29.9616C159.126 28.3887 161.468 26.3179 163.356 23.8616V29.8616C163.356 29.8616 160.656 35.1616 151.256 36.3616V34.0616V10.4616H156.456Z"/>
            </g>
            <g id={styles["chr8"]} className={"_8"}>
                <path className={styles["main"]} d="M165.148 10.4728H170.248V18.6728L185.648 23.5728V28.6728L170.248 23.7729V36.4729H165.148V10.4728Z"/>
                <path className={styles["sub-1"]} d="M173.448 10.6728H178.748V15.7728H173.448V10.6728Z"/>
                <path className={styles["sub-2"]} d="M185.648 15.7728H180.348V10.6728H185.648V15.7728Z"/>
            </g>
            <g id={styles["chr9"]} className={joinClasses("_9")}>
                <g clipPath={"url(#cn-square__hide)"}>
                    <rect id="cn-square" x="187.956" y="10.4616" width="26.6" height="26.6038"/>
                    <path className={styles["a"]} id="arknights-cn-char-1-1" d="M189.061 27.4385H189.477V26.3008H188.811V27.605H189.061V27.4385ZM189.061 26.5228H189.227V26.7448H189.061V26.5228ZM189.061 26.9668H189.227V27.1887H189.061V26.9668Z" data-inverse=""/>
                    <path className={styles["a"]} id="arknights-cn-char-1-2" d="M189.31 27.7992L189.532 27.9657C189.692 27.8079 189.799 27.6042 189.837 27.383H190.17V27.6605H189.893C189.933 27.7487 189.961 27.8421 189.976 27.938L190.337 27.8825C190.42 27.827 190.448 27.7715 190.448 27.6327V26.273H189.615V26.939C189.632 27.0961 189.614 27.255 189.561 27.4039C189.508 27.5528 189.422 27.6879 189.31 27.7992V27.7992ZM189.865 26.5228H190.17V26.6893H189.865V26.5228ZM189.865 26.939H190.17V27.1333H189.865V26.939Z" data-inverse=""/>
                    <path className={styles["a"]} id="arknights-cn-char-2" d="M190.892 27.7992H191.669V27.938H191.946V26.3008H190.614V27.938H190.892V27.7992ZM190.892 26.5783H191.669V26.9113H190.892V26.5783ZM190.892 27.1887H191.669V27.5495H190.892V27.1887Z" data-inverse=""/>
                    <path className={styles["a"]} id="arknights-cn-char-3" d="M192.085 27.7437C192.164 27.8041 192.23 27.8796 192.279 27.9657C192.421 27.8857 192.543 27.774 192.634 27.6392C192.726 27.5044 192.785 27.3502 192.807 27.1887H193.362C193.334 27.4662 193.306 27.6327 193.251 27.6605H192.834C192.895 27.7418 192.933 27.8374 192.945 27.938H193.251C193.344 27.9301 193.432 27.891 193.5 27.827C193.6 27.5804 193.647 27.3158 193.639 27.05V26.939H192.834C192.855 26.8764 192.865 26.8106 192.862 26.7448H193.806V26.4673H193.056L193.167 26.4118L193.029 26.162L192.779 26.273L192.862 26.4673H192.113V26.7448H192.557C192.582 26.9389 192.55 27.1361 192.467 27.3131C192.383 27.4901 192.251 27.6395 192.085 27.7437" data-inverse=""/>
                    <path className={styles["a"]} id="arknights-cn-char-4" d="M193.778 27.2442H194C193.994 27.3468 193.966 27.4469 193.918 27.5378C193.87 27.6288 193.804 27.7084 193.722 27.7715C193.813 27.8138 193.89 27.8812 193.944 27.9657C194.143 27.7761 194.262 27.5183 194.277 27.2442H194.971V27.6605H194.749C194.773 27.7451 194.8 27.8284 194.832 27.9102H195.138C195.221 27.8547 195.249 27.7992 195.249 27.6605V27.2442H195.471V26.9945H195.249V26.4118H194.694C194.741 26.3534 194.778 26.2878 194.805 26.2175H194.472C194.463 26.2937 194.444 26.3683 194.416 26.4395H194.028V26.9945H193.778V27.2442ZM194.971 26.6338V26.9945H194.694L194.832 26.8557L194.583 26.6338H194.971ZM194.305 26.9112V26.6338H194.555L194.388 26.7725L194.638 26.9945H194.305V26.9112ZM194.388 27.3275C194.502 27.3951 194.605 27.4793 194.694 27.5772L194.86 27.4107C194.768 27.3449 194.665 27.2978 194.555 27.272L194.388 27.3275Z" data-inverse=""/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-main-t" d="M191.974 29.9082H191.419L188.7 34.2872V35.1516L192.002 34.0983V33.8768L194.472 32.3779L197.274 34.2926V32.7941L195.526 31.6286L197.052 30.5742V29.0479H194.166L194.721 28.3265H193.167L191.974 29.9082Z" data-inverse=""/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-main-t-inner-l" d="M191.764 33.2779L190.674 33.2779L191.764 31.4742H192.013L192.69 30.804L193.734 31.7367L191.764 33.0244V33.2779Z"/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-main-t-inner-r" d="M194.704 30.9241L193.91 30.3539H195.499L194.704 30.9241Z"/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-main-b" d="M193.272 33.6597L192.241 34.3152L195.133 36.6017H197.188V34.9887L196.16 35.7027L193.272 33.6597Z" data-inverse=""/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-stroke-tl-1" d="M191.934 28.3265H190.28L188.728 30.8168V31.9061H189.758L191.934 28.3265Z" data-inverse=""/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-stroke-br-1" d="M194.527 32.7386L193.419 33.4821L196.026 35.347V33.7653L194.527 32.7386Z" data-inverse=""/>
                    <path className={styles["e1"]} id="endfield-cn-chr1-stroke-bl-1" d="M191.986 34.4896V35.6134L188.678 36.6672V35.5449L191.986 34.4896Z" data-inverse=""/>
                    <path className={styles["e2"]} id="endfield-cn-chr2" d="M197.047 29.0479H200.572V28.271H202.151V29.0479H205.677V30.3244H202.151V31.1291H204.871V32.4056H202.151V32.6553L205.62 35.0557V36.6651L202.151 34.1954V36.6462H200.572V34.226L197.187 36.6005V34.9887L200.572 32.6526V32.4028H197.853V31.1264H200.572V30.3216H197.047" data-inverse=""/>
                    <path className={styles["e2"]} id="patch-b" d="M197.33 34.8933L197.23 36.5627L197.187 36.594H197.145V35.0205L197.33 34.8933Z" data-inverse=""/>
                    <path className={styles["e2"]} id="patch-t" d="M196.963 29.0595H197.124V30.3201L196.963 30.3244V29.0595Z" data-inverse=""/>
                    <path className={styles["e3"]} id="endfield-cn-chr3-1" d="M208.429 30.2773H207.625V28.6595H206.182V30.2773H205.516V31.5603H206.182V33.9034L205.322 34.2102V36.0233L208.429 34.8796V33.0666L207.625 33.3734V31.5603H208.429V30.2773Z" data-inverse=""/>
                    <path className={styles["e3"]} id="endfield-cn-chr3-2" d="M207.93 31.5922V33.1132L208.651 32.8357V36.0269L209.9 36.6651H214.09V35.3609H210.122V32.2807L210.455 32.142V35.0557L211.898 34.4452V31.587L212.287 31.4483V34.3064L213.73 33.7237V29.3393L211.898 30.033V28.3403H210.455V30.588L210.122 30.7268V29.2561H208.651V31.2818L207.93 31.5922Z" data-inverse=""/>
                </g>
            </g>
        </motion.svg>
    );
};