Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 class="grid">
<svg id ="lill"  viewBox="0 0 572 648" fill="none" xmlns="http://www.w3.org/2000/svg">
    <ellipse class= "eye" cx="377" cy="237" rx="12" ry="11" fill="var(--color-eye)" stroke="var(--color-lill)" stroke-width="0.5"  opacity="0"></ellipse>
    <ellipse class= "eye" cx="479" cy="247" rx="12" ry="11" fill="var(--color-eye)" stroke="var(--color-lill)" stroke-width="0.5"  opacity="0"></ellipse>
    <path d="M276 350 L347 432 L395 444 L435 432 L455 396 L483 341 L501 285 L495 258 L511 228 L503 153" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M426 217 L424 199 L381 187 L337 199 L365 198 L392 197 L426 217Z" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M483 204 L507 204 L508 218 L491 212 L465 221 L468 210Z" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M457 227 L452 248 L460 288 L465 316  C465 326 456 327 453 328 C449 327 444 326 436 320 L426 321 C420 325 414 322 412 320 L416 305" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M382 371 L410 364 L424 364 L432 369 L451 367 L454 376 L382 371" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M382 371 L413 389 L438 391 L454 376" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M407 444 L397 469 L400 498 L417 527 M417 606 L266 616 L236 572" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M346 236 L362 249 L405 248 L396 230 L386 226 L368 223 L353 229 L346 236Z" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M456 248 L465 239 L478 234 L500 242 L495 258 L474 259 L463 255 L456 248Z" stroke="var(--color-lill)" stroke-width="5"/>
    <path d="M3 640 C8 612 0 584 5 557 C17 532 33 509 35 481 C38 465 65 465 66 448 C67 437 38 395 39 384 C43 356 73 365 81 338 C96 306 89 252 119 233 C149 207 152 166 166 131 C182 97 201 63 235 44 C261 27 290 13 320 7 C349 0 379 4 409 3" stroke="var(--color-lill)" stroke-width="7"/>
    <path d="M563 600 C577 581 557 556 544 542 C518 512 530 512 526 490 C515 459 531 411 540 382 C541 353 536 323 543 293 C545 270 550 248 557 225 C565 205 562 184 559 164 C558 141 546 123 525 114 C506 92 504 62 481 43 C467 24 439 15 420 3" stroke="var(--color-lill)" stroke-width="7"/>
    <path d="M414 33 C414 33 439 33 438 55 C440 74 458 65 465 76 C475 95 489 112 504 127 C514 148 517 174 520 197 C524 224 506 247 508 274 C515 299 505 322 497 345 C485 368 482 395 461 413 C439 432 433 462 426 488 C421 512 418 538 425 562 C433 583 436 605 439 628" stroke="var(--color-lill)" stroke-width="7"/>
    <path d="M425 70 C351 84 317 150 309 168 C296 184 281 198 281 220 C275 252 279 284 278 317 C279 340 278 366 262 385 C244 406 227 427 229 457 C231 481 224 504 216 527 C219 551 211 575 210 600 C206 614 215 638 197 644" stroke="var(--color-lill)" stroke-width="7"/>
    </svg> 
  <div class = text-area>
  <h1 id ="side">Welcome to the ligth side!</h1>
    <h3> We have  cookies </h3>
  </div>
<div class= "container">
  
    <div class="toggle-container">
     <p> Light / Dark mode</p>
    <input type="checkbox" id = "switch" name = "theme"/>
    <label for="switch">Toggle</label>
      <h2 id="citat">Never underestimate an old greyhaired lady</h2>
    </div>
   </div>
 </div>




              
            
!

CSS

              
                html{
    height: 100%;
    font-family: sans-serif;
    display:grid;
    align-items:center;
    justify-items:center;
  
    
    --bg: #FFF4E3;
    --bg-box: #FFCDAB;
    --color-headings:#3F3B3B;
    --color-text: #575151;
    --color-lill: #807777;
    --color-eye:#24543C;
  }
html[data-theme="dark"]{
    --bg: #575151;
    --bg-box: #3F3B3B;
    --color-headings:#FFFFFF;
    --color-text: #FFF4E3;
    --color-lill: #FFFFFF;
    --color-eye:#BADA55;
}
  body {
    background-color: var(--bg);
    }
.grid{
  display:grid;
    grid-template-columns: 40% 5% auto;
    grid-template-rows:auto auto;
    grid-template-areas:
    "text-area  text-area text-area"
    "lill container container "
  }
.container{
  grid-area:container;
  background-color:var(--bg-box);
  margin:1em 1em;
  padding:2em;
  border-radius: 15px;
  display:grid;
}
.text-area{
  grid-area:text-area;
  justify-self:center;
}
.toggle-container{
  grid-area:switch;
}
h1{
  font-size: 2.4em;
  color:var(--color-headings);
}

#citat{
  position: relative;
  font-size: 1em;
}
#citat::before{
  position: absolute;
  left: -0.6em;
  content: open-quote;
  font-size: 2em;
  margin-bottom: 0;
}
#citat::after{
  position: absolute;
  right: 0.8em;
  
  content: close-quote;
  
  font-size: 2em;
}
h2, h3, p{
  color: var(--color-text);
  line-height: 1.4em;
}
input[type=checkbox]{
  height:0;
  width:0;
  visibility:hidden;
}
label{
  cursor:pointer;
  text-indent:-9999px; /* need label for screenreaders*/
  width:54px;
  height:27px;
  background:grey;
  float:left;
  border-radius:100px;
  position:relative;
}
label:after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:var(--color-eye);
  border-radius:90px;
  transition: 0.3s;
}
input:checked + label{
  background: var(--color-text);
}
input:checked + label:after{
  left: calc(100% - 5px);
  transform:translateX(-100%);
}
label:active:after{
  width:45px;
}
 #lill{
   display:grid;
   grid-area:lill;
   margin-right:3em;
   
  }
  #lill path:nth-child(3){
    stroke-dasharray:499px;
    stroke-dashoffset:499px;
    animation:line 2s ease forwards;
  }
  #lill path:nth-child(4){
    stroke-dasharray:204px;
    stroke-dashoffset:204px;
    animation:line 2s ease forwards 0.5s;
  }
  #lill path:nth-child(5){
    stroke-dasharray:115px;
    stroke-dashoffset:115px;
    animation:line 2s ease forwards 0.5s;
  }
 #lill path:nth-child(6){
    stroke-dasharray:171px;
    stroke-dashoffset:171px;
    animation:line 2s ease forwards 0.8s;
  }
  #lill path:nth-child(7){
    stroke-dasharray:155px;
    stroke-dashoffset:155px;
    animation:line 2s ease forwards 1.1s;
  }
  #lill path:nth-child(8){
    stroke-dasharray:85px;
    stroke-dashoffset:85px;
    animation:line 2s ease forwards 1.1s;
  }
 #lill path:nth-child(9){
    stroke-dasharray:296px;
    stroke-dashoffset:296px;
    animation:line 2s ease forwards 1.1s;
  }
#lill path:nth-child(10){
    stroke-dasharray:139px;
    stroke-dashoffset:139px;
    animation:line 2s ease forwards 2s;
  }
  #lill path:nth-child(11){
    stroke-dasharray:111px;
    stroke-dashoffset:111px;
    animation:line 2s ease forwards 2s;
  }
    #lill path:nth-child(12){
    stroke-dasharray:971px;
    stroke-dashoffset:971px;
    animation:line 2s ease forwards 2.2s;
  }
  #lill path:nth-child(13){
    stroke-dasharray:676px;
    stroke-dashoffset:676px;
    animation:line 2s ease forwards 2.2s;
  }
  #lill path:nth-child(14){
    stroke-dasharray:666px;
    stroke-dashoffset:666px;
    animation:line 2s ease forwards 2.4s;
  }
  #lill path:nth-child(15){
    stroke-dasharray:662px;
    stroke-dashoffset:662px;
    animation:line 2s ease forwards 2.4s;
  }
  .eye{
    animation:color 1s forwards 4s;

    
  }

  @keyframes line{
    to{
      stroke-dashoffset:0;
    }
  }
  @keyframes color{
    from{
      opacity:0;
    }
    to{
      opacity:0.7;
    }
  }
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}
              
            
!

JS

              
                var checkbox = document.querySelector('input[name=theme]');
var headText = document.getElementById("side");


checkbox.addEventListener('change', function(){
  changeText()
  if(this.checked) {
   trans()
    
   document.documentElement.setAttribute('data-theme', 'dark')
    
  }  else{
    trans()
   document.documentElement.setAttribute('data-theme', 'light')
    
  }                    
  });
let trans = () => {
    document.documentElement.classList.add('transition');
    window.setTimeout(() => {
        document.documentElement.classList.remove('transition')
    }, 1000)
};
function changeText() {
if (headText.innerHTML === "Welcome to the ligth side!") {
    headText.innerHTML = "Welcome to the dark side!";
  
    }else {
      headText.innerHTML ="Welcome to the ligth side!";
    }
}
              
            
!
999px

Console