Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div></div>
              
            
!

CSS

              
                body {
  --outer-circle: #84575e;
  --inner-circle: #af747d;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle, var(--inner-circle) 15%, var(--outer-circle) 35%);
}

div {
  margin-right: 55px;
  margin-top: -115px;
  width: 350px;
  height: 470px;
  background-repeat: no-repeat;  
  /* colors */
  --adas-hair: #2f2014;
  --adas-top-lip: #ac3c41;
  --adas-bottom-lip: #bf5455;
  --adas-nose: #cfa292;
  --eye-white: #efebe9;
  --eye-iris: #2f2014;
  --eye-liner: transparent;
  --eye-blink: #d8ba2e;
  --eye-shadow: #dbbeb0;
  --eye-liner-close: #130a0d;


  background-image:/*adas blink*/radial-gradient(ellipse, var(--eye-blink) 8px, transparent 9px), radial-gradient(ellipse, var(--eye-blink) 8px, transparent 9px),/**/radial-gradient(rgba(207, 162, 146, 0.2) 1px, transparent 5px),/*eye liner close*/radial-gradient(ellipse, var(--eye-liner-close) 9px, transparent 10px),/*adas left eye*/radial-gradient(circle, rgba(239, 235, 233, .4) .5px, transparent 1px), radial-gradient(circle, var(--eye-white) 1px, transparent 1.5px), radial-gradient(circle, var(--eye-iris) 4px, transparent 5px),/*adas left eye*/radial-gradient(ellipse, var(--eye-white) 8px, transparent 9px),/*adas left eyeliner*/radial-gradient(ellipse, var(--eye-liner) 9px, transparent 10px), radial-gradient(ellipse, var(--eye-shadow) 9px, transparent 10px), /*eye liner close*/radial-gradient(ellipse, var(--eye-liner-close) 9px, transparent 10px), /*adas left eye*/radial-gradient(circle, rgba(239, 235, 233, .4) .5px, transparent 1px), radial-gradient(circle, #efebe9 1px, transparent 1.5px), radial-gradient(circle, var(--eye-iris) 4px, transparent 5px),/*adas left eye*/radial-gradient(ellipse, var(--eye-white) 8px, transparent 9px),/*adas left eyeliner*/radial-gradient(ellipse, var(--eye-liner) 9px, transparent 10px), radial-gradient(ellipse, var(--eye-shadow) 9px, transparent 10px), /*adas blush*/radial-gradient(circle, #daac97 2px, #dbbeb0 12px), radial-gradient(circle, #daac97 2px, #dbbeb0 12px),/*flower left top*/radial-gradient(circle, #d9c04d 3px, transparent 4px), radial-gradient(circle, #d9c04d 3px, transparent 4px), radial-gradient(circle, #d9c04d 3px, transparent 4px), radial-gradient(circle, #d9c04d 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 1px, transparent 3px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #bb8102 3px, transparent 3px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #bb8102 2px, transparent 2px), radial-gradient(circle, #bb8102 2px, transparent 2px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #d9c04d 5px, transparent 5px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 3px), radial-gradient(circle, #bb8102 3px, transparent 3px), radial-gradient(circle, #bb8102 5px, transparent 5px), radial-gradient(circle, #bb8102 4px, transparent 4px), radial-gradient(circle, #bb8102 4px, transparent 4px), radial-gradient(circle, #d9c04d 10px, transparent 10px), /*flower left bottom*/radial-gradient(circle, #d9c04d 2px, transparent 3px), radial-gradient(circle, #d9c04d 2px, transparent 3px), radial-gradient(circle, #bb8102 2px, transparent 3px), radial-gradient(circle, #bb8102 2px, transparent 3px), radial-gradient(circle, #d9c04d 3px, transparent 4px), radial-gradient(circle, #d9c04d 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #d9c04d 5px, transparent 5px), radial-gradient(circle, #d9c04d 5px, transparent 5px), radial-gradient(circle, #d9c04d 5px, transparent 5px), radial-gradient(circle, #d9c04d 4px, transparent 5px), radial-gradient(circle, #d9c04d 5px, transparent 5px), radial-gradient(circle, #d9c04d 4px, transparent 5px), radial-gradient(circle, #bb8102 5px, transparent 6px), radial-gradient(circle, #bb8102 5px, transparent 6px), radial-gradient(circle, #bb8102 5px, transparent 6px), radial-gradient(circle, #bb8102 5px, transparent 6px), radial-gradient(circle, #bb8102 5px, transparent 6px), radial-gradient(circle, #bb8102 4px, transparent 6px), radial-gradient(circle, #bb8102 2px, transparent 5px), radial-gradient(circle, #d9c04d 14px, transparent 14px),/*flower right*/radial-gradient(circle, #d9c04d 2px, transparent 2px), radial-gradient(circle, #d9c04d 2px, transparent 2px), radial-gradient(circle, #bb8102 2px, transparent 2px), radial-gradient(circle, #bb8102 2px, transparent 2px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #d9c04d 3px, transparent 3px), radial-gradient(circle, #bb8102 3px, transparent 3px), radial-gradient(circle, #bb8102 3px, transparent 3px), radial-gradient(circle, #bb8102 3px, transparent 3px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #d9c04d 4px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #bb8102 3px, transparent 4px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #d9c04d 6px, transparent 6px), radial-gradient(circle, #bb8102 6px, transparent 6px), radial-gradient(circle, #bb8102 6px, transparent 7px), radial-gradient(circle, #bb8102 6px, transparent 7px), radial-gradient(circle, #bb8102 6px, transparent 7px), radial-gradient(circle, #bb8102 6px, transparent 7px), radial-gradient(circle, #bb8102 6px, transparent 7px), radial-gradient(circle, #bb8102 6px, transparent 7px),radial-gradient(circle, #bb8102 3px, transparent 6px), radial-gradient(circle, #d9c04d 16px, transparent 16px), /*adas headband */radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 45%, #d9c04d 45%, #d9c04d 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 60%, #d9c04d 60%, #d9c04d 65%, rgba(0, 0, 0, 0) 65%), /*adas nose */radial-gradient(ellipse, var(--adas-nose) 4px, transparent 4px), /*adas top lip */radial-gradient(ellipse, var(--adas-top-lip) 16px, transparent 16px), /*adas bottom lip */ radial-gradient(ellipse, var(--adas-bottom-lip) 11px, transparent 11px),/* adas bangs */ radial-gradient(ellipse, #4e3521 2px, var(--adas-hair) 45px, transparent 45px), /* adas face */ radial-gradient(ellipse, #dbbeb0 43px, transparent 43px), /* adas hair */ radial-gradient(ellipse, #4e3521 45px, var(--adas-hair) 83px, transparent 5px), radial-gradient(ellipse, var(--adas-hair) 65px, transparent 65px), /*adas neck */linear-gradient(#caab9c 25px, transparent 25px), radial-gradient(#caab9c 23px, transparent 23px),/*adas neck lace*/radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px), radial-gradient(#94c0af 8px, transparent 8px),/*adas dress */linear-gradient(#135c63 80px, transparent 80px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px), radial-gradient(#135c63 30px, transparent 30px);
  
  background-size: 26px 13px, 26px 13px,/**/3px 12px, /*eye liner close*/29px 13px, /*adas left eye*/3px 3px, 5px 5px, 10px 9px, /*adas left eye*/25px 12px, /*adas left eyeliner*/33px 11px, 33px 10px, /*eye liner close*/29px 13px, /*adas left eye*/3px 3px, 5px 5px, 10px 9px, /*adas left eye*/25px 12px, /*adas left eyeliner*/33px 11px, 33px 10px,/*adas blush*/ 24px 24px, 24px 24px, /*left flower top*/8px 8px, 9px 9px, 8px 8px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 12px 12px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 4px 4px, 4px 4px, 6px 6px, 8px 8px, 10px 10px, 8px 8px, 8px 8px, 6px 6px, 6px 6px, 10px 10px, 8px 8px, 8px 8px, 20px 20px, /*left flower bottom*/6px 6px, 6px 6px, 6px 6px, 6px 6px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 10px 10px, 30px 30px,/*right flower*/4px 4px, 4px 4px, 4px 4px, 4px 4px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 13px 13px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px, 12px 12px, 35px 35px, /*adas headband */ 105px 70px,/*adas nose */8px 3px, /*adas top lip */33px 6px, /*adas bottom lip */ 22px 11px, /* adas bangs */ 160px 105px,/* adas face */ 110px 160px, /* adas hair */ 200px 131px, 200px 110px, /*adas neck */ 46px 30px, 46px 46px, /*adas lace neck*/16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px,/*adas dress*/130px 145px, 60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px;
  
  background-position:  /**/168px 244px, 207px 244px, 199px 263px, /*eye liner close*/207px 245px, /*adas left eyes*/219px 248px, 216px 246px, 215px 246px, /*adas left eye*/208px 244px, /*adas left eyeliner*/206px 243px, 207px 239px, /*eye liner close*/166px 245px,/*adas left eyes*/180px 248px, 177px 246px, 176px 246px, /*adas left eye*/169px 244px, /*adas left eyeliner*/163px 243px, 162px 239px, /*adas blush*/214px 265px, 162px 265px, /*left flower top*/160px 199px, 154px 190px, 147px 196px, 150px 203px, 150px 205px, 161px 198px, 144px 194px, 154px 187px, 154px 199px, 150px 193px, 150px 192px, 154px 200px, 148px 199px, 149px 202px, 155px 204px, 162px 197px, 158px 202px, 146px 199px, 149px 191px, 153px 199px, 159px 206px, 164px 197px, 145px 200px, 148px 190px, 153px 197px, 148px 191px, /*left flower bottom*/154px 217px, 157px 224px, 158px 224px, 155px 216px, 147px 228px, 139px 222px, 147px 229px, 138px 223px, 147px 227px, 156px 220px, 154px 210px, 137px 210px, 135px 221px, 141px 227px, 140px 228px, 149px 229px, 158px 219px, 156px 209px, 136px 209px, 134px 219px, 147px 219px, 137px 209px, /*right flower*/242px 226px, 246px 211px, 242px 227px, 246px 210px, 243px 207px, 253px 220px, 236px 220px, 242px 206px, 255px 220px, 235px 221px, 235px 212px, 250px 211px, 240px 225px, 248px 224px, 249px 226px, 239px 227px, 252px 209px, 233px 211px, 239px 203px, 230px 207px, 229px 216px, 236px 224px, 246px 224px, 252px 215px, 249px 206px, 250px 204px, 253px 212px, 248px 224px, 236px 225px, 228px 217px, 229px 205px, 240px 200px, 241px 215px, 230px 203px, /*adas headband */148px 165px,/*adas nose */196px 280px, /*adas top lip */184px 295px, /*adas bottom lip */189px 295px, /*adas bangs */ 120px 140px, /* adas face */ 145px 185px, /* adas hair */ 100px 195px, 100px 162px, /*adas neck*/ 177px 312px, 177px 316px, /*adas lace*/172px 329px, 173px 338px, 177px 345px, 185px 349px, 196px 349px, 205px 345px,210px 337px, 211px 327px, /*adas dress*/135px 330px, 110px 330px, 92px 350px, 231px 330px, 246px 350px, 91px 365px, 122px 367px, 248px 365px, 220px 367px;
}

div::before {
  content: '';
  display: block;
  margin-top: 240px;
  margin-left: 172px;
  background: transparent;
  width: 21px;
  height: 21px;
  border-radius: 0 65% 0 80%;
  transform: rotate(-45deg);
  position: absolute;  
  box-shadow: calc(-22px/5.5) calc(-22px/1.71) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/5.5) calc(-22px/1.83) 0 calc(-22px/2.6) #130a0d, calc(-22px/3.7) calc(-22px/1.71) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/3.7) calc(-22px/1.83) 0 calc(-22px/2.6) #130a0d, calc(-22px/2.9) calc(-22px/1.73) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/2.9) calc(-22px/1.85) 0 calc(-22px/2.6) #130a0d, calc(-22px/2.4) calc(-22px/1.75) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/2.4) calc(-22px/1.85) 0 calc(-22px/2.6) #130a0d, calc(-22px/1.65) calc(-22px/6) 0 calc(-22px/3) #dbbeb0, calc(19px/5) calc(-20px/2.5) 0 calc(-11px/8) #dbbeb0, calc(19px/2.4) calc(-20px/1.7) 0 calc(-18px/4.5) #2f2014;
}

div::after {
  content: '';
  display: block;
  margin-top: 240px;
  margin-left: 207px;
  background: transparent;
  width: 21px;
  height: 21px;
  border-radius: 0 65% 0 80%;
  transform: scaleX(-1) rotate(-45deg);
  position: absolute;  
  box-shadow: calc(-22px/5.5) calc(-22px/1.71) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/5.5) calc(-22px/1.83) 0 calc(-22px/2.6) #130a0d, calc(-22px/3.7) calc(-22px/1.71) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/3.7) calc(-22px/1.83) 0 calc(-22px/2.6) #130a0d, calc(-22px/2.9) calc(-22px/1.73) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/2.9) calc(-22px/1.85) 0 calc(-22px/2.6) #130a0d, calc(-22px/2.4) calc(-22px/1.75) 0 calc(-22px/2.41) #dbbeb0, calc(-22px/2.4) calc(-22px/1.85) 0 calc(-22px/2.6) #130a0d, calc(-22px/1.65) calc(-22px/6) 0 calc(-22px/3) #dbbeb0, calc(-22px/2.4) calc(-22px/1.85) 0 calc(-22px/2.6) #130a0d, calc(-22px/1.65) calc(-22px/6) 0 calc(-22px/3) #dbbeb0, calc(19px/5) calc(-20px/2.5) 0 calc(-11px/8) #dbbeb0, calc(19px/2.4) calc(-20px/1.7) 0 calc(-18px/4.5) #2f2014; 
}


              
            
!

JS

              
                function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {

       callback();

       if (++x === repetitions) {
           window.clearInterval(intervalID);
       }
    }, delay);
}

setIntervalX(function () {
var element = document.querySelector('div');
var eyeLid = element.style.getPropertyValue('--eye-blink');
var eyeLiner = element.style.getPropertyValue('--eye-liner');
var eyeShadow = element.style.getPropertyValue('--eye-shadow');
var eyeLinerClose = element.style.getPropertyValue('--eye-liner-close');
var eyeShut = eyeLid === '#d8ba2e' && eyeLiner === '#d8ba2e' && eyeShadow === 'transparent' && eyeLinerClose === '#130a0d';
  
if (eyeShut) {
  element.style.setProperty('--eye-blink', 'transparent');
  element.style.setProperty('--eye-liner', '#130a0d');
  element.style.setProperty('--eye-shadow', '#d8ba2e');
  element.style.setProperty('--eye-liner-close', 'transparent'); 
} else {
  element.style.setProperty('--eye-blink', '#d8ba2e');
  element.style.setProperty('--eye-liner', '#d8ba2e'); 
  element.style.setProperty('--eye-shadow', 'transparent');
  element.style.setProperty('--eye-liner-close', '#130a0d'); 
}
}, 1000, 6);




              
            
!
999px

Console