cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg id="artwork" data-svg="artwork" xmlns="http://www.w3.org/2000/svg" width="565" height="1142" viewBox="0 0 565 1142">
  <defs>
    <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="0%" y2="85.15%">
      <stop stop-color="#09090B" offset="0%"/>
      <stop stop-color="#09090B" stop-opacity="0" offset="100%"/>
    </linearGradient>
    <linearGradient id="linearGradient-2" x1="50%" x2="50%" y1="0%" y2="85.15%">
      <stop stop-color="#202028" offset="0%"/>
      <stop stop-color="#09090B" stop-opacity="0" offset="100%"/>
    </linearGradient>
    <filter id="filter-3" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feGaussianBlur stdDeviation="19.8" in="SourceGraphic"/>
    </filter>
    <filter id="filter-4" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-5" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-6" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-7" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-8" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-9" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-10" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-11" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-12" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-13" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-9" dy="-3" 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.180253623 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-14" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-5" 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.263303895 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-15" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-5" 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.263303895 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-16" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-5" 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.263303895 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-17" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="-5" 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.263303895 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-18" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="4" dy="3" 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.166581748 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="filter-19" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
      <feOffset dx="4" dy="3" 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.166581748 0" in="shadowOffsetOuter1" result="shadowMatrixOuter1"/>
      <feMerge>
        <feMergeNode in="shadowMatrixOuter1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
    <g id="kaonashi" fill="none" fill-rule="evenodd">
		<g data-kaonashi="body">
			<path fill="url(#linearGradient-1)" d="M167.5 1341.72C260 1341.72 335 273.2 335 176 335 78.8 260 0 167.5 0S0 78.8 0 176s75 1165.72 167.5 1165.72z" transform="translate(117)"/>
			<path id="body-copy" fill="url(#linearGradient-2)" d="M167.5 1341.72C260 1341.72 335 273.2 335 176 335 78.8 260 0 167.5 0c22.13 32.84 107.4 54.85 107.4 152.06 0 38 8.3 460.6-24.26 684.47s-11.4 307.94-83.14 505.2z" transform="translate(117)"/>
			<g data-kaonashi="mask">
				<path fill="#FFE8E7" d="M286 448c58.3 0 84.4-31.73 97.62-87.97 6.66-28.36 37.2-164.1 19.36-242.9-17.83-78.78-93.44-93.88-127.38-93.88-25.46 0-92.8 26.2-110.2 78.5-17.4 52.3 10.88 222.8 20.04 258.28C200 416.53 230.04 448 286 448z"/>
				<g data-kaonashi="face">
					<path id="face-detail" fill="#B287AC" d="M181.26 190.35c2.02-1.53 9.6 3.46 16.92 3.15 7.33-.3 15.34-4.76 17.1-3.15 2.5 2.28-.9 11.83-16.7 11.83-15.82 0-21.33-8.8-17.32-11.83zM350.26 190.35c2.02-1.53 9.6 3.46 16.92 3.15 7.33-.3 15.34-4.76 17.1-3.15 2.5 2.28-.9 11.83-16.7 11.83-15.82 0-21.33-8.8-17.32-11.83z"/>
					<path id="face-detail" fill="#B88FB0" d="M215.92 84.24c3.2 3.84 4.9 44.07 1.4 49.58-3.53 5.52-21.4 4.1-25.42-1.3-4-5.38.65-17.68 4.9-26.17 4.23-8.5 15.9-25.94 19.12-22.1zM351.72 84.24c-3.22 3.84-4.9 44.07-1.4 49.58 3.52 5.52 21.4 4.1 25.4-1.3 4.03-5.38-.64-17.68-4.88-26.17-4.24-8.5-15.9-25.94-19.12-22.1z"/>
					<path id="face-detail" fill="#B287AC" d="M185.4 218.84c-2.92 12.82 15.17 78.35 19.97 76.94 2.64-.78 3.13-22.22 3.9-41.74.8-19.52 1.93-30.64.9-33.28-2.24-5.84-21.85-14.74-24.77-1.92zM380.27 218.84c2.92 12.82-15.17 78.35-19.98 76.94-2.64-.78-3.13-22.22-3.9-41.74-.8-19.52-1.93-30.64-.9-33.28 2.24-5.84 21.85-14.74 24.77-1.92zM257.23 410c2.15-2.32 50.15-2.42 52.55 0 2.4 2.4-9.87 9.4-26.9 9.4-17.04 0-27.8-7.1-25.65-9.4z"/>
					<path data-kaonashi="eyeL" fill="#000" d="M200.94 182.87c15.74 0 27.2-4.08 27.2-15.94S216.7 151 200.95 151c-15.74 0-25.94 7.86-25.94 18.45 0 10.6 10.2 13.42 25.94 13.42z"/>
					<path data-kaonashi="eyeR" fill="#000" d="M364.83 182.78c15.7 1.1 27.43-2.16 28.26-14 .82-11.82-10.35-16.7-26.05-17.8-15.7-1.08-26.42 6.04-27.16 16.6-.75 10.57 9.23 14.1 24.93 15.2z"/>
					<path data-kaonashi="mouth" fill="#000" d="M240.1 382c0-9.63 12.42-9.16 43.84-9.16s43.96 1.05 43.96 9.17c0 8.13-.73 15.37-43.96 15.37-43.23 0-43.84-5.7-43.84-15.36z"/>
					<g id="morph" fill="#000" opacity=".01">
						<path data-kaonashi="eyeLMorph" d="M200.94 172.87c15.74 0 27.2 5.92 27.2-5.94S216.7 151 200.95 151c-15.74 0-25.94 7.86-25.94 18.45 0 10.6 10.2 3.42 25.94 3.42z"/>
						<path data-kaonashi="eyeRMorph" d="M364.83 173.78c15.7 1.1 27.43 6.84 28.26-5 .82-11.82-10.35-16.7-26.05-17.8-15.7-1.08-26.42 6.04-27.16 16.6-.75 10.57 9.23 5.1 24.93 6.2z"/>
						<path data-kaonashi="mouthMorph" d="M240.1 375c0-9.63 12.42-2.16 43.84-2.16s43.96-6.95 43.96 1.17c0 8.13-.73 23.37-43.96 23.37-43.23 0-43.84-12.7-43.84-22.36z"/>
					</g>
				</g>
				<path data-kaonashi="maskshadow" fill="#572826" d="M213.2 45.5c-20.6 13.03-39.67 31.8-47.8 56.25-17.4 52.3 10.88 222.8 20.04 258.28C200 416.53 230.04 448 286 448c32.75 0 55.34-10 71.18-28.74-12.78 6.4-28.3 9.74-47.18 9.74-55.97 0-86-31.48-100.56-87.97-9.16-35.48-37.45-205.97-20.05-258.28 4.78-14.4 13.35-26.8 23.8-37.25z" opacity=".27"/>
			</g>
			<g data-kaonashi="hands">
			<g id="hands_bg">
				<path id="Oval-23" fill="#141419" d="M316.63 1023.82c19.95 0 33.24-18.05 55.16-27.13 8.98-3.74 30.94-4.5 43.54-8.43 12.6-3.92 27.6-15.25 41.98-28.3 18.74-16.98 36.22-37.02 51.3-59.67 23.1-34.74 5.07-71.8 10.3-109.44 5.2-37.64 33.14-91.75 33.14-130.85 0-49.63-10.03-39.53-25.9-79.72-15.85-40.2-33.67-99.3-74.1-127.4-21.73-15.1-75.63 32.63-112.77 81.4s-46.76 81.18-46.76 81.18-2.66-51.88-47.1-104.72C201 457.9 141.8 454.04 114.32 463.22c-33.58 11.2-10.32 43.07-29.1 71.06-20.52 30.53-27.9 54.26-35.34 73.25-11.77 30.04 35.33 52.1 35.33 92.5 0 57.24-66.55 85.1 10.26 176.73 23.97 28.6 58.38 75.35 79.72 94.26 21.34 18.9 23.8 5.68 41.96 17.25 39.3 25.04 54.54 35.55 99.5 35.55z"/>
				<path id="Oval-23-Copy-2" fill="#21212B" d="M518.9 790.86c5.23-37.64 33.16-91.75 33.16-130.85 0-49.63-10.03-39.53-25.9-79.72-15.85-40.2-33.67-99.3-74.1-127.4-21.73-15.1-75.63 32.63-112.77 81.4s-46.76 81.18-46.76 81.18 80.28-75.98 94.34-62.77c2.52 2.36-47.6 50.08-47.6 50.08s90.83-63.25 112.8-37.48c7.88 9.25 42.25 35.64 52.6 74.5 10.38 38.88 12.7 162.2 14.23 151.06z"/>
				<path id="Oval-23-Copy" fill="#21212B" d="M224.5 639c110.2 53.87 56.25-59.87 56.25-59.87s9.13-15.55-35.3-68.4c-44.46-52.84-103.66-46.84-131.13-37.68-27.43 9.15 38.24 37.88 32.77 61.23-5.48 23.35-61.9-5.5-42.78 6.47 19.12 11.97 7.44 25.42 0 44.4-11.76 30.04 10 68.58 10 109 0 57.23 0-109 110.2-55.14z"/>
			</g>
			<g id="gold">
				<g data-kaonashi="nugget" filter="url(#filter-4)" transform="translate(201 593)">
					<path id="Oval-6" fill="#D19A00" d="M60 99c33.14 0 46.5-18.13 46.5-40.5s29.27-45.78-4.93-56.43C86.9-2.5 74.14 5.37 56.72 12.77 39.3 20.17 0 45.72 0 58.5 0 80.87 26.86 99 60 99z"/>
					<path id="Oval-6-Copy" fill="#FFD000" d="M75.95 53.33c14.97 3.25 6.16 8.5 15.7-10.6 3.44-6.88 7.9-9.14 13.64-14.2C111 23.5 123.44 8.9 101.56 2.08 86.9-2.5 74.14 5.37 56.72 12.77c-8.3 3.53-20.96 11.16-31.97 19.57-12.1 9.26 31.97-6.7 31.97 0 0 3.86-10.16 8.04-11.46 12.86-1.3 4.8 15.73 4.87 30.7 8.13z"/>
					<path id="Oval-22" fill="#FFE98B" d="M67.48 27.46c1.32 2.1 5.57-3.45 13.3-8.27 7.73-4.84 17.13-6 15.9-8.2-1.23-2.18-11.84-3.15-19.56 1.68-7.73 4.83-10.96 12.67-9.64 14.78z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-5)" transform="translate(222 647)">
					<path id="Oval-7" fill="#D19A00" d="M78 108c41.42 0 75-25.52 75-57 0-17.08-13.84-35.15-33.1-43.67-19.26-8.53-36.3-6.2-55.24-6.2-24.12 0-37.5-.6-51.22 12.85C-.28 27.42.9 37.85.9 51c0 31.48 35.68 57 77.1 57z"/>
					<path id="Oval-7-Copy" fill="#FFD000" d="M54.06 59.15c3.4 0 8.7-7.06 17.62-5.53 3.85.65 17.15 22.12 33.73 24.64 16.6 2.52 38.87-10.88 38.87-24.64 0-17.1-5.3-33.97-24.56-42.5-19.25-8.52-36.1-10-55.04-10-24.12 0-37.5-.6-51.22 12.86-13.72 13.44 1.5 17.9 12.55 17.9 11.02 0 13.34 27.27 28.06 27.27z"/>
					<path id="Oval-20" fill="#FFE98B" d="M57.9 41.33c3-1.48-4.98-5.8-2.62-14.62 2.36-8.8 24.3 2.76 25.62-3.74 1.32-6.5-32.83-14.7-35.18-5.9-2.36 8.8 9.15 25.74 12.17 24.27z"/>
					<path id="Oval-21" fill="#FFE98B" d="M126 66c4.97 0 7.04-2.9 7.04-9.53 0-6.63-1.33-9.54-4.65-9.54-2.68 0-.75 7.84-2.4 10.3-1.65 2.44-6.28 1.3-6.28 4.38 0 4.4 1.3 4.4 6.28 4.4z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-6)" transform="translate(147 647)">
					<ellipse id="Oval-8" cx="36" cy="69" fill="#D19A00" rx="36" ry="69"/>
					<path id="Oval-8-Copy" fill="#FFD000" d="M34.95 86.85c19.88 0-.84-5.67 6.3-30.94 1.8-6.36 2.08-25.32 4.63-31.22 2.54-5.9 7.4 1.13 7.5-4.34C53.58 9.46 45.8 0 36 0 24.5 0 17.3 9.64 17.26 20.34c-.03 6.8 9.37-5.18 11.4 0 2.03 5.18-4.9 22.26-4.36 26.8 3.6 29.66-9.23 39.7 10.65 39.7z"/>
					<ellipse id="Oval-19" cx="40.5" cy="21" fill="#FFE98B" rx="4.5" ry="9"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-7)" transform="translate(102 701)">
					<path id="Oval-9" fill="#D19A00" d="M77.1 115.86c41.43 0 77.12-35.3 77.12-54.36 0-8.96-1.23-49.6-16.56-59.03C122.33-6.95 96.94 15.4 75 15.4c-41.42 0-75 27.05-75 46.1s35.7 54.36 77.1 54.36z"/>
					<path id="Oval-9-Copy" fill="#FFD000" d="M77.1 36.08c5.06 0 29.88 2 33.23 4.73 3.34 2.76-11.3 11.27-6.32 13.62 7.98 3.76 27.3 6.26 27.3-6.58 0-8.96 21.7-32.95 6.36-42.37C122.33-3.95 96.94 18.4 75 18.4c-41.42 0-41.47 19.82-36.73 22.4C43 43.4 48.97 36.1 77.1 36.1z"/>
					<path id="Oval-17" fill="#FFE98B" d="M130.33 24.84c7.45 0 7.67-4.2 7.67-8.34S131.96 9 124.5 9s-14.8-1.9-14.8 2.24c0 1.82 8.62 4.2 11.83 5.68 3.22 1.5 4.63 7.92 8.8 7.92z"/>
					<path id="Oval-18" fill="#FFE98B" d="M89.97 26.75c3.9-1.34 6.43-1.34 5.62-3.7-.82-2.34-4.65-3.15-8.57-1.8-3.9 1.34-6.43 4.34-5.62 6.7.82 2.34 4.65.15 8.57-1.2z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-8)" transform="translate(375 659)">
					<path id="Oval-12" fill="#D19A00" d="M21.33 101.44C41.2 101.44 72 78.18 72 52.5 72 26.82 55.88 2.2 36 2.2S0 26.8 0 52.5c0 25.68 1.45 48.94 21.33 48.94z"/>
					<path id="Oval-12-Copy" fill="#FFD000" d="M32.73 21.65c8.16 0-3.4 14.74 3.27 24.2 6.68 9.44 36 21.8 36 6.65C72 26.82 55.88 2.2 36 2.2S11.57 33.73 11.57 33.73s1.28-12.1 21.16-12.1z"/>
					<path id="Oval-16" fill="#FFE98B" d="M51 21c4.97 0 9 14.28 9 6s-4.03-15-9-15-9 6.72-9 15c0 8.28 4.03-6 9-6z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-9)" transform="translate(315 704)">
					<path id="Oval-3" fill="#D19A00" d="M72 153c20.83 0 58.68 14.44 74.26 0 15.58-14.44 7.06-54.17 7.06-73.5 0-18.4 10.93-39.68 0-52.57-10.93-12.9-14.58-35.95-63.87-19.05C40.15 24.78 0 38.9 0 79.5 0 120.1 32.24 153 72 153z"/>
					<path id="Oval-3-Copy" fill="#FFD000" d="M79.1 54.12c7.6 0 8.5 14.68 17.55 33.2 9.04 18.53 24.9 9.16 34.78 0 15.58-14.43 21.9 11.5 21.9-7.82 0-18.4 10.92-39.68 0-52.57-10.94-12.9-14.6-35.95-63.88-19.05-49.3 16.9-75.12 20.86-60.25 46.24 14.88 25.38 10.13 0 49.9 0z"/>
					<path id="Path-10" fill="#FFE98B" d="M148 26.02s-5.06 4.73-13.45 3.25c-8.38-1.48-21.6-11.92-21.6-11.92s-8.28 3.98-4.14 13.03c4.14 9.04 6.62-5.8 10.13-3.46 3.5 2.35 8.3 11.12 17 11.12S148 26.02 148 26.02z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-10)" transform="translate(180 731)">
					<path id="Oval-10" fill="#D19A00" d="M75 132c36.45 0 56.9-24.18 56.9-54S140.35.98 103.9.98.72 64.6.72 94.42 38.55 132 75 132z"/>
					<path id="Oval-10-Copy" fill="#FFD000" d="M74.9 78c36.45 0 57 29.82 57 0S140.35.98 103.9.98.72 64.6.72 94.42 38.45 78 74.9 78z"/>
					<path id="Path-9" fill="#FFE98B" d="M74.24 23.28s14-12.13 26.63-8.34c12.62 3.8 24.05 14.03 24.05 14.03s.9 3.93-4.37 3.93c-5.28 0-10.24-13.38-17.53-8.66-7.3 4.73-5.37 11.2-13.78 9.93-8.42-1.27-15-10.9-15-10.9z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-11)" transform="translate(339 869)">
					<path id="Oval-13" fill="#D19A00" d="M24.77 66.34c15.75 0 46.77-9.6 38.23-31.84C54.46 12.25 50.24 0 34.5 0S2.15 3.84 2.15 22.9c0 19.05 6.88 43.44 22.62 43.44z"/>
					<path id="Oval-13-Copy" fill="#FFD000" d="M31.15 30c6.1 0 18.1-3.04 14.8-10.08C42.62 12.88 41 9 34.9 9 28.83 9 38 13.9 38 19.92 38 25.95 25.07 30 31.16 30z"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-12)" transform="translate(237 821)">
					<path id="Oval-11" fill="#D19A00" d="M79.07 157.7c36.45 0 52.93-36.62 52.93-79.7 0-18.06-12.2-22.02-20.9-35.24C102.37 29.54 87.16 0 66 0 45.03 0 34.55 16.76 22.46 34.78 10.36 52.78 0 59.7 0 78c0 43.08 42.62 79.7 79.07 79.7z"/>
					<path id="Oval-11-Copy" fill="#FFD000" d="M82.5 137.8c36.45 0 46.05-16.72 46.05-59.8 0-18.06-59.13 4.1-67.85-9.1C52 55.67 87.17 0 66 0 45.03 0 44.2 24.75 32.12 42.76 20.02 60.76 5.42 59.7 5.42 78c0 43.08 40.63 59.8 77.08 59.8z"/>
					<path id="Oval-14" fill="#FFD000" d="M84.24 66.2c8.28 0 20.76-3.24 20.76-10.7 0-7.46-14.46-22.06-22.74-22.06-8.3 0-2.13 10.32-2.13 17.78 0 7.46-4.18 14.97 4.1 14.97z"/>
					<path id="Oval-14-Copy" fill="#FFE98B" d="M30.78 55.93c-7.44 3.63-17.24 12-13.97 18.7 3.28 6.7 22.67 13.5 30.12 9.87 7.45-3.63-2.62-10.2-5.88-16.9-3.27-6.72-2.8-15.3-10.26-11.67z"/>
					<ellipse id="Oval-15" cx="93" cy="46.5" fill="#FFE98B" rx="6" ry="4.5"/>
				</g>
				<g data-kaonashi="nugget" filter="url(#filter-13)" transform="translate(285 761)">
					<path id="Oval-2" fill="#D19A00" d="M84.25 108.78c46.32 24.63 96.5 32.94 100.77 12.8 9-42.46-18.74-26.2-47.03-42.57-28.3-16.36-34.12-36.16-53.75-46.6-46.32-24.62-57.63-17.55-66.96 0-9.35 17.56 20.63 51.75 66.95 76.38z"/>
					<path id="Oval-2-Copy" fill="#FFD000" d="M88.28 97.88c43.34 23.04 90.3 30.82 94.3 11.98 8.42-39.74-17.54-24.53-44-39.84-26.5-15.32-31.93-33.85-50.3-43.62-43.35-23.05-53.93-16.43-62.67 0-4.6 8.7 1.06 21.72 13.83 35.5C42.6 65.3 56.46 77.4 59.87 79.96c8.38 6.26 17.95 12.34 28.4 17.9z"/>
					<path id="Path-7" fill="#FFE98B" d="M100.64 35.12s-9.9-9.57-29.2 2.42c-19.3 12-19.04 23.78-19.04 23.78S63.8 44.9 78 44.9c14.17 0 22.64-9.78 22.64-9.78z"/>
					<path id="Path-8" fill="#FFE98B" d="M46 34.24c-12.2 0-13.27 8.52-13.27 8.52l20.44-4.8s5.03-3.72-7.17-3.72z"/>
				</g>
			</g>
			<g id="hands_fg">
				<g id="finger_r" filter="url(#filter-14)" transform="rotate(-10 5496.114 -1192.363)">
					<path id="Oval-27-Copy" fill="#141419" d="M24.67 81.64c13.62 0 16.57-5.24 30.67-8.67C69.44 69.53 84.3 68 91.5 62.35c14.57-11.42 19.2-53.1 19.2-58.77 0-12.97-72.4 31-86.03 31C11.04 34.6 0 45.1 0 58.07s11.04 23.58 24.67 23.58z"/>
					<path id="Oval-27-Copy-2" fill="#21212B" d="M24.67 81.64c13.62 0 16.57-5.24 30.67-8.67C69.44 69.53 84.3 68 91.5 62.35c14.57-11.42 19.2-53.1 19.2-58.77 0-8.52-10.74 16.87-26.95 28-16.22 11.12-23.73 0-28.4 0-13.63 0-34.8 17.8-34.8 30.77 0 12.96-9.5 19.3 4.12 19.3z"/>
				</g>
				<g id="finger_r" filter="url(#filter-15)" transform="translate(345 911)">
					<path id="Oval-27" fill="#141419" d="M44.06 79.15C56.28 82.38 78.83 86.4 95 72.42c16.16-13.98 42.16-60.93 42.16-69.48 0-10.53-27.04 14.25-58.84 24-31.8 9.75-36.62 0-42.1 0C19.63 26.94 0 36.76 0 52.5c0 15.74 29.08 22.7 44.06 26.65z"/>
					<path id="Oval-27-Copy-3" fill="#21212B" d="M44.06 79.15c32.78 6.85 40.34-4.73 56.5-18.7 7.07-6.12 8.3-9.5 16.13-22.24 7.82-12.75 2.2-19.06 2.2-23.88 0-10.53-25.38 17.7-46.93 23.9-21.55 6.18-35.5-16.86-55.44 6.18-15.32 17.7.32 26.4 15.17 31.25 1.28.42 8.1-.72 12.36-4.54 4.27-3.82 6.75-11 8.02-10.66 1.66.45-9.47 18.4-8.02 18.7z"/>
				</g>
				<g id="finger_r" filter="url(#filter-16)" transform="translate(387 854)">
					<path id="Oval-27-Copy" fill="#141419" d="M30 99.14c16.57 0 20.15-6.36 37.3-10.54 17.17-4.18 35.22-6.03 43.98-12.9C129 61.85 134.62 11.25 134.62 4.35 134.62-11.4 46.57 42 30 42 13.43 42 0 54.76 0 70.5s13.43 28.64 30 28.64z"/>
					<path id="Oval-27-Copy-2" fill="#21212B" d="M30 99.14c16.57 0 20.15-6.36 37.3-10.54 17.17-4.18 35.22-6.03 43.98-12.9C129 61.85 134.62 11.25 134.62 4.35c0-10.34-13.04 20.5-32.76 34s-28.87 0-34.55 0C50.75 38.34 25 59.97 25 75.7c0 15.75-11.55 23.44 5.02 23.44z"/>
				</g>
				<g id="thumb_r" filter="url(#filter-17)" transform="matrix(-1 0 0 1 558 632)">
					<path id="Oval-28" fill="#21212B" d="M50.76 253.83c9.07 0 21.4-7.12 28.66-21.8C86.7 217.32 96 169.4 96 156c0-8.24-4.52-21.06-11.44-33.74C73.4 101.8 123.63 57.2 96 23.53c-27.63-33.65-75.4-26.18-92.5 0-6.85 10.5-.82 38.73 0 59.53.85 20.8 0 55.84 0 63 0 9.08 15.72 30.87 21.15 49.56 5.42 18.68 0 58.2 26.1 58.2z"/>
					<path id="Oval-28-Copy" fill="#141419" d="M50.76 253.83c9.07 0 21.4-7.12 28.66-21.8C86.7 217.32 96 169.4 96 156c0-8.24-4.52-21.06-11.44-33.74C73.4 101.8 123.63 57.2 96 23.53 68.37-10.12 47.8 1.38 30.7 27.57c-6.86 10.5 19.23 29.6 20.06 50.4.84 20.8-11.33 32.8-11.33 39.98 0 9.07 22.13 32.73 27.55 51.42 2.33 8 7.2 29.5 0 45.92-7.2 16.4-31.15 38.53-16.22 38.53z"/>
				</g>
				<g id="finger_l" filter="url(#filter-18)" transform="rotate(-3 14740.305 289.23)">
					<path id="Oval-26" fill="#141419" d="M277.88 244.48c7.25-9.63 5-36.67-25.6-64.03-30.58-27.37-40.23-23.35-51.1-33.24-42.62-38.84-29.94-36.44-38.35-42.8C143.8 90.1 89.87 17.44 65.53 7.3 41.16-2.84 46.32 39.23 50.2 44.55c6.43 8.85 43.76 94.62 54.12 103 10.35 8.38 27.85 27.65 44.82 40.44 59.54 44.86 115.18 74.48 128.74 56.48z"/>
					<path id="Oval-26-Copy-2" fill="#21212B" d="M277.98 244.53c7.26-9.63 5-36.67-25.6-64.04-30.58-27.38-40.23-23.35-51.08-33.25-42.64-38.85-29.95-36.45-38.37-42.8-25.77-19.4-9.14 8.4 5.62 28.75 6.43 8.85 8.54 34.66 18.9 43.04 10.35 8.38 23.15-8.45 40.13 4.34 5.6 4.2 19.5 18.75 20.95 30.62 1.46 11.87-10.22 19.8-6.73 25.6 9.05 15.1 29.9 16.08 36.18 7.73z"/>
				</g>
				<g id="finger_l">
					<path id="Oval-26" fill="#141419" d="M250.02 932.47c7.7-9.17 6.76-36.17-22.37-65.08-29.14-28.92-38.94-25.46-49.27-35.9-40.57-41-28.05-37.9-36.13-44.7-13.17-11.03-30.82-56.15-24.62-98.72 6.2-42.56 34.78-72.33 26.3-85.9-18.16-29.03-70.35 28.3-78.94 26.44C40.95 623.4 57.36 747 52.66 752.6c-7.12 8.48-10.64 31.58 3.07 52.63 5.96 9.16 16.25 12.3 26.16 21.2 9.9 8.92 26.38 29.05 42.66 42.7 57.12 47.93 111.08 80.48 125.46 63.34z"/>
					<path id="Oval-26-Copy-2" fill="#21212B" d="M250.02 932.47c7.7-9.17 6.76-36.17-22.37-65.08-29.14-28.92-38.94-25.46-49.27-35.9-40.57-41-28.05-37.9-36.13-44.7-12.8-10.74-26.02-52.45-20-93.9 6.04-41.44 16.74-61.54 8-75.52-18.17-29.03-8.06 27.38-16.65 25.5-24.03-5.22-14.83 99.06-19.52 104.65-7.13 8.5 38.67 47.12 52.38 68.17 5.96 9.16 6.82 34.93 16.72 43.84 9.9 8.9 23.47-7.1 39.75 6.55 5.36 4.5 18.5 19.72 19.38 31.6.9 11.88-11.12 19.1-7.94 25.1 8.28 15.5 29 17.62 35.66 9.67z"/>
				</g>
				<g id="thumb_l" filter="url(#filter-19)" transform="translate(45 579)">
					<path id="Oval-28" fill="#141419" d="M50.76 252.83c9.07 0 21.4-7.12 28.66-21.8C86.7 216.32 96 168.4 96 155c0-8.24-4.52-21.06-11.44-33.74C73.4 100.8 123.63 56.2 96 22.53c-27.63-33.65-75.4-26.18-92.5 0-6.85 10.5-.82 38.73 0 59.53.85 20.8 0 55.84 0 63 0 9.08 15.72 30.87 21.15 49.56 5.42 18.68 0 58.2 26.1 58.2z"/>
					<path id="Oval-28-Copy" fill="#21212B" d="M50.76 252.83c9.07 0 21.4-7.12 28.66-21.8C86.7 216.32 96 168.4 96 155c0-8.24-4.52-21.06-11.44-33.74C73.4 100.8 123.63 56.2 96 22.53 68.37-11.12 47.8.38 30.7 26.57c-6.86 10.5 19.23 29.6 20.06 50.4.84 20.8-11.33 32.8-11.33 39.98 0 9.07 22.13 32.73 27.55 51.42 2.33 8 7.2 29.5 0 45.92-7.2 16.4-31.15 38.53-16.22 38.53z"/>
				</g>
				<g id="repair">
					<path id="Oval" fill="#21212B" d="M139 649c17.42-17.04 26-14.33 26-32s-24.18-41.94-38.54-41.94S113 599.33 113 617c0 17.67 8.58 49.04 26 32z"/>
					<path id="Path-3" fill="#141419" d="M456.08 690l-12.27-55.5 60.53-16.02 13.74 38.5z"/>
					<path id="Path-2" fill="#21212B" d="M522.6 647.93s-28.36-9.16-37.33-22.9c-8.98-13.73-11.92-38.73-11.92-38.73l54.73 36.64-5.5 25z"/>
				</g>
			</g>
		</g>
		</g>
    </g>
</svg>
            
          
!
            
              body {
	height: 100vh;
	width: 100vw;
	background: radial-gradient(ellipse at center, #2f2f3d 0%,#1b1b23 100%);
	overflow: visible;
}

#artwork {
	position: absolute;
	height: 90%;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	overflow: visible;
}
            
          
!
            
              var o = {
	init: function() {
		o.cacheDOM();
		o.settings();
		o.bindEvents();
		o.revealScene();
		o.initPushAnim();
		o.initFloatAnim();
		o.initSmileAnim();
		o.initNuggetAnim();
		o.initInteraction();
	},
	cacheDOM: function() {
    	o.svg = document.querySelector("[data-svg=artwork]");
		o.nuggets = o.svg.querySelectorAll("[data-kaonashi=nugget]");
		o.elements = [	
			"body",
			"mask",
			"face",
			"eyeL",
			"eyeR",
			"mouth",
			"eyeLMorph",
			"eyeRMorph",
			"mouthMorph",
			"maskshadow",
			"hands"
		  ];
		o.el = {};
		var i;
		var len = o.elements.length;
		for (i = 0; i < len; i++) { o.el[ o.elements[i] ] = o.svg.querySelector("[data-kaonashi=" + o.elements[i] + "]"); }
	  },
	settings: function() {
		TweenLite.defaultEase = Power1.easeInOut;
		TweenLite.set(o.el.hands, { scale: 0.5, transformOrigin: "top center" });
		o.resize();
		o.progress = { x: 0.5, y: 0.5, min: 0, max: 1 };
		o.mouse = { x: o.vw/2, y: o.vh/2 };
		o.art = { yMin: -20, yMax: 20 };
		o.body = { xMin: 20, xMax: -20, yMin: -50, yMax: 50 };
		o.mask = { xMin: -20, xMax: 20, yMin: -20, yMax: 20 };
		o.face = { xMin: -10, xMax: 10, yMin: -10, yMax: 10 };
		o.hands = { xMin: -70, xMax: 70, yMin: -50, yMax: 150, rMin: 40, rMax: -40 };

		o.acceleration = { val: 0.03 };
	},
	resize: function() {
		o.vw = window.innerWidth;
		o.vh = window.innerHeight;
	},
	bindEvents: function() {
		document.addEventListener("mousemove", o.recordMouse);
		document.addEventListener("touchmove", o.recordMouse);
		window.addEventListener("resize", o.resize);
	},
	revealScene: function() {
    	TweenMax.to(o.svg, 1, { autoAlpha: 1 });
	},
	recordMouse: function(e) {
		if (e.targetTouches && e.targetTouches[0]) {
			e.preventDefault();
			o.mouse.x = e.targetTouches[0].clientX;
			o.mouse.y = e.targetTouches[0].clientY;           
		} else {
			o.mouse.x = e.clientX;
			o.mouse.y = e.clientY;
		}
	},
	initInteraction: function() {
		var tlX = o.getTlX();
		var tlY = o.getTlY();
		
		TweenMax.to(tlX, 1000, {
			progress: 1,
			repeat: -1,
			ease: Linear.easeNone,
			modifiers: {
				progress: function() {
					var acceleration = o.acceleration.val;
					var currentValue = tlX.progress();
					var storedValue = o.progress.x = map(o.mouse.x, 0, o.vw, o.progress.min, o.progress.max);
					var newValue = currentValue + (storedValue - currentValue) * acceleration;
					return newValue;
				}
			}
		});
		TweenMax.to(tlY, 1000, {
			progress: 1,
			repeat: -1,
			ease: Linear.easeNone,
			modifiers: {
				progress: function() {
					var acceleration = o.acceleration.val;
					var currentValue = tlY.progress();
					var storedValue = o.progress.y = map(o.mouse.y, 0, o.vh, o.progress.min, o.progress.max);
					var newValue = currentValue + (storedValue - currentValue) * acceleration;
					return newValue;
				}
			}
		});
	},
	getTlX: function() {
		// Tween progress value of this timeline
		var tl = new TimelineMax({ paused: true });
		
		tl
			.fromTo(o.el.body, 1, { x: o.body.xMin }, { x: o.body.xMax }, 0)
			.fromTo(o.el.mask, 1, { x: o.mask.xMin }, { x: o.mask.xMax }, 0)
			.fromTo(o.el.face, 1, { x: o.face.xMin }, { x: o.face.xMax }, 0)
			.fromTo(o.el.hands, 1, { x: o.hands.xMin, rotation: o.hands.rMin, transformOrigin: "top center" }, { x: o.hands.xMax, rotation: o.hands.rMax }, 0)
		;
		
		return tl;
	},
	getTlY: function() {
		// Tween progress value of this timeline
		var tl = new TimelineMax({ paused: true });
		
		tl
			.fromTo(o.el.body, 1, { y: o.body.yMin }, { y: o.body.yMax }, 0)
			.fromTo(o.el.mask, 1, { y: o.mask.yMin }, { y: o.mask.yMax }, 0)
			.fromTo(o.el.face, 1, { y: o.face.yMin }, { y: o.face.yMax }, 0)
			.fromTo(o.el.hands, 1, { y: o.hands.yMin }, { y: o.hands.yMax }, 0)
		;
		
		return tl;
	},
	initPushAnim: function() {
		var tl = new TimelineMax({ onComplete: o.initPushAnim });
		var freq = random(0.5, 2);
		var scale = random(0.4, 0.55)
		
		tl.to(o.el.hands, freq, { scale: scale });
	},
	initFloatAnim: function() {
		var tl = new TimelineMax({ onComplete: o.initFloatAnim });
		var freq = random(2, 4);
		var y = random(o.art.yMin, o.art.yMax)
		
		tl.to(o.svg, freq, { y: y });
	},
	initSmileAnim: function() {
		var tl = new TimelineMax({ repeat: 1, yoyo: true, onComplete: o.initSmileAnim });
		var freq = random(3, 6);
		var mouth = o.el.mouthMorph;
		var eyeR = o.el.eyeRMorph;
		var eyeL = o.el.eyeLMorph;
		
		tl
			.to(o.el.mouth, freq, { morphSVG: mouth }, 0)
			.to(o.el.eyeR, freq, { morphSVG: eyeR }, 0)
			.to(o.el.eyeL, freq, { morphSVG: eyeL }, 0)
		;
	},
	initNuggetAnim: function() {
		var delay = random(3, 6);
		var tl = new TimelineMax({ onComplete: o.initNuggetAnim, delay: delay });
		
		tl.staggerTo(o.nuggets, 0.3, {
			cycle:{
				rotation: function(){
					return random(-15, 15);
				},
				y: function(){
					return "-=" + random(10, 30);
				}
			}, transformOrigin: "center", ease: SlowMo.ease.config(0.1, 0.1, true)}, -0.02 )
		;
	}
}

window.addEventListener("load", o.init);

function random(min, max) {
  if (max === null) { max = min; min = 0; }
  return Math.random() * (max - min) + min;
}

function map(value, sourceMin, sourceMax, destinationMin, destinationMax) {
  return destinationMin + (destinationMax - destinationMin) * ((value - sourceMin) / (sourceMax - sourceMin)) || 0;
}
            
          
!
999px
Loading ..................

Console