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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="grid">
  <div class="rect">
    <svg width="100%" height="100%" viewBox="0 0 437 437" xmlns="http://www.w3.org/2000/svg">
      <rect width="437" height="437"/>
      <path d="M72.0707 100.976H113.723C123.809 100.976 133.184 102.103 141.847 104.358C150.628 106.613 158.045 110.291 164.097 115.394C170.267 120.378 174.717 126.905 177.447 134.974C180.295 143.043 180.947 152.833 179.405 164.344C177.981 174.549 174.777 183.568 169.793 191.4C164.927 199.113 158.875 205.64 151.637 210.98C144.398 216.201 136.269 220.177 127.251 222.906C118.351 225.635 109.213 227 99.8387 227H54.4487L72.0707 100.976ZM85.7767 201.368H100.195C106.603 201.368 112.655 200.715 118.351 199.41C124.047 198.105 129.09 195.969 133.481 193.002C137.99 189.917 141.728 185.941 144.695 181.076C147.661 176.092 149.679 170.04 150.747 162.92C151.577 156.749 151.162 151.409 149.501 146.9C147.958 142.272 145.407 138.475 141.847 135.508C138.287 132.541 133.955 130.346 128.853 128.922C123.869 127.379 118.469 126.608 112.655 126.608H96.2787L85.7767 201.368Z" fill="black"/>
<path d="M160.855 100.976H192.539L212.119 183.568H212.475L255.729 100.976H285.455L215.857 227H193.607L160.855 100.976Z" fill="black"/>
<path d="M275.505 100.976H317.157C327.244 100.976 336.619 102.103 345.281 104.358C354.063 106.613 361.479 110.291 367.531 115.394C373.702 120.378 378.152 126.905 380.881 134.974C383.729 143.043 384.382 152.833 382.839 164.344C381.415 174.549 378.211 183.568 373.227 191.4C368.362 199.113 362.31 205.64 355.071 210.98C347.833 216.201 339.704 220.177 330.685 222.906C321.785 225.635 312.648 227 303.273 227H257.883L275.505 100.976ZM289.211 201.368H303.629C310.037 201.368 316.089 200.715 321.785 199.41C327.481 198.105 332.525 195.969 336.915 193.002C341.425 189.917 345.163 185.941 348.129 181.076C351.096 176.092 353.113 170.04 354.181 162.92C355.012 156.749 354.597 151.409 352.935 146.9C351.393 142.272 348.841 138.475 345.281 135.508C341.721 132.541 337.39 130.346 332.287 128.922C327.303 127.379 321.904 126.608 316.089 126.608H299.713L289.211 201.368Z" fill="black"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M69.461 97.976H113.723C124.031 97.976 133.66 99.1279 142.597 101.453C148.948 103.085 154.666 105.444 159.724 108.551L156.976 97.976H194.911L213.297 175.532L253.914 97.976H317.157C327.465 97.976 337.095 99.1279 346.033 101.454C355.173 103.801 363.003 107.659 369.441 113.08C376.07 118.442 380.822 125.446 383.717 133.994C386.763 142.638 387.396 152.93 385.813 164.742L385.812 164.751L385.81 164.759C384.334 175.34 380.999 184.774 375.761 193.006C370.7 201.028 364.394 207.831 356.852 213.394L356.839 213.404L356.826 213.413C349.306 218.837 340.878 222.955 331.564 225.775C322.377 228.592 312.943 230 303.273 230H254.435L266.914 140.755L217.627 230H191.287L178.453 180.615C176.827 185.007 174.787 189.139 172.327 193.006C167.266 201.028 160.959 207.831 153.418 213.394L153.405 213.404L153.392 213.413C145.871 218.838 137.443 222.955 128.127 225.775C118.941 228.592 109.508 230 99.8387 230H51L69.461 97.976ZM169.793 191.4C172.916 186.492 175.34 181.118 177.066 175.278C177.651 173.297 178.155 171.264 178.579 169.176L193.607 227H215.857L272.132 125.101L257.883 227H303.273C312.648 227 321.785 225.635 330.685 222.906C339.704 220.177 347.833 216.201 355.071 210.98C362.31 205.64 368.362 199.113 373.227 191.4C378.211 183.568 381.415 174.549 382.839 164.344C384.382 152.833 383.729 143.043 380.881 134.974C378.152 126.905 373.702 120.378 367.531 115.394C361.479 110.291 354.063 106.613 345.281 104.358C336.619 102.103 327.244 100.976 317.157 100.976H255.729L212.475 183.568H212.119L192.539 100.976H160.855L164.74 115.924C164.528 115.746 164.313 115.569 164.097 115.394C163.055 114.516 161.973 113.68 160.851 112.886C155.451 109.067 149.117 106.225 141.847 104.358C133.184 102.103 123.809 100.976 113.723 100.976H72.0707L54.4487 227H99.8387C109.213 227 118.351 225.635 127.251 222.906C136.269 220.177 144.398 216.201 151.637 210.98C158.875 205.64 164.927 199.113 169.793 191.4ZM146.669 147.893L146.655 147.849C145.279 143.721 143.035 140.403 139.926 137.813C136.736 135.154 132.799 133.138 128.046 131.812L128.006 131.8L127.966 131.788C123.3 130.344 118.203 129.608 112.655 129.608H98.8867L89.2276 198.368H100.195C106.399 198.368 112.224 197.736 117.681 196.486C123.05 195.255 127.741 193.258 131.793 190.521C135.93 187.69 139.373 184.038 142.125 179.528C144.843 174.956 146.753 169.306 147.777 162.497C148.557 156.683 148.133 151.867 146.686 147.937L146.669 147.893ZM144.695 181.076C141.728 185.941 137.99 189.917 133.481 193.002C129.09 195.969 124.047 198.105 118.351 199.41C112.655 200.715 106.603 201.368 100.195 201.368H85.7767L96.2787 126.608H112.655C118.469 126.608 123.869 127.379 128.853 128.922C133.955 130.346 138.287 132.541 141.847 135.508C145.407 138.475 147.958 142.272 149.501 146.9C151.162 151.409 151.577 156.749 150.747 162.92C149.679 170.04 147.661 176.092 144.695 181.076ZM350.104 147.893L350.089 147.849C348.713 143.721 346.469 140.403 343.361 137.813C340.17 135.154 336.233 133.138 331.481 131.812L331.44 131.8L331.4 131.788C326.734 130.344 321.637 129.608 316.089 129.608H302.321L292.662 198.368H303.629C309.833 198.368 315.659 197.736 321.115 196.486C326.485 195.255 331.176 193.258 335.229 190.521C339.365 187.689 342.808 184.037 345.56 179.527C348.278 174.955 350.188 169.304 351.211 162.496C351.991 156.682 351.568 151.866 350.12 147.937L350.104 147.893ZM336.915 193.002C332.525 195.969 327.481 198.105 321.785 199.41C316.089 200.715 310.037 201.368 303.629 201.368H289.211L299.713 126.608H316.089C321.904 126.608 327.303 127.379 332.287 128.922C337.39 130.346 341.721 132.541 345.281 135.508C348.841 138.475 351.393 142.272 352.935 146.9C354.597 151.409 355.012 156.749 354.181 162.92C353.113 170.04 351.096 176.092 348.129 181.076C345.163 185.941 341.425 189.917 336.915 193.002Z" fill="black"/>
<path d="M62.9533 265.616H80.3973L97.5473 311.088H97.7433L115.187 265.616H131.553L102.937 335H90.6873L62.9533 265.616Z" fill="white"/>
<path d="M138.619 265.616H153.907V335H138.619V265.616Z" fill="white"/>
<path d="M167.813 265.616H190.745C196.299 265.616 201.558 266.237 206.523 267.478C211.554 268.719 215.931 270.745 219.655 273.554C223.379 276.298 226.319 279.891 228.475 284.334C230.697 288.777 231.807 294.167 231.807 300.504C231.807 306.123 230.729 311.088 228.573 315.4C226.483 319.647 223.641 323.24 220.047 326.18C216.454 329.055 212.305 331.243 207.601 332.746C202.897 334.249 197.965 335 192.803 335H167.813V265.616ZM183.101 320.888H191.039C194.567 320.888 197.834 320.529 200.839 319.81C203.91 319.091 206.556 317.915 208.777 316.282C210.999 314.583 212.73 312.395 213.971 309.716C215.278 306.972 215.931 303.64 215.931 299.72C215.931 296.323 215.278 293.383 213.971 290.9C212.73 288.352 211.031 286.261 208.875 284.628C206.719 282.995 204.171 281.786 201.231 281.002C198.357 280.153 195.319 279.728 192.117 279.728H183.101V320.888Z" fill="white"/>
<path d="M242.763 265.616H289.901V279.728H258.051V292.664H288.137V306.776H258.051V320.888H291.665V335H242.763V265.616Z" fill="white"/>
<path d="M300.179 300.308C300.179 294.755 301.094 289.724 302.923 285.216C304.818 280.708 307.431 276.886 310.763 273.75C314.095 270.549 318.048 268.099 322.621 266.4C327.194 264.701 332.192 263.852 337.615 263.852C343.038 263.852 348.036 264.701 352.609 266.4C357.182 268.099 361.135 270.549 364.467 273.75C367.799 276.886 370.38 280.708 372.209 285.216C374.104 289.724 375.051 294.755 375.051 300.308C375.051 305.861 374.104 310.892 372.209 315.4C370.38 319.908 367.799 323.763 364.467 326.964C361.135 330.1 357.182 332.517 352.609 334.216C348.036 335.915 343.038 336.764 337.615 336.764C332.192 336.764 327.194 335.915 322.621 334.216C318.048 332.517 314.095 330.1 310.763 326.964C307.431 323.763 304.818 319.908 302.923 315.4C301.094 310.892 300.179 305.861 300.179 300.308ZM316.055 300.308C316.055 303.575 316.545 306.58 317.525 309.324C318.57 312.003 320.04 314.355 321.935 316.38C323.83 318.34 326.084 319.875 328.697 320.986C331.376 322.097 334.348 322.652 337.615 322.652C340.882 322.652 343.822 322.097 346.435 320.986C349.114 319.875 351.4 318.34 353.295 316.38C355.19 314.355 356.627 312.003 357.607 309.324C358.652 306.58 359.175 303.575 359.175 300.308C359.175 297.107 358.652 294.134 357.607 291.39C356.627 288.646 355.19 286.294 353.295 284.334C351.4 282.309 349.114 280.741 346.435 279.63C343.822 278.519 340.882 277.964 337.615 277.964C334.348 277.964 331.376 278.519 328.697 279.63C326.084 280.741 323.83 282.309 321.935 284.334C320.04 286.294 318.57 288.646 317.525 291.39C316.545 294.134 316.055 297.107 316.055 300.308Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M60 263.616H81.7805L97.6603 305.72L113.812 263.616H134.542L104.276 337H89.3329L60 263.616ZM97.7433 311.088H97.5473L80.3973 265.616H62.9533L90.6873 335H102.937L131.553 265.616H115.187L97.7433 311.088ZM136.619 263.616H155.907V337H136.619V263.616ZM165.813 263.616H190.745C196.447 263.616 201.869 264.253 207.005 265.537C212.264 266.835 216.891 268.965 220.851 271.951C224.846 274.897 227.984 278.744 230.269 283.45C232.659 288.234 233.807 293.944 233.807 300.504C233.807 306.379 232.679 311.657 230.365 316.288C228.151 320.784 225.132 324.604 221.314 327.728L221.305 327.735L221.297 327.742C217.499 330.78 213.13 333.08 208.21 334.651C203.3 336.219 198.162 337 192.803 337H165.813V263.616ZM228.573 315.4C230.729 311.088 231.807 306.123 231.807 300.504C231.807 294.167 230.697 288.777 228.475 284.334C226.319 279.891 223.379 276.298 219.655 273.554C215.931 270.745 211.554 268.719 206.523 267.478C201.558 266.237 196.299 265.616 190.745 265.616H167.813V335H192.803C197.965 335 202.897 334.249 207.601 332.746C212.305 331.243 216.454 329.055 220.047 326.18C223.641 323.24 226.483 319.647 228.573 315.4ZM200.374 317.865L200.384 317.863C203.221 317.198 205.606 316.128 207.577 314.682C209.519 313.193 211.047 311.27 212.157 308.875L212.161 308.866L212.166 308.856C213.313 306.447 213.931 303.426 213.931 299.72C213.931 296.579 213.328 293.972 212.201 291.831L212.187 291.804L212.173 291.776C211.063 289.496 209.561 287.657 207.668 286.222C205.743 284.764 203.437 283.66 200.716 282.934L200.69 282.928L200.665 282.92C197.986 282.129 195.14 281.728 192.117 281.728H185.101V318.888H191.039C194.432 318.888 197.541 318.542 200.374 317.865ZM183.101 320.888V279.728H192.117C195.319 279.728 198.357 280.153 201.231 281.002C204.171 281.786 206.719 282.995 208.875 284.628C211.031 286.261 212.73 288.352 213.971 290.9C215.278 293.383 215.931 296.323 215.931 299.72C215.931 303.64 215.278 306.972 213.971 309.716C212.73 312.395 210.999 314.583 208.777 316.282C206.556 317.915 203.91 319.091 200.839 319.81C197.834 320.529 194.567 320.888 191.039 320.888H183.101ZM240.763 263.616H291.901V281.728H260.051V290.664H290.137V308.776H260.051V318.888H293.665V337H240.763V263.616ZM258.051 320.888V306.776H288.137V292.664H258.051V279.728H289.901V265.616H242.763V335H291.665V320.888H258.051ZM301.075 284.452L301.079 284.441C303.073 279.697 305.839 275.64 309.385 272.3C312.924 268.902 317.113 266.313 321.925 264.525C326.744 262.735 331.981 261.852 337.615 261.852C343.249 261.852 348.486 262.735 353.306 264.525C358.118 266.313 362.306 268.902 365.845 272.3C369.394 275.642 372.129 279.703 374.058 284.453C376.065 289.234 377.051 294.529 377.051 300.308C377.051 306.087 376.065 311.382 374.058 316.163C372.129 320.913 369.395 325.003 365.853 328.406L365.845 328.413L365.838 328.42C362.299 331.751 358.113 334.305 353.306 336.091C348.486 337.881 343.249 338.764 337.615 338.764C331.981 338.764 326.744 337.881 321.925 336.091C317.118 334.305 312.932 331.751 309.392 328.42L309.385 328.413L309.377 328.406C305.838 325.005 303.073 320.919 301.079 316.175L301.075 316.164L301.07 316.152C299.131 311.374 298.179 306.083 298.179 300.308C298.179 294.533 299.131 289.242 301.07 284.464L301.075 284.452ZM372.209 315.4C374.104 310.892 375.051 305.861 375.051 300.308C375.051 294.755 374.104 289.724 372.209 285.216C370.38 280.708 367.799 276.886 364.467 273.75C361.135 270.549 357.182 268.099 352.609 266.4C348.036 264.701 343.038 263.852 337.615 263.852C332.192 263.852 327.194 264.701 322.621 266.4C318.048 268.099 314.095 270.549 310.763 273.75C307.431 276.886 304.818 280.708 302.923 285.216C301.094 289.724 300.179 294.755 300.179 300.308C300.179 305.861 301.094 310.892 302.923 315.4C304.818 319.908 307.431 323.763 310.763 326.964C314.095 330.1 318.048 332.517 322.621 334.216C327.194 335.915 332.192 336.764 337.615 336.764C343.038 336.764 348.036 335.915 352.609 334.216C357.182 332.517 361.135 330.1 364.467 326.964C367.799 323.763 370.38 319.908 372.209 315.4ZM345.661 319.142L345.669 319.139C348.106 318.128 350.155 316.747 351.845 315.002C353.546 313.181 354.84 311.066 355.729 308.637L355.733 308.624L355.738 308.612C356.688 306.12 357.175 303.359 357.175 300.308C357.175 297.328 356.689 294.599 355.738 292.102L355.731 292.082L355.724 292.063C354.833 289.568 353.541 287.465 351.857 285.724L351.846 285.712L351.835 285.7C350.143 283.892 348.097 282.484 345.669 281.477L345.661 281.474L345.653 281.471C343.321 280.48 340.653 279.964 337.615 279.964C334.582 279.964 331.877 280.478 329.472 281.474C327.112 282.478 325.093 283.886 323.396 285.7L323.384 285.712L323.373 285.724C321.685 287.47 320.358 289.58 319.402 292.082C318.511 294.584 318.055 297.321 318.055 300.308C318.055 303.362 318.511 306.127 319.399 308.624C320.352 311.058 321.682 313.178 323.385 315.002C325.081 316.754 327.103 318.134 329.471 319.142C331.876 320.138 334.582 320.652 337.615 320.652C340.653 320.652 343.321 320.136 345.653 319.145L345.661 319.142ZM328.697 320.986C326.084 319.875 323.83 318.34 321.935 316.38C320.04 314.355 318.57 312.003 317.525 309.324C316.545 306.58 316.055 303.575 316.055 300.308C316.055 297.107 316.545 294.134 317.525 291.39C318.57 288.646 320.04 286.294 321.935 284.334C323.83 282.309 326.084 280.741 328.697 279.63C331.376 278.519 334.348 277.964 337.615 277.964C340.882 277.964 343.822 278.519 346.435 279.63C349.114 280.741 351.4 282.309 353.295 284.334C355.19 286.294 356.627 288.646 357.607 291.39C358.652 294.134 359.175 297.107 359.175 300.308C359.175 303.575 358.652 306.58 357.607 309.324C356.627 312.003 355.19 314.355 353.295 316.38C351.4 318.34 349.114 319.875 346.435 320.986C343.822 322.097 340.882 322.652 337.615 322.652C334.348 322.652 331.376 322.097 328.697 320.986ZM138.619 265.616V335H153.907V265.616H138.619Z" fill="white"/>
</svg>
  </div>
</div>
            
          
!
            
              // run in FireFox Nightly to see animtion

html {
  --rect: 200px;
  --red: #F23337;
  --blue: #317CFF;
  --green: #64F82A;  
}

.grid {
  animation: slideAround 10s infinite alternate linear;
  background: #111;
  display: grid;
  height: 100vh;
  overflow: hidden;
  will-change: grid-template-columns, grid-template-rows;
}

.rect {
  animation: colorShift 10s 250ms infinite both linear;
  background: black;
  height: var(--rect);
  place-self: flex-end;
  width: var(--rect);
}


@keyframes slideAround {
  0% {
    grid-template-columns: 70% 1fr;
    grid-template-rows: var(--rect) 1fr;
  }
  25% {
    grid-template-columns: 20% 1fr;
    grid-template-rows: 100% 1fr;
  }
  50% {
    grid-template-columns: 50% 1fr;
    grid-template-rows: var(--rect) 1fr;
  }
  75% {
    grid-template-columns: var(--rect) 1fr;
    grid-template-rows: 70% 1fr;
  }
   100% {
    grid-template-columns: 100% 1fr;
    grid-template-rows: 100% 1fr;
  }
}

@keyframes colorShift {
  0%, 24% { fill: var(--red);  }
  25%, 49% { fill: var(--green); }
  50%, 74% { fill: var(--blue); }
  75%, 99% { fill: var(--green); }
  100% { fill: var(--red); }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console