src/components/SvgYacd.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import cx from 'clsx';
import * as React from 'react';

import s from './SvgYacd.module.scss';

type Props = {
  width?: number;
  height?: number;
  animate?: boolean;
  c0?: string;
  c1?: string;
  stroke?: string;
  eye?: string;
  mouth?: string;
};

function SvgYacd({
  width = 320,
  height = 320,
  animate = false,
  c0 = 'currentColor',
  stroke = '#eee',
  eye = '#eee',
  mouth = '#eee',
}: Props) {
  const faceClasName = cx({ [s.path]: animate });
  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 320 320"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g fill="none" fillRule="evenodd">
        {/* face */}
        <path
          d="M71.689 53.055c9.23-1.487 25.684 27.263 41.411 56.663 18.572-8.017 71.708-7.717 93.775 0 4.714-15.612 31.96-57.405 41.626-56.663 3.992.088 13.07 31.705 23.309 94.96 2.743 16.949 7.537 47.492 14.38 91.63-42.339 17.834-84.37 26.751-126.095 26.751-41.724 0-83.756-8.917-126.095-26.751C52.973 116.244 65.536 54.047 71.689 53.055z"
          stroke={stroke}
          strokeWidth="4"
          strokeLinecap="round"
          fill={c0}
          className={faceClasName}
        />
        <circle fill={eye} cx="216.5" cy="181.5" r="14.5" />
        <circle fill={eye} cx="104.5" cy="181.5" r="14.5" />
        {/* mouth */}
        <g stroke={mouth} strokeLinecap="round" strokeWidth="4">
          <path d="M175.568 218.694c-2.494 1.582-5.534 2.207-8.563 1.508-3.029-.7-5.487-2.594-7.035-5.11M143.981 218.694c2.494 1.582 5.534 2.207 8.563 1.508 3.03-.7 5.488-2.594 7.036-5.11" />
        </g>
      </g>
    </svg>
  );
}

export default SvgYacd;