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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              .hover
svg.avatar(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 800 800')
  g#ears
    path(fill='#E6BBBE', d='M346.5,344.2l-2.8-3.4l4.1-18.5L346.5,344.2z')
    path(fill='#EAD9DD', d='M344,332.5l-0.3,8.3l4.1-18.5L344,332.5z')
    path(fill='#EEDFE3', d='M346,307.1l1.8,15.2l0.4-22.1L346,307.1z')
    path(fill='#D5B0BA', d='M347.8,322.3l0.4-22.1l4.7-0.7L347.8,322.3z')
    path(fill='#DDC0C8', d='M348.2,300.2l-0.7-4.5l5.4,3.8L348.2,300.2z')
    path(fill='#E0AAAE', d='M349.8,292.3l-2.3,3.4l5.4,3.8L349.8,292.3z')
    path(fill='#CA8D94', d='M353.3,293.9l-3.5-1.6l3.1,7.2L353.3,293.9z')
    path(fill='#8D3048', d='M469.3,360.4l3.8-2.5l-1.6-17.1L469.3,360.4z')
    path(fill='#A44950', d='M476.2,351.2l-3.1,6.7l-1.6-17.1L476.2,351.2z')
    path(fill='#973A4D', d='M476.5,336l-0.3,15.2l-4.7-10.4L476.5,336z')
    path(fill='#922D50', d='M471.5,340.8l5-4.8l-2.5-14.7L471.5,340.8z')
    path(fill='#BF6D71', d='M476.5,336l2.6-12.2l-5.1-2.5L476.5,336z')
    path(fill='#973A4D', d='M476.5,336l4.5-7.3l-1.9-4.9L476.5,336z')
    path(fill='#C4808F', d='M481.4,317.6l-2.3,6.2l-5.1-2.5L481.4,317.6z')
    path(fill='#8E3147', d='M481,328.7l0.4-11.1l-2.3,6.2L481,328.7z')
    path(fill='#BB7573', d='M481,328.7l3.5-7.3l-3.1-3.8L481,328.7z')
    path(fill='#E0AAAE', d='M479.5,313.8l1.9,3.8l-7.4,3.7L479.5,313.8z')
    path(fill='#DFA9A3', d='M479.5,313.8l6,1.3l-4.1,2.5L479.5,313.8z')
    path(fill='#E7D2DB', d='M485.5,315.1l-1,6.3l-3.1-3.8L485.5,315.1z')
  g#hair
    path(fill='#99576B', d='M356.7,261.1l4.8,2.1l-8.2,30.7L356.7,261.1z')
    path(fill='#7F3D55', d='M371.6,245l-14.9,16.1l4.8,2.1L371.6,245z')
    path(fill='#6B2349', d='M365,235l6.6,10l-14.9,16.1L365,235z')
    path(fill='#510B42', d='M366,234l5.6,11l-1.6-5.9L366,234z')
    path(fill='#A16B85', d='M370.8,238.8l2.2,5.2l-1-16L370.8,238.8z')
    path(fill='#7E3C64', d='M373,244l-1-16l12-14L373,244z')
    path(fill='#5F164B', d='M395.1,238.9L384,214l-11,30L395.1,238.9z')
    path(fill='#631A51', d='M422,203l-26.9,35.9L384,214L422,203z')
    path(fill='#7E3C64', d='M422,203l-22,1l-16,10L422,203z')
    path(fill='#510B42', d='M420.2,239.2l-25.1-0.3L422,203L420.2,239.2z')
    path(fill='#59144A', d='M461.2,212.9l-41,26.3L422,203L461.2,212.9z')
    path(fill='#6C2559', d='M422,203l20-3l19.2,12.9L422,203z')
    path(fill='#5F164B', d='M458.2,247.1l3-34.2l-41,26.3L458.2,247.1z')
    path(fill='#530B40', d='M461.2,212.9l23.7,35.9l-26.7-1.7L461.2,212.9z')
    path(fill='#611142', d='M461.2,212.9l16.2,7.6l7.5,28.3L461.2,212.9z')
    path(fill='#591044', d='M488.5,236.6l-3.6,12.2l-7.5-28.3L488.5,236.6z')
    path(fill='#4C0438', d='M491.9,259.4l-7-10.6l3.6-12.2L491.9,259.4z')
    path(fill='#6E1B47', d='M474.8,262.7l10.1-13.9l-26.5-1.7L474.8,262.7z')
    path(fill='#5F164B', d='M487.9,286.4l-13.1-23.7l10.1-13.9L487.9,286.4z')
    path(fill='#530A39', d='M484.9,248.8l7.2,18.5l-4.2,19.1L484.9,248.8z')
    path(fill='#7F3D55', d='M478.2,282.2l9.7,4.2l-13.1-23.7L478.2,282.2z')
    path(fill='#742C4B', d='M479.5,313.8l8.4-27.4l-9.7-4.2L479.5,313.8z')
    path(fill='#7F3D55', d='M479.5,313.8l-5.5,7.5l4.2-39.1L479.5,313.8z')
  g#forehead
    path(fill='#DDC0C8', d='M361.5,263.2l-8.2,30.7l5.5-3.3L361.5,263.2z')
    path(fill='#CA8D94', d='M361.5,263.2l-2.7,27.4l11.6-8.3L361.5,263.2z')
    path(fill='#C9838D', d='M361.5,263.2l8.9,19.1l1.2-37.3L361.5,263.2z')
    path(fill='#C57D89', d='M370.4,282.3L373,244l-1.4,1L370.4,282.3z')
    path(fill='#E0AAAE', d='M373,244l-1.4,1l-0.8-6.2L373,244z')
    path(fill='#CA8891', d='M370,239.1l0.8-0.3l0.8,6.2L370,239.1z')
    path(fill='#B86B7D', d='M370.4,282.3l33.8-26.6L373,244L370.4,282.3z')
    path(fill='#BF7784', d='M404.2,255.7l-7.9,37.2l-25.9-10.6L404.2,255.7z')
    path(fill='#C57D8A', d='M404.2,255.7L373,244l22.1-5.1L404.2,255.7z')
    path(fill='#CA8891', d='M420.2,239.2l-25.1-0.3l9.1,16.8L420.2,239.2z')
    path(fill='#C9838D', d='M408.1,302l-11.8-9.1l3.3,7.2L408.1,302z')
    path(fill='#C98791', d='M422.5,294.6l-14.4,7.4l-11.8-9.1L422.5,294.6z')
    path(fill='#C4808F', d='M418.7,302h-10.6l14.4-7.4L418.7,302z')
    path(fill='#C4808F', d='M396.3,292.9l26.2,1.7l-18.3-38.9L396.3,292.9z')
    path(fill='#CA8D94', d='M404.2,255.7l18.3,38.9l9-39.5L404.2,255.7z')
    path(fill='#E0AAAE', d='M404.2,255.7l16-16.5l11.3,15.9L404.2,255.7z')
    path(fill='#AC6378', d='M420.2,239.2l38.2,7.9l-26.9,8L420.2,239.2z')
    path(fill='#A35169', d='M458.4,247.1l-26.9,8l21.8,35.5L458.4,247.1z')
    path(fill='#A85C73', d='M431.5,255.1l21.8,35.5l-30.8,4L431.5,255.1z')
    path(fill='#954659', d='M458.4,247.1l-5.1,43.5l24.9-8.4L458.4,247.1z')
    path(fill='#99586B', d='M478.2,282.2l-3.4-19.5l-16.4-15.6L478.2,282.2z')
    path(fill='#9C4A59', d='M478.2,282.2l-13.5,23.2l-11.4-14.8L478.2,282.2z')
    path(fill='#954659', d='M464.7,305.4l9.3,15.9l4.2-39.1L464.7,305.4z')
  g#brows
    path(fill='#7E3C64', d='M358.8,290.6l11.6-8.3l4.7,9.3L358.8,290.6z')
    path(fill='#631A51', d='M396.3,292.9l-25.9-10.6l4.7,9.3L396.3,292.9z')
    path(fill='#510B42', d='M399.6,300.1l-3.3-7.2l-21.2-1.3L399.6,300.1z')
    path(fill='#4C0438', d='M464.7,305.4l-11.4-14.8l-8,8L464.7,305.4z')
    path(fill='#611142', d='M422.5,294.6l30.8-4l-8,8L422.5,294.6z')
    path(fill='#5F164B', d='M418.7,302l26.6-3.4l-22.8-4L418.7,302z')
  g#eyes
    path(fill='#311A00', d='M373.8,314.9l6.4,0.6l-2.3-8.2L373.8,314.9z')
    path(fill='#412200', d='M371.2,309.8l2.6,5.1l4.1-7.6L371.2,309.8z')
    path(fill='#211100', d='M383,312.1l-2.8,3.4l-2.3-8.2L383,312.1z')
    path(fill='#100800', d='M383.4,309.2l-0.4,2.9l-5.1-4.8L383.4,309.2z')
    path(fill='#674E33', d='M371.7,306.9l-0.5,2.9l6.7-2.5L371.7,306.9z')
    path(fill='#FFF3F7', d='M367.7,312.1l-2.3-3.3l5.8,1L367.7,312.1z')
    path(fill='#FFE7F0', d='M371.7,306.9l-0.5,2.9l-5.8-1L371.7,306.9z')
    path(fill='#FFE7F0', d='M373.8,314.9l-6.1-2.8l3.5-2.3L373.8,314.9z')
    path(fill='#FFD0E1', d='M386.1,314.8l2.4-0.7l-5.1-4.9L386.1,314.8z')
    path(fill='#FFF3F7', d='M383,312.1l0.4-2.9l2.7,5.6L383,312.1z')
    path(fill='#FFE7F0', d='M380.2,315.5l5.9-0.7l-3.1-2.7L380.2,315.5z')
    path(fill='#510B42', d='M383.4,309.2l7.7,5l-2.6-0.1L383.4,309.2z')
    path(fill='#FFF3F7', d='M391.1,314.2l-2.6-0.1l-2.4,0.7L391.1,314.2z')
    path(fill='#7E3C64', d='M362.9,307.8l2.5,1l2.3,3.3L362.9,307.8z')
    path(fill='#631A51', d='M371.7,306.9l-8.8,0.9l2.5,1L371.7,306.9z')
    path(fill='#311A00', d='M435.7,323.6l6.8,1.3l-1.5-9.1L435.7,323.6z')
    path(fill='#412200', d='M433.3,318.6l2.4,5l5.3-7.8L433.3,318.6z')
    path(fill='#211100', d='M445.7,320.9l-3.2,4l-1.5-9.1L445.7,320.9z')
    path(fill='#100800', d='M446.4,317.8l-0.7,3.1l-4.7-5.1L446.4,317.8z')
    path(fill='#674E33', d='M433.3,318.6l0.5-3.4l7.2,0.6L433.3,318.6z')
    path(fill='#FFE7F0', d='M445.7,320.9l5.6,0.6l-4.9-3.7L445.7,320.9z')
    path(fill='#FFF3F7', d='M447.1,324.1l4.2-2.6l-5.6-0.6L447.1,324.1z')
    path(fill='#FFDCE8', d='M442.5,324.9l4.6-0.8l-1.4-3.2L442.5,324.9z')
    path(fill='#FFD0E1', d='M427.5,320.6l-2.3-1l8.6-4.4L427.5,320.6z')
    path(fill='#FFF3F7', d='M433.3,318.6l-5.8,2l6.3-5.4L433.3,318.6z')
    path(fill='#FFE7F0', d='M435.7,323.6l-8.2-3l5.8-2L435.7,323.6z')
    path(fill='#4C0438', d='M433.8,315.2l-11.1,4.1l2.5,0.3L433.8,315.2z')
    path(fill='#FFF3F7', d='M422.7,319.3l2.5,0.3l2.3,1L422.7,319.3z')
    path(fill='#4C0438', d='M454.4,320.9l-8-3.1l4.9,3.7L454.4,320.9z')
    path(fill='#6E1B47', d='M447.1,324.1l4.2-2.6l3.1-0.6L447.1,324.1z')
  g#lids
    path(fill='#C4808F', d='M386.1,314.8l0.9,5.6l4.1-6.2L386.1,314.8z')
    path(fill='#EAD9DD', d='M362.9,307.8l-3.4,1.4l4.4,12L362.9,307.8z')
    path(fill='#BF7784', d='M380.2,315.5l6.8,4.9l-0.9-5.6L380.2,315.5z')
    path(fill='#CA8D94', d='M377.1,322.4l3.1-6.9l6.8,4.9L377.1,322.4z')
    path(fill='#E6BBBE', d='M373.8,314.9l-9.9,6.3l3.8-9.1L373.8,314.9z')
    path(fill='#C4808F', d='M380.2,315.5l-3.1,6.9l-3.3-7.5L380.2,315.5z')
    path(fill='#E0AAAE', d='M363.9,321.2l13.2,1.2l-3.3-7.5L363.9,321.2z')
    path(fill='#ECCCCE', d='M367.7,312.1l-3.8,9.1l-1-13.4L367.7,312.1z')
    path(fill='#CA8D94', d='M377.9,307.3l-11.2-8.3l12.7,1.5L377.9,307.3z')
    path(fill='#C4808F', d='M383.4,309.2l-4-8.7l-1.5,6.8L383.4,309.2z')
    path(fill='#BF7784', d='M390.1,308.5l-6.7,0.7l-4-8.7L390.1,308.5z')
    path(fill='#E0AAAE', d='M366.7,299l5,7.9l6.2,0.4L366.7,299z')
    path(fill='#E6BBBE', d='M362.9,307.8l8.8-0.9l-5-7.9L362.9,307.8z')
    path(fill='#E0AAAE', d='M359.5,309.2l3.4-1.4l3.8-8.8L359.5,309.2z')
    path(fill='#B86B7D', d='M391.1,314.2l-7.7-5l6.7-0.7L391.1,314.2z')
    path(fill='#C57D8A', d='M427.5,320.6l-4.6,2.8l-0.2-4.1L427.5,320.6z')
    path(fill='#A85C73', d='M454.4,320.9l-3.8,11.6l6.5-10.1L454.4,320.9z')
    path(fill='#954659', d='M447.1,324.1l3.5,8.4l3.8-11.6L447.1,324.1z')
    path(fill='#CA8891', d='M422.9,323.4l12.8,0.2l-8.2-3L422.9,323.4z')
    path(fill='#E0AAAE', d='M436.4,330.6l-0.7-7l-12.8-0.2L436.4,330.6z')
    path(fill='#CA8D94', d='M442.5,324.9l-6.1,5.7l-0.7-7L442.5,324.9z')
    path(fill='#A35169', d='M450.6,332.5l-8.1-7.6l4.6-0.8L450.6,332.5z')
    path(fill='#A85C73', d='M436.4,330.6l14.2,1.9l-8.1-7.6L436.4,330.6z')
    path(fill='#E0AAAE', d='M440.1,308.6l-6.3,6.6l7.2,0.6L440.1,308.6z')
    path(fill='#CA8D94', d='M450.6,310.2l-10.5-1.6l0.9,7.2L450.6,310.2z')
    path(fill='#AC6378', d='M446.4,317.8l4.2-7.6l-9.6,5.6L446.4,317.8z')
    path(fill='#CA8891', d='M429.3,311.1l4.5,4.1l6.3-6.6L429.3,311.1z')
    path(fill='#A85C73', d='M454.4,320.9l-8-3.1l4.2-7.6L454.4,320.9z')
    path(fill='#A35169', d='M457.1,322.4l-2.7-1.5l-3.8-10.7L457.1,322.4z')
    path(fill='#C57D8A', d='M422.7,319.3l6.6-8.2l4.5,4.1L422.7,319.3z')
  g#cheeks
    path(fill='#E0AAAE', d='M363.9,321.2l-4.4-12l-0.3,21.5L363.9,321.2z')
    path(fill='#E0AAAE', d='M387.5,329l-10.4-6.6l-17.9,8.3L387.5,329z')
    path(fill='#C4808F', d='M363.9,321.2l-4.7,9.5l17.9-8.3L363.9,321.2z')
    path(fill='#ECCCCE', d='M387,320.4l0.5,8.6l3.6-14.8L387,320.4z')
    path(fill='#E6BBBE', d='M387.5,329l-10.4-6.6l9.9-2L387.5,329z')
    path(fill='#E0AAAE', d='M360,346.5l-13.5-2.3l17.8,33.7L360,346.5z')
    path(fill='#ECCCCE', d='M346.5,344.2l12.7-13.5l0.8,15.8L346.5,344.2z')
    path(fill='#EAD9DD', d='M347.8,322.3l-1.3,21.9l12.7-13.5L347.8,322.3z')
    path(fill='#E7D2DB', d='M352.9,299.5l6.3,31.2l-11.4-8.4L352.9,299.5z')
    path(fill='#D5B0BA', d='M359.5,309.2l-0.3,21.5l-6.3-31.2L359.5,309.2z')
    path(fill='#C4808F', d='M364.3,377.9l13.7-21l17.5,10.1L364.3,377.9z')
    path(fill='#B86B7D', d='M364.3,377.9l13.7-21l1.3-11.5L364.3,377.9z')
    path(fill='#CA8D94', d='M360,346.5l4.3,31.4l15-32.5L360,346.5z')
    path(fill='#E0AAAE', d='M387.5,329l-8.2,16.4l-19.3,1.1L387.5,329z')
    path(fill='#E6BBBE', d='M387.5,329L360,346.5l-0.8-15.8L387.5,329z')
    path(fill='#C4808F', d='M392.9,337.1l-5.4-8.1l-8.2,16.4L392.9,337.1z')
    path(fill='#A35169', d='M390.1,308.5l9.5-8.4l-8.5,14.1L390.1,308.5z')
    path(fill='#A85C73', d='M379.4,300.5l20.2-0.4l-9.5,8.4L379.4,300.5z')
    path(fill='#C4808F', d='M399.6,300.1l-8.5,14.1l6.9,2.5L399.6,300.1z')
    path(fill='#AC6378', d='M375.1,291.6l4.3,8.9l20.2-0.4L375.1,291.6z')
    path(fill='#CA8D94', d='M387.5,329l10.5-12.3l-5.1,20.4L387.5,329z')
    path(fill='#BF7784', d='M391.1,314.2l-3.6,14.8l10.5-12.3L391.1,314.2z')
    path(fill='#BF7784', d='M366.7,299l12.7,1.5l-4.3-8.9L366.7,299z')
    path(fill='#C4808F', d='M358.8,290.6l7.9,8.4l8.4-7.4L358.8,290.6z')
    path(fill='#CA8D94', d='M358.8,290.6l0.7,18.6l7.2-10.2L358.8,290.6z')
    path(fill='#EEDFE3', d='M352.9,299.5l0.4-5.6l5.5-3.3L352.9,299.5z')
    path(fill='#DDC0C8', d='M352.9,299.5l6.6,9.7l-0.7-18.6L352.9,299.5z')
    path(fill='#CA8D94', d='M457.1,322.4l-6.5,10.1l1.5,8.7L457.1,322.4z')
    path(fill='#AC6378', d='M469.3,360.4l-23.3-1l-11.3,40.1L469.3,360.4z')
    path(fill='#BF7784', d='M469.3,360.4l-17.2-19.2l-6.1,18.2L469.3,360.4z')
    path(fill='#B86B7D', d='M471.5,340.8l-19.4,0.4l17.2,19.2L471.5,340.8z')
    path(fill='#C57D8A', d='M474,321.3l-2.5,19.5l-19.4,0.4L474,321.3z')
    path(fill='#CA8891', d='M457.1,322.4l-5,18.8l21.9-19.9L457.1,322.4z')
    path(fill='#AC6378', d='M457.1,322.4l16.9-1.1l-9.3-15.9L457.1,322.4z')
    path(fill='#8F4353', d='M436,380.4l-13.8-21.6l-14.6,7.8L436,380.4z')
    path(fill='#7F344C', d='M422.8,348.9l13.2,31.5l-13.8-21.6L422.8,348.9z')
    path(fill='#A35169', d='M446,359.4l-23.2-10.5l13.2,31.5L446,359.4z')
    path(fill='#A85C73', d='M446,359.4l-11.3,40.1l1.3-19.1L446,359.4z')
    path(fill='#954659', d='M418.3,329l4.5,19.9l23.2,10.5L418.3,329z')
    path(fill='#C4808F', d='M418.3,329l27.7,30.4l6.1-18.2L418.3,329z')
    path(fill='#CA8D94', d='M452.1,341.2l-15.7-10.6l-18.1-1.6L452.1,341.2z')
    path(fill='#E0AAAE', d='M450.6,332.5l1.5,8.7l-15.7-10.6L450.6,332.5z')
    path(fill='#B86B7D', d='M422.9,323.4l-4.6,5.6l4.4-9.7L422.9,323.4z')
    path(fill='#BF7784', d='M418.3,329l18.1,1.6l-13.5-7.2L418.3,329z')
    path(fill='#9C4A59', d='M422.7,319.3l-4.4,9.7l0.4-27L422.7,319.3z')
    path(fill='#A85C73', d='M418.3,329l0.4-27h-10.6L418.3,329z')
    path(fill='#B86B7D', d='M408.1,302l10.2,27l-4.8,10.9L408.1,302z')
    path(fill='#A85C73', d='M418.3,329l-4.8,10.9l9.3,9L418.3,329z')
    path(fill='#954659', d='M429.3,311.1l-10.6-9.1l4,17.3L429.3,311.1z')
    path(fill='#A35169', d='M440.1,308.6l-21.4-6.6l10.6,9.1L440.1,308.6z')
    path(fill='#AC6378', d='M445.3,298.6l-5.2,10l-21.4-6.6L445.3,298.6z')
    path(fill='#A85C73', d='M450.6,310.2l-5.3-11.6l-5.2,10L450.6,310.2z')
    path(fill='#A35169', d='M464.7,305.4l-14.1,4.8l-5.3-11.6L464.7,305.4z')
    path(fill='#954659', d='M457.1,322.4l7.6-17l-14.1,4.8L457.1,322.4z')
  g#nose
    path(fill='#570739', d='M422.2,358.8l-14.6,7.8l4.7-6.9L422.2,358.8z')
    path(fill='#590B3D', d='M395.5,367L378,356.9l11.3,1.3L395.5,367z')
    path(fill='#954659', d='M412.3,359.7l-9.9-4l-6.9,11.3L412.3,359.7z')
    path(fill='#7F344C', d='M407.6,366.6l-12.1,0.4l16.8-7.3L407.6,366.6z')
    path(fill='#A85C73', d='M395.5,367l-6.2-8.8l13.1-2.5L395.5,367z')
    path(fill='#E0AAAE', d='M389.3,358.2l3.6-21.1l-13.6,8.3L389.3,358.2z')
    path(fill='#E6BBBE', d='M378,356.9l1.3-11.5l10,12.8L378,356.9z')
    path(fill='#CA9BA9', d='M413.5,339.9l-1.2,19.8l9.9-0.9L413.5,339.9z')
    path(fill='#BD8293', d='M422.8,348.9l-0.6,9.9l-8.7-18.9L422.8,348.9z')
    path(fill='#CA8D94', d='M392.9,337.1l9.5,18.6l-13.1,2.5L392.9,337.1z')
    path(fill='#99586B', d='M412.3,359.7l-4.2-57.7l-5.7,53.7L412.3,359.7z')
    path(fill='#954659', d='M413.5,339.9l-5.4-37.9l4.2,57.7L413.5,339.9z')
    path(fill='#E0AAAE', d='M392.9,337.1l5.1-20.4l4.4,39L392.9,337.1z')
    path(fill='#E6BBBE', d='M398,316.7l10.1-14.7l-5.7,53.7L398,316.7z')
    path(fill='#E0AAAE', d='M398,316.7l1.6-16.6l8.5,1.9L398,316.7z')
  g#lips
    path(fill='#570E27', d='M421.1,385.2l-9.9-0.2l-11.5,2.7L421.1,385.2z')
    path(fill='#954659', d='M399.7,387.7l-24.3-4.2l12.6-1.3L399.7,387.7z')
    path(fill='#A85C73', d='M429.7,382.6l-21.6-3.8l13,6.4L429.7,382.6z')
    path(fill='#BF7784', d='M411.2,385l9.9,0.2l-13-6.4L411.2,385z')
    path(fill='#E6BBBE', d='M388,382.2l-12.6,1.3l16.3-6.8L388,382.2z')
    path(fill='#C4808F', d='M399.7,387.7l0.8-6.8l-8.8-4.2L399.7,387.7z')
    path(fill='#E0AAAE', d='M408.1,378.8l-8.4,8.9l0.8-6.8L408.1,378.8z')
    path(fill='#E6BBBE', d='M411.2,385l-11.5,2.7l8.4-8.9L411.2,385z')
    path(fill='#E0AAAE', d='M399.7,387.7l-11.7-5.5l3.7-5.5L399.7,387.7z')
    path(fill='#E0AAAE', d='M368.5,380.9l6.9,2.6l16.3-6.8L368.5,380.9z')
    path(fill='#7F344C', d='M411.8,396.4l17.9-13.8l-8.6,2.6L411.8,396.4z')
    path(fill='#C4808F', d='M398.9,392.6l-15.2,2.3l28.1,1.5L398.9,392.6z')
    path(fill='#C4808F', d='M375.4,383.5l-6.9-2.6l15.2,14L375.4,383.5z')
    path(fill='#C4808F', d='M398.9,392.6l22.2-7.4l-9.3,11.2L398.9,392.6z')
    path(fill='#EAD9DD', d='M375.4,383.5l23.5,9.1l-15.2,2.3L375.4,383.5z')
    path(fill='#E0AAAE', d='M398.9,392.6l0.8-4.9l21.4-2.5L398.9,392.6z')
    path(fill='#E6BBBE', d='M375.4,383.5l23.5,9.1l0.8-4.9L375.4,383.5z')
  g#chin
    path(fill='#E0AAAE', d='M368.5,380.9l3.378,30.4l11.822-16.4L368.5,380.9z')
    path(fill='#8F4353', d='M429.7,382.6l-5.1,30.4l-12.8-16.6L429.7,382.6z')
    path(fill='#B86B7D', d='M371.878,411.3l27.422-0.6l-8.5-11.4L371.878,411.3z')
    path(fill='#7F344C', d='M424.6,413l-12.8-16.6l-12.5,14.3L424.6,413z')
    path(fill='#CA8D94', d='M383.7,394.9l7.1,4.4l-18.922,12L383.7,394.9z')
    path(fill='#954659', d='M399.9,423.7l-0.6-13l25.3,2.3L399.9,423.7z')
    path(fill='#A85C73', d='M379.4,417.2l19.9-6.5l0.6,13L379.4,417.2z')
    path(fill='#C4808F', d='M371.878,411.3l7.522,5.9l19.9-6.5L371.878,411.3z')
  g#beard
    path(fill='#A35169', d='M363.367,411.7l-5.492-17.4l4.625-0.7L363.367,411.7z')
    path(fill='#A85C73', d='M357.875,394.3l6.425-16.4l-1.8,15.7L357.875,394.3z')
    path(fill='#C4808F', d='M346.5,344.2l17.8,33.7l-6.425,16.4L346.5,344.2z')
    path(fill='#742C4B', d='M451,396.3l-16.3,3.2l-4.4,20.8L451,396.3z')
    path(fill='#7F3D55', d='M469.3,360.4L451,396.3l-16.3,3.2L469.3,360.4z')
    path(fill='#500F30', d='M419.7,433.5l-26.4,7.4l6.6-17.2L419.7,433.5z')
    path(fill='#590D3B', d='M424.6,413l-4.9,20.5l-19.8-9.8L424.6,413z')
    path(fill='#67163F', d='M393.3,440.9l-13.9-23.7l20.5,6.5L393.3,440.9z')
    path(fill='#500F31', d='M370.2,426.9l9.2-9.7l13.9,23.7L370.2,426.9z')
    path(fill='#5A0D3E', d='M371.878,411.3l-1.678,15.6l9.2-9.7L371.878,411.3z')
    path(fill='#742C4B', d='M424.6,413l11.4-32.6l-6.3,2.2L424.6,413z')
    path(fill='#793752', d='M436,380.4l-1.3,19.1L424.6,413L436,380.4z')
    path(fill='#631E3D', d='M434.7,399.5l-4.4,20.8l-5.7-7.3L434.7,399.5z')
    path(fill='#5C1038', d='M430.3,420.3l-10.6,13.2l4.9-20.5L430.3,420.3z')
    path(fill='#6A1F50', d='M371.878,411.3l-7.578-33.4l4.2,3L371.878,411.3z')
    path(fill='#76415F', d='M371.878,411.3l-8.511,0.4l6.833,15.2L371.878,411.3z')
    path(fill='#824058', d='M364.3,377.9l-1.8,15.7l9.378,17.7L364.3,377.9z')
    path(fill='#7E3C64', d='M362.5,393.6l0.867,18.1l8.511-0.4L362.5,393.6z')
    path(fill='#722E55', d='M395.5,367l-3.8,9.7l-27.4,1.2L395.5,367z')
    path(fill='#5A0D3E', d='M400.5,380.9l-5-13.9l-3.8,9.7L400.5,380.9z')
    path(fill='#82415A', d='M364.3,377.9l4.2,3l23.2-4.2L364.3,377.9z')
    path(fill='#500F30', d='M408.1,378.8l-0.5-12.2l28.4,13.8L408.1,378.8z')
    path(fill='#67163F', d='M408.1,378.8l-7.6,2.1l7.1-14.3L408.1,378.8z')
    path(fill='#590D3B', d='M436,380.4l-6.3,2.2l-21.6-3.8L436,380.4z')
    path(fill='#500F31', d='M400.5,380.9l7.1-14.3l-12.1,0.4L400.5,380.9z')
    path(fill='#5C1341', d='M390.8,399.3l21-2.9l-12.5,14.3L390.8,399.3z')
    path(fill='#A35169', d='M411.8,396.4l-21,2.9l-7.1-4.4L411.8,396.4z')
  g#neck
    path(fill='#570E27', d='M457.4,424.1l-6.4-27.8l-20.7,24L457.4,424.1z')
    path(fill='#570D40', d='M435.4,457.3l-5.1-37l27.1,3.8L435.4,457.3z')
    path(fill='#6E1B47', d='M419.7,433.5l15.7,23.8l-5.1-37L419.7,433.5z')
    path(fill='#954659', d='M386.8,474.1l48.6-16.8l-15.7-23.8L386.8,474.1z')
    path(fill='#A35169', d='M393.3,440.9l-6.5,33.2l32.9-40.6L393.3,440.9z')
    path(fill='#AC6378', d='M386.8,474.1l-16.6-47.2l23.1,14L386.8,474.1z')
    path(fill='#C4808F', d='M351.9,449.4l18.3-22.5l16.6,47.2L351.9,449.4z')
    path(fill='#E0AAAE', d='M363.367,411.7L351.9,449.4l18.3-22.5L363.367,411.7z')
    path(fill='#CA8D94', d='M343.7,420.2l19.667-8.5L351.9,449.4L343.7,420.2z')
    path(fill='#E0AAAE', d='M357.875,394.3L343.7,420.2l19.667-8.5L357.875,394.3z')
  g#collar
    path(fill='#793F71', d='M343.7,420.2l-11.6,8.5l19.8,20.7L343.7,420.2z')
    path(fill='#723368', d='M342.6,460.6l9.3-11.2l-19.8-20.7L342.6,460.6z')
    path(fill='#682764', d='M386.3,489l-43.7-28.4l9.3-11.2L386.3,489z')
    path(fill='#6C2559', d='M386.3,489l-34.4-39.6l34.9,24.7L386.3,489z')
    path(fill='#661D51', d='M386.3,489l0.5-14.9l55.4-4.5L386.3,489z')
    path(fill='#59153C', d='M386.8,474.1l55.4-4.5l-6.8-12.3L386.8,474.1z')
    path(fill='#500F31', d='M442.2,469.6l23.5-37.9l-30.3,25.6L442.2,469.6z')
    path(fill='#570E27', d='M457.4,424.1l8.3,7.6l-30.3,25.6L457.4,424.1z')
  g#shirt
    path(fill='#793F71', d='M264.2,451.8l67.9-23.1l10.5,31.9L264.2,451.8z')
    path(fill='#723368', d='M264.2,451.8L222,502.425L342.6,460.6L264.2,451.8z')
    path(fill='#733767', d='M222,502.425l80.6,38.275l40-80.1L222,502.425z')
    path(fill='#681F5A', d='M302.6,540.7l40-80.1l43.7,28.4L302.6,540.7z')
    path(fill='#661D51', d='M302.6,540.7l160.7,10.5l-77-62.2L302.6,540.7z')
    path(fill='#500F30', d='M442.2,469.6l21.1,81.6l-77-62.2L442.2,469.6z')
    path(fill='#570D40', d='M576.9,520.7l-113.6,30.5l-21.1-81.6L576.9,520.7z')
    path(fill='#570F23', d='M529.7,469.8l47.2,50.9l-134.7-51.1L529.7,469.8z')
    path(fill='#570E27', d='M442.2,469.6l87.5,0.2l-64-38.1L442.2,469.6z')
  g#edges
    path(fill='rgba(255,255,255,.1)', d='M200,570l35-32l-13-35.575L200,570z')
    path(fill='rgba(255,255,255,.1)', d='M302.6,540.7L235,538l-13-35.575L302.6,540.7z')
    path(fill='rgba(255,255,255,.1)', d='M248,556l112,44l-57.4-59.3L248,556z')
    path(fill='rgba(255,255,255,.1)', d='M463.3,551.2l-79.8,30.9l-80.9-41.4L463.3,551.2z')
    path(fill='rgba(255,255,255,.1)', d='M538,560l-102,28l27.3-36.8L538,560z')
    path(fill='rgba(255,255,255,.1)', d='M463.3,551.2L538,560l38.9-39.3L463.3,551.2z')
    path(fill='rgba(255,255,255,.1)', d='M600,600l-23.1-79.3L538,560L600,600z')
            
          
!
            
              // set times
$t1 = 6s
$t2 = 3s

// basics 
html, body,.avatar
  position: absolute
  width: 100%
  height: 100%

// pretty blue background
body
  background: linear-gradient(115deg, darkturquoise, midnightblue) no-repeat fixed

// svg and paths properties
.avatar
  z-index: 800
  path
    stroke: rgba(225,175,255,1)
    stroke-width: .15
    transform-origin: center center
    transition: all $t1 ease
    transform: translate(0)

// animate paths in
.avatar path:nth-of-type(4n+1)
  animation: p1 $t2 ease 1
.avatar path:nth-of-type(4n+2)
  animation: p2 $t2 ease 1
.avatar path:nth-of-type(4n+3)
  animation: p3 $t2 ease 1
.avatar path:nth-of-type(4n+4)
  animation: p4 $t2 ease 1
@keyframes p1
  0%
    transform: translate(-300%, -700%) rotate(520deg) translateZ(0)
  100%
    transform: translate(0)
@keyframes p2
  0%
    transform: translate(400%, -900%) rotate(850deg) translateZ(0)
  100%
    transform: translate(0)
@keyframes p3
  0%
    transform: translate(500%, 900%) rotate(325deg) translateZ(0)
  100%
    transform: translate(0)
@keyframes p4
  0%
    transform: translate(-500%, 900%) rotate(748deg) translateZ(0)
  100%
    transform: translate(0)

// add invisible hover element
.hover
  position: absolute
  width: 40%
  height: 40%vw
  top: 50%
  left: 30%
  margin-top: -20%vw
  border-radius: 50%
  cursor: pointer
  z-index: 1000
  background rgba(0,0,0,0)
  animation:waitforit 0 ease-in $t2 1 forwards

// wait for animation then add hover element
@keyframes waitforit
  0%
    display: none
  100%
    display: block

// animate paths out
.hover:hover + .avatar path:nth-of-type(4n+1)
  transform: translate(800%, 400%) rotate(-690deg) translateZ(0)
.hover:hover + .avatar path:nth-of-type(4n+2) 
  transform: translate(-700%, 600%) rotate(-720deg) translateZ(0)
.hover:hover + .avatar path:nth-of-type(4n+3)
  transform: translate(-900%, -500%) rotate(-820deg) translateZ(0)
.hover:hover + .avatar path:nth-of-type(4n+4)
  transform: translate(700%, -800%) rotate(-950deg) translateZ(0)
            
          
!
            
              
/*
transition: delay | duration | property | timing-function
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console