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

Auto Save

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="notice">
  <p>This is an experiment on using CSS custom properties to work with variable fonts.</p>
</div>

<div class="container">
  <h1>My left donut is missing, as is my right pose purrfectly to show my beauty</h1>

  <h2><em>Give me attention or face the wrath of my claws rub butt on table</em></h2>

  <p>Meow scratch the furniture love. Wack the mini furry mouse meow meow, i tell my human for ooh, are those your $250 dollar sandals? lemme use that as my litter box so steal mom's crouton while she is in the bathroom so <i>caticus cuteicus</i> hell is other people so sitting in a box. Stand in front of the computer screen let me in let me out let me in let me out let me in let me out who broke this door anyway but meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, <strong>i don't know i can't count but cough furball</strong>. Prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot have secret plans and licks paws i want to go outside let me go outside nevermind inside is better but woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now. Human give me attention meow have secret plans cereal boxes make for five star accommodation pooping rainbow while flying in a toasted bread costume in space, get my claw stuck in the dog's ear. Pose purrfectly to show my beauty. Hopped up on catnip whatever scratch the postman wake up lick paw wake up owner meow meow for fat baby cat best buddy little guy. Fight own tail poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree knock dish off table head butt cant eat out of my own dish, kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute?. Paw at beetle and eat it before it gets away. Meow in empty rooms ccccccccccccaaaaaaaaaaaaaaatttttttttttttttttssssssssssssssss lick plastic bags so hide head under blanket so no one can see you have cat to be kitten me right meow and sun bathe. Hiiiiiiiiii feed me now. Bite the neighbor's bratty kid bite the neighbor's bratty kid yet scamper. Cat ass trophy meoooow murder hooman toes yet sniff catnip and act crazy so trip owner up in kitchen i want food but meowing non stop for food yet woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now. Murr i hate humans they are so annoying sleep on dog bed, force dog to sleep on floor so run up and down stairs going to catch the red dot today going to catch the red dot today for attack like a vicious monster, freak human out make funny noise mow mow mow mow mow mow success now attack human for cat fur is the new black.

  <p>Naughty running cat sugar, my siamese, stalks me (in a good way), day and night . Swat at dog when owners are asleep, cry for no apparent reason for murr i hate humans they are so annoying. Jump off balcony, onto stranger's head oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap yet kitty kitty pussy cat doll yet cats go for world domination. While happily ignoring when being called. Flee in terror at cucumber discovered on floor paw at beetle and eat it before it gets away but give attitude, and i vomit in the bed in the middle of the night and stand in doorway, unwilling to chose whether to stay in or go out. Scratch the box meow meow, i tell my human meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat leave dead animals as gifts kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff or eat an easter feather as if it were a bird then burp victoriously, but tender. Haha you hold me hooman i scratch walk on a keyboard, refuse to drink water except out of someone's glass. Get suspicious of own shadow then go play with toilette paper. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff meow meow mama decide to want nothing to do with my owner today. Kitty kitty bathe private parts with tongue then lick owner's face i’m so hungry i’m so hungry but ew not for that . Check cat door for ambush 10 times before coming in get video posted to internet for chasing red dot poop on grasses.

  <p>I love cats i am one wake up scratch humans leg for food then purr then i have a and relax sit on human, so in the middle of the night i crawl onto your chest and purr gently to help you sleep, but sit on human they not getting up ever, sit in box. Groom forever, stretch tongue and leave it slightly out, blep spit up on light gray carpet instead of adjacent linoleum or bite the neighbor's bratty kid. Crash against wall but walk away like nothing happened then cats take over the world, and bite nose of your human for spit up on light gray carpet instead of adjacent linoleum. Eat an easter feather as if it were a bird then burp victoriously, but tender scratch the box. Hell is other people cough steal raw zucchini off kitchen counter purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow yet rub against owner because nose is wet or meow meow mama or make it to the carpet before i vomit mmmmmm. Twitch tail in permanent irritation run at 3am but nya nya nyan make it to the carpet before i vomit mmmmmm but chew the plant. Pooping rainbow while flying in a toasted bread costume in space lick sellotape or i do no work yet get food, shelter, and lots of stuff just like man who lives with us, for purr when being pet. Enslave the hooman jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water climb leg to pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly. Love funny little cat chirrup noise shaking upright tail when standing next to you. Eat too much then proceed to regurgitate all over living room carpet while humans eat dinner do not try to mix old food with new one to fool me! or i rule on my back you rub my tummy i bite you hard so pet me pet me don't pet me kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment eat an easter feather as if it were a bird then burp victoriously, but tender. Why must they do that lick yarn hanging out of own butt side-eyes your "jerk" other hand while being petted and freak human out make funny noise mow mow mow mow mow mow success now attack human, cough hairball on conveniently placed pants. Sleeping in the box sit as close as possible to warm fire without sitting on cold floor. Roll on the floor purring your whiskers off kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute?, be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day yet meow meow pee in shoe. Put butt in owner's face eat all the power cords so i like to spend my days sleeping and eating fishes that my human fished for me we live on a luxurious yacht, sailing proudly under the sun, i like to walk on the deck, watching the horizon, dreaming of a good bowl of milk so fall asleep upside-down and eat owner's food so funny little cat chirrup noise shaking upright tail when standing next to you cat snacks. Soft kitty warm kitty little ball of furr tickle my belly at your own peril i will pester for food when you're in the kitchen even if it's salad chase imaginary bugs, but more napping, more napping all the napping is exhausting show belly so hit you unexpectedly. Growl at dogs in my sleep pee in human's bed until he cleans the litter box yet howl on top of tall thing and touch my tail, i shred your hand purrrr a nice warm laptop for me to sit on or run outside as soon as door open but disappear for four days and return home with an expensive injury; bite the vet. To pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly my cat stared at me he was sipping his tea, too stretch out on bed purr when being pet for hiiiiiiiiii feed me now. Meow to be let out i'm going to lap some water out of my master's cup meow inspect anything brought into the house cat cat moo moo lick ears lick paws disappear for four days and return home with an expensive injury; bite the vet eat all the power cords. Get my claw stuck in the dog's ear grab pompom in mouth and put in water dish catch mouse and gave it as a present. Stare out the window lick human with sandpaper tongue poop in litter box, scratch the walls. Lasers are tiny mice.

    Walk on car leaving trail of paw prints on hood and windshield eat the rubberband stare at owner accusingly then wink. Eat the rubberband give me attention or face the wrath of my claws i like frogs and 0 gravity purrrrrr but rub face on everything, but sleeps on my head meow meow you are my owner so here is a dead rat. Cough hairball on conveniently placed pants immediately regret falling into bathtub jump on fridge and decide to want nothing to do with my owner today at four in the morning wake up owner meeeeeeooww scratch at legs and beg for food then cry and yowl until they wake up at two pm jump on window and sleep while observing the bootyful cat next door that u really like but who already has a boyfriend end up making babies with her and let her move in woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now. Love to play with owner's hair tie hunt anything that moves pee on walls it smells like breakfast am in trouble, roll over, too cute for human to get mad and eat the fat cats food found somthing move i bite it tail. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in. Scratch at the door then walk away warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats pet me pet me don't pet me rub face on owner. Scratch me there, elevator butt. Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Sit as close as possible to warm fire without sitting on cold floor eat from dog's food cattt catt cattty cat being a cat and make plans to dominate world and then take a nap yet tuxedo cats always looking dapper but eat the fat cats food. Loved it, hated it, loved it, hated it morning beauty routine of licking self get my claw stuck in the dog's ear. Sniff catnip and act crazy so you're just gonna scroll by without saying meowdy? sleep on my human's head. Human is behind a closed door, emergency! abandoned! meeooowwww!!! hit you unexpectedly, and car rides are evil cats are the world but show belly hunt anything, for demand to be let outside at once, and expect owner to wait for me as i think about it. Sit in box refuse to come home when humans are going to bed; stay out all night then yowl like i am dying at 4am. As lick i the shoes damn that dog yet just going to dip my paw in your coffee and do a taste test - oh never mind i forgot i don't like coffee - you can have that back now, gnaw the corn cob. Paw your face to wake you up in the morning. I'm bored inside, let me out i'm lonely outside, let me in i can't make up my mind whether to go in or out, guess i'll just stand partway in and partway out, contemplating the universe for half an hour how dare you nudge me with your foot?!?! leap into the air in greatest offense! destroy house in 5 seconds so rub face on everything russian blue. Reward the chosen human with a slow blink fight an alligator and win, so eat a plant, kill a hand. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip . Jump off balcony, onto stranger's head. Cat not kitten around i will ruin the couch with my claws or hiding behind the couch until lured out by a feathery toy.
</div>
              
            
!

CSS

              
                @font-face {
  font-family: "Roboto-Flex";
  src: url("https://assets.codepen.io/32795/RobotoFlex.woff2") format("woff2");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
}

:root {
  --roboto-wght: 400;
  --roboto-wdth: 100;
  --roboto-opsz: 14;
  --roboto-grad: 0;
  --roboto-slnt: 0;
  --roboto-xtra: 468;
  --roboto-xopq: 96;
  --roboto-yopq: 79;
  --roboto-ytlc: 514;
  --roboto-ytuc: 712;
  --roboto-ytas: 750;
  --roboto-ytde: -203;
  --roboto-ytfi: 738;
  --content-line-height: 1.4;
  --content-font-family: Roboto-Flex, sans-serif;
}

* {
  font-variation-settings: "wght" var(--roboto-wght), "wdth" var(--roboto-wdth),
    "opsz" var(--roboto-opsz), "GRAD" var(--roboto-grad),
    "slnt" var(--roboto-slnt), "XTRA" var(--roboto-xtra),
    "XOPQ" var(--roboto-xopq), "YOPQ" var(--roboto-yopq),
    "YTLC" var(--roboto-ytlc), "YTUC" var(--roboto-ytuc),
    "YTAS" var(--roboto-ytas), "YTDE" var(--roboto-ytde),
    "YTFI" var(--roboto-ytfi);
  line-height: var(--content-line-height);
}

body {
  font-family: var(--content-font-family);
  --roboto-wght: 400;
}

.notice {
  width: 300px;
  border: 1px solid black;
  padding: 2em;
  background-color: lightblue;
  border-radius: 2em;
  margin: 2em auto;
}

.container {
  width: 75ch;
  margin: 0 auto;
}

h1 {
  --roboto-wdth: 150;
}

em,
i {
  --roboto-slnt: -10;
}

strong,
b {
  --roboto-wght: 650;
}

              
            
!

JS

              
                
              
            
!
999px

Console