@testpig/avataaars 1.0.0

package/src/avatar/top/ShortHairTheCaesarSidePart.tsx

@@ -0,0 +1,47 @@
+import { useId } from 'react'
+import FacialHair from './facialHair'
+import HairColor from './HairColor'
+
+const ShortHairTheCaesarSidePart = ({ children }) => {
+  const filter1 = useId()
+  const mask1 = useId()
+  const mask2 = useId()
+  const path1 = useId()
+  const path2 = useId()
+
+  return (
+    <g strokeWidth='1' fillRule='evenodd'>
+      <defs>
+        <rect id={path1} x='0' y='0' width='264' height='280'/>
+        <path id={path2}
+              d='M82.0179468,24.3784638 C74.9860629,23.6847351 66.6573358,23.2514721 58.3126144,23.245568 C39.0082164,23.2319099 19.618222,25.4833872 16,28 C6.29594493,35.2480719 2.53726005,62.445722 3,64 C2.67275588,65.2226722 1.34685629,65.488448 1,64 C0.280821545,53.7019177 1,1.72563718 58,1 C115,0.274362825 115.719178,53.7019177 115,64 C114.653144,65.488448 113.327244,65.2226722 113,64 C113.46274,62.445722 109.704055,35.2480719 100,28 C98.2407122,26.7763475 92.7526689,25.6101897 85.3587425,24.7390449 L89,16 L82.0179468,24.3784638 Z'/>
+        <filter x='-0.8%' y='-2.0%' width='101.5%' height='108.0%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0' type='matrix' in='shadowOffsetOuter1' result='shadowMatrixOuter1'/>
+          <feMerge>
+            <feMergeNode in='shadowMatrixOuter1'/>
+            <feMergeNode in='SourceGraphic'/>
+          </feMerge>
+        </filter>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path1}/>
+      </mask>
+      <g mask={`url(#${mask1})`}>
+        <g transform='translate(-1, 0)'>
+          <FacialHair/>
+          <g strokeWidth='1' fillRule='evenodd' transform='translate(75, 34)'>
+            <mask id={mask2} fill='white'>
+              <use xlinkHref={'#' + path2}/>
+            </mask>
+            <use fill='#28354B' xlinkHref={'#' + path2}/>
+            <HairColor maskID={mask2}/>
+          </g>
+          {children}
+        </g>
+      </g>
+    </g>
+  )
+}
+
+export default ShortHairTheCaesarSidePart

package/src/avatar/top/Top.tsx

@@ -0,0 +1,122 @@
+import { useContext } from 'react'
+import AvatarContext from '../AvatarContext'
+import Eyepatch from './Eyepatch'
+import Hat from './Hat'
+import Hijab from './Hijab'
+import LongHairBigHair from './LongHairBigHair'
+import LongHairBob from './LongHairBob'
+import LongHairBun from './LongHairBun'
+import LongHairCurly from './LongHairCurly'
+import LongHairCurvy from './LongHairCurvy'
+import LongHairDreads from './LongHairDreads'
+import LongHairFrida from './LongHairFrida'
+import LongHairFro from './LongHairFro'
+import LongHairFroBand from './LongHairFroBand'
+import LongHairMiaWallace from './LongHairMiaWallace'
+import LongHairNotTooLong from './LongHairNotTooLong'
+import LongHairShavedSides from './LongHairShavedSides'
+import LongHairStraight from './LongHairStraight'
+import LongHairStraight2 from './LongHairStraight2'
+import LongHairStraightStrand from './LongHairStraightStrand'
+import NoHair from './NoHair'
+import PrinceCut from './PrinceCut'
+import ShortHairDreads01 from './ShortHairDreads01'
+import ShortHairDreads02 from './ShortHairDreads02'
+import ShortHairFrizzle from './ShortHairFrizzle'
+import ShortHairShaggyMullet from './ShortHairShaggyMullet'
+import ShortHairShortCurly from './ShortHairShortCurly'
+import ShortHairShortFlat from './ShortHairShortFlat'
+import ShortHairShortRound from './ShortHairShortRound'
+import ShortHairShortWaved from './ShortHairShortWaved'
+import ShortHairSides from './ShortHairSides'
+import ShortHairTheCaesar from './ShortHairTheCaesar'
+import ShortHairTheCaesarSidePart from './ShortHairTheCaesarSidePart'
+import TopType from './TopType'
+import Turban from './Turban'
+import WinterHat1 from './WinterHat1'
+import WinterHat2 from './WinterHat2'
+import WinterHat3 from './WinterHat3'
+import WinterHat4 from './WinterHat4'
+
+const Top = ({ children }) => {
+  const type = useContext(AvatarContext).topType ?? TopType.LongHairStraight
+  switch (type) {
+    case TopType.NoHair:
+      return <NoHair>{children}</NoHair>
+    case TopType.Eyepatch:
+      return <Eyepatch/>
+    case TopType.Hat:
+      return <Hat>{children}</Hat>
+    case TopType.Hijab:
+      return <Hijab>{children}</Hijab>
+    case TopType.Turban:
+      return <Turban>{children}</Turban>
+    case TopType.WinterHat1:
+      return <WinterHat1>{children}</WinterHat1>
+    case TopType.WinterHat2:
+      return <WinterHat2>{children}</WinterHat2>
+    case TopType.WinterHat3:
+      return <WinterHat3>{children}</WinterHat3>
+    case TopType.WinterHat4:
+      return <WinterHat4>{children}</WinterHat4>
+    case TopType.LongHairBigHair:
+      return <LongHairBigHair>{children}</LongHairBigHair>
+    case TopType.LongHairBob:
+      return <LongHairBob>{children}</LongHairBob>
+    case TopType.LongHairBun:
+      return <LongHairBun>{children}</LongHairBun>
+    case TopType.LongHairCurly:
+      return <LongHairCurly>{children}</LongHairCurly>
+    case TopType.LongHairCurvy:
+      return <LongHairCurvy>{children}</LongHairCurvy>
+    case TopType.LongHairDreads:
+      return <LongHairDreads>{children}</LongHairDreads>
+    case TopType.LongHairFrida:
+      return <LongHairFrida>{children}</LongHairFrida>
+    case TopType.LongHairFro:
+      return <LongHairFro>{children}</LongHairFro>
+    case TopType.LongHairFroBand:
+      return <LongHairFroBand>{children}</LongHairFroBand>
+    case TopType.LongHairNotTooLong:
+      return <LongHairNotTooLong>{children}</LongHairNotTooLong>
+    case TopType.LongHairShavedSides:
+      return <LongHairShavedSides>{children}</LongHairShavedSides>
+    case TopType.LongHairMiaWallace:
+      return <LongHairMiaWallace>{children}</LongHairMiaWallace>
+    case TopType.LongHairStraight:
+      return <LongHairStraight>{children}</LongHairStraight>
+    case TopType.LongHairStraight2:
+      return <LongHairStraight2>{children}</LongHairStraight2>
+    case TopType.LongHairStraightStrand:
+      return <LongHairStraightStrand>{children}</LongHairStraightStrand>
+    case TopType.ShortHairDreads01:
+      return <ShortHairDreads01>{children}</ShortHairDreads01>
+    case TopType.ShortHairDreads02:
+      return <ShortHairDreads02>{children}</ShortHairDreads02>
+    case TopType.ShortHairFrizzle:
+      return <ShortHairFrizzle>{children}</ShortHairFrizzle>
+    /* XXX: broken, fix it later
+    case TopType.ShortHairShaggy:
+      return <ShortHairShaggy>{children}</ShortHairShaggy>*/
+    case TopType.ShortHairShaggyMullet:
+      return <ShortHairShaggyMullet>{children}</ShortHairShaggyMullet>
+    case TopType.ShortHairShortCurly:
+      return <ShortHairShortCurly>{children}</ShortHairShortCurly>
+    case TopType.ShortHairShortFlat:
+      return <ShortHairShortFlat>{children}</ShortHairShortFlat>
+    case TopType.ShortHairShortRound:
+      return <ShortHairShortRound>{children}</ShortHairShortRound>
+    case TopType.ShortHairShortWaved:
+      return <ShortHairShortWaved>{children}</ShortHairShortWaved>
+    case TopType.ShortHairSides:
+      return <ShortHairSides>{children}</ShortHairSides>
+    case TopType.ShortHairTheCaesar:
+      return <ShortHairTheCaesar>{children}</ShortHairTheCaesar>
+    case TopType.ShortHairTheCaesarSidePart:
+      return <ShortHairTheCaesarSidePart>{children}</ShortHairTheCaesarSidePart>
+    case TopType.PrinceCut:
+      return <PrinceCut>{children}</PrinceCut>
+  }
+}
+
+export default Top

package/src/avatar/top/TopType.ts

@@ -0,0 +1,40 @@
+enum TopType {
+  NoHair = 'NoHair',
+  Eyepatch = 'Eyepatch',
+  Hat = 'Hat',
+  Hijab = 'Hijab',
+  Turban = 'Turban',
+  WinterHat1 = 'WinterHat1',
+  WinterHat2 = 'WinterHat2',
+  WinterHat3 = 'WinterHat3',
+  WinterHat4 = 'WinterHat4',
+  LongHairBigHair = 'LongHairBigHair',
+  LongHairBob = 'LongHairBob',
+  LongHairBun = 'LongHairBun',
+  LongHairCurly = 'LongHairCurly',
+  LongHairCurvy = 'LongHairCurvy',
+  LongHairDreads = 'LongHairDreads',
+  LongHairFrida = 'LongHairFrida',
+  LongHairFro = 'LongHairFro',
+  LongHairFroBand = 'LongHairFroBand',
+  LongHairNotTooLong = 'LongHairNotTooLong',
+  LongHairShavedSides = 'LongHairShavedSides',
+  LongHairMiaWallace = 'LongHairMiaWallace',
+  LongHairStraight = 'LongHairStraight',
+  LongHairStraight2 = 'LongHairStraight2',
+  LongHairStraightStrand = 'LongHairStraightStrand',
+  ShortHairDreads01 = 'ShortHairDreads01',
+  ShortHairDreads02 = 'ShortHairDreads02',
+  ShortHairFrizzle = 'ShortHairFrizzle',
+  ShortHairShaggyMullet = 'ShortHairShaggyMullet',
+  ShortHairShortCurly = 'ShortHairShortCurly',
+  ShortHairShortFlat = 'ShortHairShortFlat',
+  ShortHairShortRound = 'ShortHairShortRound',
+  ShortHairShortWaved = 'ShortHairShortWaved',
+  ShortHairSides = 'ShortHairSides',
+  ShortHairTheCaesar = 'ShortHairTheCaesar',
+  ShortHairTheCaesarSidePart = 'ShortHairTheCaesarSidePart',
+  PrinceCut = 'PrinceCut'
+}
+
+export default TopType

package/src/avatar/top/Turban.tsx

@@ -0,0 +1,62 @@
+import { useId } from 'react'
+import FacialHair from './facialHair'
+import HatColor from './HatColor'
+
+const Turban = ({ children }) => {
+  const filter1 = useId()
+  const mask1 = useId()
+  const mask2 = useId()
+  const mask3 = useId()
+  const path1 = useId()
+  const path2 = useId()
+  const path3 = useId()
+
+  return (
+    <g strokeWidth='1' fillRule='evenodd'>
+      <defs>
+        <rect id={path1} x='0' y='0' width='264' height='280'/>
+        <path id={path2}
+              d='M156,180.610951 C173.530782,172.282984 186.048193,155.114792 187.791419,134.867187 C193.569129,134.002364 198,129.018625 198,123 L198,110 C198,104.054007 193.675427,99.1180731 188,98.1659169 L188,92 C188,61.072054 162.927946,36 132,36 C101.072054,36 76,61.072054 76,92 L76,92 L76,98.1659169 C70.3245733,99.1180731 66,104.054007 66,110 L66,123 C66,129.018625 70.4308707,134.002364 76.2085808,134.867187 C77.9518066,155.114792 90.4692178,172.282984 108,180.610951 L108,199 L104,199 L104,199 C64.235498,199 32,231.235498 32,271 L32,280 L232,280 L232,271 C232,231.235498 199.764502,199 160,199 L156,199 L156,180.610951 Z M0,5.68434189e-14 L264,5.68434189e-14 L264,280 L0,280 L0,5.68434189e-14 Z'/>
+        <path id={path3}
+              d='M83.9715543,55.8170792 C107.404232,69.414362 145.114919,82.1112884 139,138 C158.377483,132.360101 168.044149,116.801277 168,91.3235294 C167.918252,44.1482824 115.850571,6.80154462e-15 86,0 C85.3259486,0 84.6559706,0.0296343787 83.9916946,0.0880669528 C83.3328225,0.0296343217 82.6684563,0 82.0002187,0 C52.0737254,6.80154462e-15 0.0804892181,44.1482783 0.00021866091,91.3235294 C-0.0442202163,117.440393 9.62244645,132.999216 29.0002187,138 C22.8618971,82.1112789 60.5101967,69.4143577 83.9715662,55.8170722 Z'/>
+        <filter x='-0.8%' y='-2.0%' width='101.5%' height='108.0%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0' type='matrix' in='shadowOffsetOuter1' result='shadowMatrixOuter1'/>
+          <feMerge>
+            <feMergeNode in='shadowMatrixOuter1'/>
+            <feMergeNode in='SourceGraphic'/>
+          </feMerge>
+        </filter>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path1}/>
+      </mask>
+      <g mask={`url(#${mask1})`}>
+        <g transform='translate(-1, 0)'>
+          <FacialHair/>
+          <g strokeWidth='1' fillRule='evenodd' transform='translate(1, 0)'>
+            <mask id={mask2} fill='white'>
+              <use xlinkHref={'#' + path2}/>
+            </mask>
+          </g>
+          <g strokeWidth='1' fillRule='evenodd' transform='translate(1, 0)'>
+            <path fill='#EDECE3'
+                  d='M74.5304294,97.5 C73.529284,95.0905557 73,92.5798498 73,90 C73,71.7746033 99.4151998,57 132,57 C164.5848,57 191,71.7746033 191,90 C191,92.5798498 190.470716,95.0905557 189.469571,97.5 C183.398106,82.8878805 159.972341,72 132,72 C104.027659,72 80.6018941,82.8878805 74.5304294,97.5 Z'/>
+            <g transform='translate(48, 3)'>
+              <mask id={mask3} fill='white'>
+                <use xlinkHref={'#' + path3}/>
+              </mask>
+              <use fill='#124C74' xlinkHref={'#' + path3}/>
+              <HatColor maskID={mask3} defaultColor='Blue03'/>
+            </g>
+            <path fillOpacity='0.16' fill='#000000'
+                  d='M48.0110963,96.0123559 C48.3807929,121.112082 58.0438337,136.107963 77.0002187,141 C57.6224465,136.289117 47.9557798,121.632254 48.0002187,97.0294118 C48.0008313,96.6902213 48.0044682,96.351197 48.0110963,96.0123559 Z M152.645822,30.4681115 C153.39011,36.1953086 152.126202,42.8891982 148.000219,50.135763 C136.847465,71.5667661 76.561434,72.0039826 76.3339794,129.679698 C76.1051437,67.7612631 136.805324,67.3799133 148.000219,44.5441176 C150.669864,39.5668152 152.141299,34.8351296 152.645822,30.4681115 Z'/>
+          </g>
+          {children}
+        </g>
+      </g>
+    </g>
+  )
+}
+
+export default Turban

package/src/avatar/top/WinterHat1.tsx

@@ -0,0 +1,49 @@
+import { useId } from 'react'
+import FacialHair from './facialHair'
+import HatColor from './HatColor'
+
+const WinterHat1 = ({ children }) => {
+  const filter1 = useId()
+  const mask1 = useId()
+  const mask2 = useId()
+  const path1 = useId()
+  const path2 = useId()
+  const path3 = useId()
+
+  return (
+    <g>
+      <defs>
+        <rect id={path3} x='0' y='0' width='264' height='280'/>
+        <path id={path1}
+              d='M120,54 L20,54 L20,155 C20,160.522847 15.5228475,165 10,165 C4.4771525,165 6.76353751e-16,160.522847 0,155 L0,54 L0,44 C-2.9759565e-15,19.699471 19.699471,4.46393476e-15 44,0 L96,0 C120.300529,-4.46393476e-15 140,19.699471 140,44 L140,54 L140,155 C140,160.522847 135.522847,165 130,165 C124.477153,165 120,160.522847 120,155 L120,54 Z'/>
+        <filter x='-0.8%' y='-2.8%' width='101.7%' height='111.1%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0' type='matrix' in='shadowOffsetOuter1'/>
+        </filter>
+        <rect id={path2} x='74' y='50' width='118' height='36' rx='8'/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path3}/>
+      </mask>
+      <g transform='translate(-1, 0)'>
+        <g strokeWidth='1' fillRule='evenodd' transform='translate(63, 20)'>
+          <path fill='#F4F4F4'
+                d='M1,48 L23.6714286,48 L23.6714286,153.664286 C23.6714286,159.924828 18.5962564,165 12.3357143,165 C6.07517216,165 1,159.924828 1,153.664286 L1,48 Z M116.328571,48 L139,48 L139,153.664286 C139,159.924828 133.924828,165 127.664286,165 C121.403744,165 116.328571,159.924828 116.328571,153.664286 L116.328571,48 Z'/>
+          <mask id={mask2} fill='white'>
+            <use xlinkHref={'#' + path1}/>
+          </mask>
+          <use fill='#D8D8D8' xlinkHref={'#' + path1}/>
+          <HatColor maskID={mask2} defaultColor='Red'/>
+        </g>
+        <g>
+          <use fill='black' fillOpacity='1' filter={`url(#${path2})`} xlinkHref={'#' + path2}/>
+          <use fill='#F4F4F4' fillRule='evenodd' xlinkHref={'#' + path2}/>
+        </g>
+        <FacialHair/>
+        {children}
+      </g>
+    </g>
+  )
+}
+
+export default WinterHat1

package/src/avatar/top/WinterHat2.tsx

@@ -0,0 +1,61 @@
+import { useId } from 'react'
+import FacialHair from './facialHair'
+import HatColor from './HatColor'
+
+const WinterHat2 = ({ children }) => {
+  const mask1 = useId()
+  const mask2 = useId()
+  const path1 = useId()
+  const path2 = useId()
+  const path3 = useId()
+
+  return (
+    <g>
+      <defs>
+        <rect id={path3} x='0' y='0' width='264' height='280'/>
+        <path id={path1}
+              d='M72,21 C126.772655,21 144,68.8032255 144,103.04488 L144,176.910255 C144,196.404852 121.366901,196.446757 121.366901,165.988782 L121.366901,86.5347425 C121.366901,80.4596103 117.635097,77.5347425 111.551408,77.5347425 L72,77.5347425 L32.4485915,77.5347425 C26.3649028,77.5347425 22.6330986,80.4596103 22.6330986,86.5347425 L22.6330986,165.988782 C22.6330986,196.446757 -1.41137102e-14,196.404852 0,176.910255 L0,103.04488 C-7.11930515e-15,68.8032255 17.2273451,21 72,21 Z'/>
+        <path
+          d='M101.428403,98.1685688 C98.9148372,100.462621 96.23722,101.494309 92.8529444,100.772863 C92.2705777,100.648833 89.8963391,96.2345713 83.9998344,96.2345713 C78.1033297,96.2345713 75.7294253,100.648833 75.1467245,100.772863 C71.7624488,101.494309 69.0848316,100.462621 66.5712661,98.1685688 C61.8461772,93.855604 57.9166219,87.9081858 60.2778299,81.4191814 C61.5083844,78.0369425 63.5097479,74.3237342 67.1506257,73.2459109 C71.0384163,72.0955419 76.4968931,73.2439051 80.4147542,72.4582708 C81.6840664,72.2035248 83.0706538,71.7508657 83.9998344,71 C84.929015,71.7508657 86.3159365,72.2035248 87.5845805,72.4582708 C91.5027758,73.2439051 96.9612525,72.0955419 100.849043,73.2459109 C104.489921,74.3237342 106.491284,78.0369425 107.722173,81.4191814 C110.083381,87.9081858 106.153826,93.855604 101.428403,98.1685688 M140.081033,26 C136.670693,34.4002532 137.987774,44.8580348 137.356666,53.6758724 C136.844038,60.8431942 135.33712,71.5857526 128.972858,76.214531 C125.718361,78.5816138 119.79436,82.5598986 115.54187,81.4501943 C112.614539,80.6863848 112.302182,72.290096 108.455284,69.1469801 C104.09172,65.5823153 98.6429854,64.0160432 93.1491481,64.2578722 C90.7785381,64.3622683 85.9841367,64.3374908 83.9999331,66.1604584 C82.0157295,64.3374908 77.2216647,64.3622683 74.8510547,64.2578722 C69.3568808,64.0160432 63.9081467,65.5823153 59.5445817,69.1469801 C55.6976839,72.290096 55.3856641,80.6863848 52.4583326,81.4501943 C48.2058427,82.5598986 42.2818421,78.5816138 39.0270077,76.214531 C32.6624096,71.5857526 31.1561652,60.8431942 30.642864,53.6758724 C30.0120926,44.8580348 31.3291729,34.4002532 27.9188335,26 C26.2597768,26 27.3540339,42.1288693 27.3540339,42.1288693 L27.3540339,62.4851205 C27.3856735,77.7732046 36.935095,100.655445 58.1080116,109.393004 C63.2861266,111.52982 75.0153111,115 83.9999331,115 C92.9845551,115 104.71374,111.860188 109.891855,109.723371 C131.064771,100.985813 140.614193,77.7732046 140.646169,62.4851205 L140.646169,42.1288693 C140.646169,42.1288693 141.740089,26 140.081033,26'
+          id={path2}/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path3}/>
+      </mask>
+      <g transform='translate(-1, 0)'>
+        <g strokeWidth='1' fillRule='evenodd' transform='translate(61, 0)'>
+          <g transform='translate(0, 176)' fill='#F4F4F4'>
+            <circle cx='9' cy='65' r='9'/>
+            <rect x='8' y='0' width='2' height='58'/>
+          </g>
+          <g transform='translate(126, 168)' fill='#F4F4F4'>
+            <circle cx='9' cy='65' r='9'/>
+            <rect x='8' y='0' width='2' height='58'/>
+          </g>
+          <circle fill='#F4F4F4' cx='72' cy='20' r='20'/>
+          <mask id={mask2} fill='white'>
+            <use xlinkHref={'#' + path1}/>
+          </mask>
+          <use fill='#F4F4F4' xlinkHref={'#' + path1}/>
+          <HatColor maskID={mask2} defaultColor='Blue01'/>
+          <rect fillOpacity='0.2' fill='#000000' x='-1' y='21' width='146' height='46' mask={`url(#${mask2})`}/>
+          <g transform='translate(29, 32)' fill='#FFFFFF' fillOpacity='0.5'>
+            <polygon transform='translate(12.500000, 9) rotate(180) translate(-12.500000, -9)' points='12.5 0 25 18 0 18'/>
+            <polygon transform='translate(43.500000, 9) rotate(180) translate(-43.500000, -9)' points='43.5 0 56 18 31 18'/>
+            <polygon transform='translate(74.500000, 9) rotate(180) translate(-74.500000, -9)' points='74.5 0 87 18 62 18'/>
+          </g>
+          <g transform='translate(13, 41)' fill='#000000' fillOpacity='0.5'>
+            <polygon points='12.5 0 25 18 0 18'/>
+            <polygon points='43.5 0 56 18 31 18'/>
+            <polygon points='74.5 0 87 18 62 18'/>
+            <polygon points='105.5 0 118 18 93 18'/>
+          </g>
+        </g>
+        <FacialHair/>
+        {children}
+      </g>
+    </g>
+  )
+}
+
+export default WinterHat2

package/src/avatar/top/WinterHat3.tsx

@@ -0,0 +1,49 @@
+import { useId } from 'react'
+import FacialHair from './facialHair'
+import HatColor from './HatColor'
+
+const WinterHat3 = ({ children }) => {
+  const filter1 = useId()
+  const mask1 = useId()
+  const mask2 = useId()
+  const path1 = useId()
+  const path2 = useId()
+  const path3 = useId()
+
+  return (
+    <g>
+      <defs>
+        <rect id={path3} x='0' y='0' width='264' height='280'/>
+        <path id={path1}
+              d='M66,0 L66,0 C102.450793,-6.69590214e-15 132,29.5492065 132,66 L132,71 L0,71 L0,66 C-4.46393476e-15,29.5492065 29.5492065,6.69590214e-15 66,0 Z'/>
+        <filter x='-0.7%' y='-1.7%' width='101.4%' height='106.8%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0' type='matrix' in='shadowOffsetOuter1'/>
+        </filter>
+        <path id={path2}
+              d='M67.2846026,61.4514246 C83.229708,49.8171415 105.159178,44 133.073012,44 C160.985408,44 182.871592,49.8165424 198.731564,61.4496271 L198.731562,61.4496305 C200.786183,62.956669 202.000006,65.3523289 202.000006,67.900394 L202.000004,98.3697692 C202.000004,100.578907 200.209144,102.369768 198.000006,102.369768 C197.244444,102.369768 196.504332,102.155773 195.865355,101.752558 C179.223261,91.2508526 158.536251,86 133.804323,86 C108.883259,86 87.640395,91.3314713 70.0757313,101.994414 L70.0757317,101.994414 C68.1873241,103.140806 65.7271332,102.539283 64.5807417,100.650875 C64.2008775,100.02514 64.0000054,99.3071624 64.0000054,98.5751499 L64,67.914014 C64,65.358892 65.2205159,62.9574773 67.2846026,61.4514246 Z'/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path3}/>
+      </mask>
+      <g transform='translate(-1, 0)'>
+        <g strokeWidth='1' fillRule='evenodd' transform='translate(67, 12)'>
+          <circle fill='#F4F4F4' cx='66' cy='8' r='20'/>
+          <mask id={mask2} fill='white'>
+            <use xlinkHref={'#' + path1}/>
+          </mask>
+          <use fill='#D8D8D8' xlinkHref={'#' + path1}/>
+          <HatColor maskID={mask2} defaultColor='Red'/>
+        </g>
+        <g>
+          <use fill='black' fillOpacity='1' filter={`url(#${path2})`} xlinkHref={'#' + path2}/>
+          <use fill='#F4F4F4' fillRule='evenodd' xlinkHref={'#' + path2}/>
+        </g>
+        <FacialHair/>
+        {children}
+      </g>
+    </g>
+  )
+}
+
+export default WinterHat3

package/src/avatar/top/WinterHat4.tsx

@@ -0,0 +1,64 @@
+import { useId } from 'react'
+import FacialHair from './facialHair'
+import HatColor from './HatColor'
+
+const WinterHat4 = ({ children }) => {
+  const filter1 = useId()
+  const mask1 = useId()
+  const mask2 = useId()
+  const mask3 = useId()
+  const mask4 = useId()
+  const path1 = useId()
+  const path2 = useId()
+  const path3 = useId()
+  const path4 = useId()
+  const path5 = useId()
+
+  return (
+    <g>
+      <defs>
+        <rect id={path5} x='0' y='0' width='264' height='280'/>
+        <path id={path1}
+              d='M129.659138,38.3566287 C132.459581,45.3577056 134,52.9989608 134,61 L134,69 L2,69 L2,61 C2,52.9748603 3.54971254,45.3116754 6.36620203,38.2933809 C-0.0371821146,24.8304767 -1.28053094,13.7727805 2.63615554,5.12029235 C10.141056,2.84355825 18.8342301,4.64979084 28.7156778,10.5389901 C38.4862647,3.88774159 50.289117,-4.77047603e-15 63,-7.10542736e-15 L73,-7.10542736e-15 C85.7221104,-9.44244112e-15 97.5345852,3.89461262 107.310208,10.5566215 C117.203883,4.65339747 125.906912,2.84128775 133.419297,5.12029235 C137.342115,13.7863263 136.088729,24.8651051 129.659138,38.3566287 Z'/>
+        <path id={path2}
+              d='M28.7156857,10.5389848 C18.758718,17.3171083 10.9122881,26.9651756 6.36620203,38.2933809 C-0.0371821146,24.8304767 -1.28053094,13.7727805 2.63615554,5.12029235 C10.1410556,2.84355836 18.8342292,4.64979066 28.7156763,10.5389892 Z M129.659138,38.3566287 C125.120833,27.0109143 117.273404,17.34646 107.310208,10.5566215 C117.203883,4.65339747 125.906912,2.84128775 133.419297,5.12029235 C137.342115,13.7863263 136.088729,24.8651051 129.659138,38.3566287 Z'/>
+        <path id={path3}
+              d='M21.8615933,15.9591438 C17.3889306,20.0465694 13.5271638,24.7913314 10.4291788,30.040544 C7.50356643,21.9322189 7.00287124,16.3214118 8.92709323,13.2081228 C11.5782173,12.0615989 15.8897174,12.9786059 21.8615933,15.9591438 Z M125.352616,29.6737564 C122.278044,24.5465519 118.471613,19.9084198 114.077736,15.903773 C119.880509,13.0520429 124.083178,12.1889392 126.68574,13.3144617 C128.572308,16.3668294 128.127934,21.8199276 125.352616,29.6737564 Z'/>
+        <filter x='-0.7%' y='-1.7%' width='101.4%' height='106.8%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0' type='matrix' in='shadowOffsetOuter1'/>
+        </filter>
+        <path id={path4}
+              d='M67.2846026,61.4514246 C83.229708,49.8171415 105.159178,44 133.073012,44 C160.985408,44 182.871592,49.8165424 198.731564,61.4496271 L198.731562,61.4496305 C200.786183,62.956669 202.000006,65.3523289 202.000006,67.900394 L202.000004,98.3697692 C202.000004,100.578907 200.209144,102.369768 198.000006,102.369768 C197.244444,102.369768 196.504332,102.155773 195.865355,101.752558 C179.223261,91.2508526 158.536251,86 133.804323,86 C108.883259,86 87.640395,91.3314713 70.0757313,101.994414 L70.0757317,101.994414 C68.1873241,103.140806 65.7271332,102.539283 64.5807417,100.650875 C64.2008775,100.02514 64.0000054,99.3071624 64.0000054,98.5751499 L64,67.914014 C64,65.358892 65.2205159,62.9574773 67.2846026,61.4514246 Z'/>
+      </defs>
+      <mask id={mask1} fill='white'>
+        <use xlinkHref={'#' + path5}/>
+      </mask>
+      <g transform='translate(-1, 0)'>
+        <g strokeWidth='1' fillRule='evenodd' transform='translate(65, 4)'>
+          <mask id={mask2} fill='white'>
+            <use xlinkHref={'#' + path1}/>
+          </mask>
+          <use fill='#D8D8D8' xlinkHref={'#' + path1}/>
+          <HatColor maskID={mask2} defaultColor='Red'/>
+          <mask id={mask3} fill='white'>
+            <use xlinkHref={'#' + path2}/>
+          </mask>
+          <use fillOpacity='0.24' fill='#000000' xlinkHref={'#' + path2}/>
+          <mask id={mask4} fill='white'>
+            <use xlinkHref={'#' + path3}/>
+          </mask>
+          <use fillOpacity='0.300000012' fill='#FFFFFF' xlinkHref={'#' + path3}/>
+        </g>
+        <g>
+          <use fill='black' fillOpacity='1' filter={`url(#${path4})`} xlinkHref={'#' + path4}/>
+          <use fill='#F4F4F4' fillRule='evenodd' xlinkHref={'#' + path4}/>
+        </g>
+        <FacialHair/>
+        {children}
+      </g>
+    </g>
+  )
+}
+
+export default WinterHat4

package/src/avatar/top/accessories/AccessoriesType.ts

@@ -0,0 +1,11 @@
+enum AccessoriesType {
+  Blank = 'Blank',
+  Prescription01 = 'Prescription01',
+  Prescription02 = 'Prescription02',
+  Round = 'Round',
+  Sunglasses = 'Sunglasses',
+  Wayfarers = 'Wayfarers',
+  Kurt = 'Kurt'
+}
+
+export default AccessoriesType

package/src/avatar/top/accessories/Accessory.tsx

@@ -0,0 +1,29 @@
+import Kurt from './Kurt'
+import Prescription01 from './Prescription01'
+import Prescription02 from './Prescription02'
+import Round from './Round'
+import Sunglasses from './Sunglasses'
+import Wayfarers from './Wayfarers'
+import { useContext } from 'react'
+import AvatarContext from '../../AvatarContext'
+import AccessoriesType from './AccessoriesType'
+
+export default function Accessory () {
+  const type = useContext(AvatarContext).accessoriesType
+  switch (type) {
+    case AccessoriesType.Kurt:
+      return <Kurt/>
+    case AccessoriesType.Prescription01:
+      return <Prescription01/>
+    case AccessoriesType.Prescription02:
+      return <Prescription02/>
+    case AccessoriesType.Round:
+      return <Round/>
+    case AccessoriesType.Sunglasses:
+      return <Sunglasses/>
+    case AccessoriesType.Wayfarers:
+      return <Wayfarers/>
+    default:
+      return null
+  }
+}

package/src/avatar/top/accessories/Kurt.tsx

@@ -0,0 +1,28 @@
+import { useId } from 'react'
+
+export default function Kurt () {
+  const filter1 = useId()
+
+  return (
+    <g fill='none' transform='translate(62, 85)' strokeWidth='1'>
+      <defs>
+        <filter x='-0.8%' y='-2.0%' width='101.5%' height='108.0%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0' type='matrix' in='shadowOffsetOuter1' result='shadowMatrixOuter1'/>
+          <feMerge>
+            <feMergeNode in='shadowMatrixOuter1'/>
+            <feMergeNode in='SourceGraphic'/>
+          </feMerge>
+        </filter>
+      </defs>
+      <g filter={`url(#${filter1})`} transform='translate(5, 2)'>
+        <path fill='#F4F4F4' fillRule='nonzero'
+              d='M66,11.1111111 C54.9625586,11.1111111 53.3705645,2.0266011 30.6705882,0.740740741 C7.98552275,-0.283199952 0.815225204,6.4494855 0.776470588,11.1111111 C0.813236892,15.4042795 -0.352293566,26.5612661 14.3647059,39.6296296 C29.1367705,55.1420807 44.2704162,49.8818301 49.6941176,44.8148148 C55.1352081,42.4731118 61.3403442,21.4596351 66,21.4814815 C70.6596558,21.5033279 76.8647919,42.4731118 82.3058824,44.8148148 C87.7295838,49.8818301 102.86323,55.1420807 117.635294,39.6296296 C132.352294,26.5612661 131.186763,15.4042795 131.223529,11.1111111 C131.184775,6.4494855 124.014477,-0.283199952 101.329412,0.740740741 C78.6294355,2.0266011 77.0374414,11.1111111 66,11.1111111 Z'/>
+        <path fill='#2F383B' fillRule='nonzero'
+              d='M55.1294118,21.4814815 C55.5103632,13.8233491 42.2156493,5.64243259 27.9529412,5.92592593 C13.6973442,6.22450879 11.8417942,15.3786982 11.6470588,18.8888889 C11.2982286,27.0220633 20.014463,45.3037598 36.1058824,44.8148148 C52.1972736,44.305848 54.9092435,26.5344305 55.1294118,21.4814815 Z'/>
+        <path fill='#2F383B' fillRule='nonzero' transform='translate(98.611765, 25.370370) scale(-1, 1) translate(-98.611765, -25.370370)'
+              d='M120.352941,21.4814815 C120.733893,13.8233491 107.439179,5.64243259 93.1764706,5.92592593 C78.9208736,6.22450879 77.0653236,15.3786982 76.8705882,18.8888889 C76.521758,27.0220633 85.2379924,45.3037598 101.329412,44.8148148 C117.420803,44.305848 120.132773,26.5344305 120.352941,21.4814815 Z'/>
+      </g>
+    </g>
+  )
+}

package/src/avatar/top/accessories/Prescription01.tsx

@@ -0,0 +1,32 @@
+import { useId } from 'react'
+
+export default function Prescription01 () {
+  const filter1 = useId()
+
+  return (
+    <g fill='none' transform='translate(62, 85)' strokeWidth='1'>
+      <defs>
+        <filter x='-0.8%' y='-2.4%' width='101.5%' height='109.8%' filterUnits='objectBoundingBox' id={filter1}>
+          <feOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/>
+          <feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0' type='matrix' in='shadowOffsetOuter1' result='shadowMatrixOuter1'/>
+          <feMerge>
+            <feMergeNode in='shadowMatrixOuter1'/>
+            <feMergeNode in='SourceGraphic'/>
+          </feMerge>
+        </filter>
+      </defs>
+      <g filter={`url(#${filter1})`} transform='translate(8, 8)' fill='#D6EAF2'>
+        <path
+          d='M46.2491397,7.27516667 C48.6207695,7.2975 49.7419096,7.69183333 50.1459601,10.1651667 C50.5553446,12.6705 50.1572949,15.4871667 49.6852359,17.9548333 C48.9648125,21.7228333 47.7666627,25.4145 44.9776475,28.1685 C43.5084639,29.6188333 41.7165732,30.7748333 39.8106684,31.5641667 C38.7985419,31.9835 37.7297416,32.2861667 36.6612747,32.5158333 C36.3489024,32.5828333 33.6822357,32.9501667 35.3177735,32.7635 C31.5009631,33.1991667 27.3601122,33.1818333 24.1723805,30.7525 C20.6396056,28.0601667 18.2203032,23.7998333 17.1565036,19.5561667 C16.5340925,17.0731667 15.2262624,11.1345 17.6158944,9.14916667 C20.3532365,6.8745 46.2491397,7.27516667 46.2491397,7.27516667 L46.2491397,7.27516667 Z M22.2178029,0.4905 C16.7774562,0.677833333 13.1466691,1.63383333 10.4633337,7.06916667 C5.54571911,17.0301667 13.9627711,31.9688333 23.352278,36.0395 C34.3293166,40.7991667 46.5921826,35.5318333 52.3955746,26.0058333 C55.4689587,20.9621667 57.0224862,13.3231667 56.9224737,7.50383333 C56.7951245,0.0765 51.6071427,-0.1295 45.5090472,0.0338333333 L22.2178029,0.4905 Z'/>
+        <path
+          d='M79.6805515,7.27256667 C77.3089217,7.29523333 76.1877816,7.68923333 75.7837311,10.1625667 C75.3743466,12.6679 75.7723963,15.4845667 76.244122,17.9522333 C76.9648787,21.7202333 78.1630285,25.4119 80.9520437,28.1659 C82.4212273,29.6162333 84.213118,30.7722333 86.1190228,31.5619 C87.1311493,31.9809 88.1999496,32.2835667 89.2684165,32.5132333 C89.5807888,32.5802333 92.2471221,32.9479 90.6119177,32.7609 C94.4287281,33.1965667 98.569579,33.1792333 101.757311,30.7499 C105.290086,28.0575667 107.709388,23.7975667 108.773188,19.5539 C109.395599,17.0705667 110.703095,11.1322333 108.313797,9.14656667 C105.576455,6.8719 79.6805515,7.27256667 79.6805515,7.27256667 L79.6805515,7.27256667 Z M103.711555,0.4879 C109.152235,0.675233333 112.783022,1.63156667 115.466357,7.06656667 C120.383639,17.0275667 111.96692,31.9662333 102.577413,36.0372333 C91.6003746,40.7965667 79.3375086,35.5292333 73.5337832,26.0035667 C70.4607325,20.9595667 68.907205,13.3205667 69.0068841,7.50123333 C69.1345667,0.0739 74.3225485,-0.1321 80.420644,0.0315666667 L103.711555,0.4879 Z'/>
+        <path
+          d='M13.1969483,4.9267 C9.78501392,5.11836667 5.88606327,5.16436667 2.69005822,6.63936667 C-0.69461078,8.20136667 -1.2176675,11.7387 3.04920921,12.2260333 C4.97094906,12.4457 6.89488267,12.0827 8.78716336,11.7450333 C10.336903,11.4683667 12.4419791,11.5580333 13.9064752,10.9657 C16.6355213,9.86236667 16.4603333,4.74003333 13.1969483,4.9267'/>
+        <path
+          d='M112.73467,4.9267 C116.146606,5.11836667 120.045559,5.16436667 123.241565,6.63936667 C126.626236,8.20136667 127.149293,11.7387 122.882414,12.2260333 C120.960673,12.4457 119.036739,12.0827 117.144457,11.7450333 C115.594717,11.4683667 113.489639,11.5580333 112.025143,10.9657 C109.295782,9.86236667 109.471283,4.74003333 112.73467,4.9267'/>
+        <path
+          d='M73.1094302,7.01263333 C71.1631869,4.71263333 66.0912197,3.38463333 62.8914864,3.38463333 C59.6914198,3.38463333 54.7681378,4.71263333 52.8222279,7.01263333 C51.8407719,8.1723 51.8074344,9.72396667 53.5083137,10.4509667 C55.6262451,11.3566333 57.5174814,9.7143 59.2126933,8.8553 C61.3809643,7.75663333 64.7120473,7.8773 66.7189648,8.8553 C68.4271783,9.68796667 70.3050797,11.3566333 72.4233444,10.4509667 C74.1242237,9.72396667 74.0908862,8.1723 73.1094302,7.01263333'/>
+      </g>
+    </g>
+  )
+}