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="stars"></div>

<div class="positioning">
	<div class="roof"></div>
	<div class="sun"></div>
	<h1>🐈</h1>		
</div>


              
            
!

CSS

              
                // Chrome only - Using experimental Variable fonts.

@font-face {
	font-family:'Zycon'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Zycon.ttf');
}

html {
	height: 100%;
}

body {
	background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%);
	height: 100%;
	overflow: hidden;
}

.positioning {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	transform: translate(0, 25%);
}

h1 {
	margin: 0;
	font-size: 200px;
	position: absolute;
	font-family: 'Zycon'; 
	font-variation-settings: 'T1  ' 1, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;
	color: #0d1f4a;
	transform: translateX(50%);
	z-index: 3;
	bottom: 30%;
	animation: eclipse 6s linear infinite;
}

.sun {
	width: 195px;
	height: 195px;
	position: absolute;
	left: 50%;
	background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%);
	box-shadow: 0 0 10px 2px rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
	border-radius: 50%;
	z-index: 1;
	bottom: 30%;
}

.roof {
	width: 100%;
	height: 50%;
	background: linear-gradient(to top, #4A2CC0 50%, #3920A4 70%);
	position: absolute;
	bottom: 0;
	transform: rotate(0deg) translate(15%, 25%) skew(-30deg);
	z-index: 2;
}

.stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1069px 1980px #FFF , 1553px 1152px #FFF , 508px 752px #FFF , 1088px 734px #FFF , 1449px 140px #FFF , 1833px 1041px #FFF , 417px 1965px #FFF , 969px 933px #FFF , 1767px 1694px #FFF , 1282px 184px #FFF , 850px 1675px #FFF , 1692px 415px #FFF , 1732px 941px #FFF , 1378px 709px #FFF , 1438px 536px #FFF , 742px 1380px #FFF , 873px 1511px #FFF , 907px 991px #FFF , 1839px 1661px #FFF , 1688px 771px #FFF , 994px 1086px #FFF , 913px 1619px #FFF , 1011px 1106px #FFF , 1325px 1724px #FFF , 1994px 1267px #FFF , 936px 1272px #FFF , 1997px 1933px #FFF , 1180px 6px #FFF , 1735px 1997px #FFF , 1357px 1337px #FFF , 1927px 1519px #FFF , 606px 1817px #FFF , 1782px 706px #FFF , 280px 1980px #FFF , 237px 380px #FFF , 702px 1936px #FFF , 564px 508px #FFF , 1192px 619px #FFF , 828px 1802px #FFF , 1750px 1751px #FFF , 171px 1251px #FFF , 499px 827px #FFF , 1192px 703px #FFF , 810px 1226px #FFF , 713px 551px #FFF , 954px 819px #FFF , 868px 520px #FFF , 1579px 1325px #FFF , 411px 341px #FFF , 212px 116px #FFF , 811px 1333px #FFF , 650px 1239px #FFF , 78px 1693px #FFF , 1298px 434px #FFF , 1369px 1530px #FFF , 749px 1974px #FFF , 57px 894px #FFF , 1814px 651px #FFF , 436px 837px #FFF , 402px 1006px #FFF , 84px 1426px #FFF , 1618px 1585px #FFF , 1464px 1841px #FFF , 693px 318px #FFF , 962px 1618px #FFF , 141px 910px #FFF , 545px 1633px #FFF , 84px 1683px #FFF , 1170px 1710px #FFF , 1544px 1169px #FFF , 987px 857px #FFF , 372px 1588px #FFF , 318px 12px #FFF , 294px 1103px #FFF , 1537px 879px #FFF , 456px 949px #FFF , 566px 1960px #FFF , 1015px 785px #FFF , 23px 1088px #FFF , 625px 1295px #FFF , 149px 171px #FFF , 1153px 1188px #FFF , 1636px 229px #FFF , 1954px 72px #FFF , 1779px 1650px #FFF , 791px 1049px #FFF , 810px 451px #FFF , 1969px 663px #FFF , 591px 526px #FFF , 641px 968px #FFF , 1232px 471px #FFF , 353px 383px #FFF , 362px 1131px #FFF , 1237px 596px #FFF , 1544px 916px #FFF , 144px 1233px #FFF , 365px 1143px #FFF , 1768px 961px #FFF , 1907px 1925px #FFF , 791px 1068px #FFF , 1943px 943px #FFF , 1926px 1603px #FFF , 295px 1088px #FFF , 352px 628px #FFF , 94px 1730px #FFF , 235px 989px #FFF , 63px 841px #FFF , 1763px 36px #FFF , 1078px 736px #FFF , 1636px 1204px #FFF , 1733px 1708px #FFF , 375px 476px #FFF , 1517px 1633px #FFF , 1864px 83px #FFF , 1734px 408px #FFF , 92px 1157px #FFF , 1183px 1955px #FFF , 1089px 514px #FFF , 155px 1734px #FFF , 1184px 1304px #FFF , 908px 1441px #FFF , 1436px 588px #FFF , 635px 404px #FFF , 1322px 366px #FFF , 262px 585px #FFF , 1913px 1719px #FFF , 929px 1449px #FFF , 1223px 856px #FFF , 1870px 1351px #FFF , 208px 1694px #FFF , 668px 1743px #FFF , 218px 1201px #FFF , 749px 1453px #FFF , 890px 1535px #FFF , 1147px 1089px #FFF , 402px 43px #FFF , 146px 878px #FFF , 682px 1183px #FFF , 777px 293px #FFF , 349px 398px #FFF , 1082px 1954px #FFF , 1721px 1122px #FFF , 942px 1538px #FFF , 1549px 184px #FFF , 1705px 1070px #FFF , 1461px 1379px #FFF , 690px 1883px #FFF , 1506px 1622px #FFF , 85px 282px #FFF , 912px 1227px #FFF , 1275px 34px #FFF , 647px 1257px #FFF , 609px 1900px #FFF , 88px 1825px #FFF , 38px 850px #FFF , 749px 1934px #FFF , 110px 850px #FFF , 1883px 524px #FFF , 1871px 1990px #FFF , 874px 1999px #FFF , 6px 783px #FFF , 571px 1763px #FFF , 306px 928px #FFF , 1637px 1276px #FFF , 86px 781px #FFF , 1467px 976px #FFF , 1873px 109px #FFF , 1908px 1918px #FFF , 1441px 1707px #FFF , 1858px 345px #FFF , 404px 271px #FFF , 921px 275px #FFF , 1017px 1287px #FFF , 1904px 130px #FFF , 510px 32px #FFF , 1577px 1142px #FFF , 92px 119px #FFF , 1523px 1012px #FFF , 1638px 1757px #FFF , 458px 330px #FFF , 804px 1722px #FFF , 1044px 815px #FFF , 79px 1054px #FFF , 1202px 1961px #FFF , 1515px 986px #FFF , 721px 1462px #FFF , 1803px 302px #FFF , 718px 952px #FFF , 1729px 335px #FFF , 458px 398px #FFF , 1913px 1582px #FFF , 401px 831px #FFF , 864px 1433px #FFF , 823px 1848px #FFF , 597px 481px #FFF , 338px 128px #FFF , 1337px 428px #FFF , 1542px 1605px #FFF , 1696px 488px #FFF , 982px 1838px #FFF , 1249px 100px #FFF , 1246px 1381px #FFF , 993px 1826px #FFF , 409px 993px #FFF , 2000px 1241px #FFF , 432px 585px #FFF , 367px 416px #FFF , 1553px 304px #FFF , 1774px 1021px #FFF , 1298px 1235px #FFF , 1252px 677px #FFF , 1054px 1024px #FFF , 584px 1754px #FFF , 160px 735px #FFF , 1111px 1822px #FFF , 985px 1642px #FFF , 1869px 862px #FFF , 1384px 1165px #FFF , 469px 762px #FFF , 526px 375px #FFF , 1077px 1887px #FFF , 38px 1495px #FFF , 787px 1875px #FFF , 343px 141px #FFF , 1928px 1119px #FFF , 437px 1806px #FFF , 1950px 487px #FFF , 738px 1353px #FFF , 284px 1176px #FFF , 1034px 1954px #FFF , 383px 674px #FFF , 1836px 1030px #FFF , 128px 1593px #FFF , 923px 148px #FFF , 1176px 6px #FFF , 1607px 304px #FFF , 1066px 4px #FFF , 1735px 1020px #FFF , 1528px 799px #FFF , 628px 1836px #FFF , 835px 856px #FFF , 67px 1007px #FFF , 1333px 1845px #FFF , 207px 1502px #FFF , 1229px 1796px #FFF , 458px 823px #FFF , 1942px 75px #FFF , 919px 895px #FFF , 1723px 1897px #FFF , 214px 1496px #FFF , 423px 1809px #FFF , 1573px 1294px #FFF , 1106px 215px #FFF , 372px 305px #FFF , 1864px 198px #FFF , 1347px 1320px #FFF , 200px 1836px #FFF , 1025px 1208px #FFF , 1519px 910px #FFF , 1943px 506px #FFF , 728px 434px #FFF , 1893px 1602px #FFF , 498px 214px #FFF , 1138px 1342px #FFF , 871px 302px #FFF , 1397px 1767px #FFF , 295px 1433px #FFF , 280px 54px #FFF , 1364px 235px #FFF , 804px 1003px #FFF , 1183px 9px #FFF , 480px 207px #FFF , 510px 234px #FFF , 1282px 1818px #FFF , 233px 1713px #FFF , 1195px 1366px #FFF , 1776px 411px #FFF , 1486px 414px #FFF , 1644px 1814px #FFF , 1610px 515px #FFF , 876px 429px #FFF , 1895px 1020px #FFF , 1449px 856px #FFF , 1314px 818px #FFF , 930px 1329px #FFF , 1335px 1863px #FFF , 114px 58px #FFF , 1403px 665px #FFF , 78px 1026px #FFF , 1253px 1932px #FFF , 619px 817px #FFF , 1873px 908px #FFF , 617px 1817px #FFF , 1294px 444px #FFF , 286px 1684px #FFF , 135px 1000px #FFF , 1569px 1308px #FFF , 835px 1645px #FFF , 1642px 1975px #FFF , 1093px 1392px #FFF , 1994px 23px #FFF , 733px 1302px #FFF , 305px 1417px #FFF , 709px 708px #FFF , 872px 1878px #FFF , 1972px 1086px #FFF , 1428px 1839px #FFF , 1132px 68px #FFF , 870px 159px #FFF , 1603px 358px #FFF , 720px 41px #FFF , 1325px 975px #FFF , 1674px 1832px #FFF , 231px 876px #FFF , 1573px 1881px #FFF , 40px 1671px #FFF , 1025px 1642px #FFF , 314px 740px #FFF , 1262px 970px #FFF , 1967px 1139px #FFF , 1987px 1184px #FFF , 376px 1872px #FFF , 1176px 1535px #FFF , 467px 303px #FFF , 324px 745px #FFF , 1253px 1261px #FFF , 1048px 575px #FFF , 608px 414px #FFF , 549px 661px #FFF , 536px 897px #FFF , 1917px 884px #FFF , 796px 143px #FFF , 1972px 854px #FFF , 1172px 369px #FFF , 1233px 1243px #FFF , 1714px 1574px #FFF , 379px 213px #FFF , 388px 1111px #FFF , 848px 496px #FFF , 882px 573px #FFF , 764px 830px #FFF , 365px 1066px #FFF , 626px 822px #FFF , 688px 1981px #FFF , 1682px 990px #FFF , 889px 809px #FFF , 221px 804px #FFF , 1136px 615px #FFF , 712px 1209px #FFF , 826px 1311px #FFF , 1787px 256px #FFF , 750px 998px #FFF , 1314px 296px #FFF , 561px 1641px #FFF , 344px 265px #FFF , 449px 1689px #FFF , 336px 2px #FFF , 1878px 1886px #FFF , 1625px 978px #FFF , 1275px 530px #FFF , 400px 587px #FFF , 131px 163px #FFF , 779px 1855px #FFF , 29px 762px #FFF , 649px 74px #FFF , 648px 1936px #FFF , 1930px 380px #FFF , 1511px 1679px #FFF , 1977px 1056px #FFF , 101px 184px #FFF , 1417px 754px #FFF , 342px 1089px #FFF , 1595px 1268px #FFF , 955px 908px #FFF , 1426px 1616px #FFF , 1079px 1615px #FFF , 567px 552px #FFF , 1623px 508px #FFF , 355px 795px #FFF , 405px 496px #FFF , 1905px 1985px #FFF , 780px 1428px #FFF , 174px 719px #FFF , 967px 1880px #FFF , 154px 1090px #FFF , 1403px 702px #FFF , 811px 1050px #FFF , 1789px 1540px #FFF , 979px 1116px #FFF , 248px 620px #FFF , 1805px 1061px #FFF , 367px 45px #FFF , 836px 894px #FFF , 780px 824px #FFF , 1319px 77px #FFF , 1391px 1535px #FFF , 773px 1425px #FFF , 1858px 1750px #FFF , 904px 43px #FFF , 1086px 610px #FFF , 678px 775px #FFF , 748px 1630px #FFF , 707px 1179px #FFF , 687px 1231px #FFF , 250px 1874px #FFF , 1775px 125px #FFF , 1511px 1945px #FFF , 852px 1177px #FFF , 1466px 272px #FFF , 1514px 198px #FFF , 752px 1247px #FFF , 576px 304px #FFF , 863px 1536px #FFF , 1023px 1954px #FFF , 243px 892px #FFF , 1701px 1243px #FFF , 991px 865px #FFF , 676px 1265px #FFF , 1488px 1003px #FFF , 514px 1347px #FFF , 56px 330px #FFF , 1752px 707px #FFF , 497px 1221px #FFF , 793px 94px #FFF , 918px 1262px #FFF , 1004px 1908px #FFF , 1933px 1643px #FFF , 315px 809px #FFF , 1217px 1082px #FFF , 364px 490px #FFF , 307px 636px #FFF , 1120px 1448px #FFF , 1529px 32px #FFF , 1120px 1936px #FFF , 1737px 928px #FFF , 45px 128px #FFF , 1480px 845px #FFF , 1742px 527px #FFF , 1537px 882px #FFF , 809px 1636px #FFF , 967px 1004px #FFF , 356px 1470px #FFF , 121px 1058px #FFF , 87px 1929px #FFF , 879px 1208px #FFF , 460px 1306px #FFF , 652px 595px #FFF , 1114px 1411px #FFF , 1585px 818px #FFF , 1057px 1613px #FFF , 1436px 122px #FFF , 84px 1934px #FFF , 1932px 124px #FFF , 967px 827px #FFF , 918px 1314px #FFF , 649px 112px #FFF , 1754px 1221px #FFF , 1360px 532px #FFF , 700px 1935px #FFF , 1339px 30px #FFF , 99px 1278px #FFF , 1099px 865px #FFF , 1306px 542px #FFF , 754px 1447px #FFF , 565px 852px #FFF , 1687px 766px #FFF , 1114px 1406px #FFF , 1511px 244px #FFF , 1434px 1607px #FFF , 1813px 378px #FFF , 1716px 1527px #FFF , 505px 1857px #FFF , 1863px 1904px #FFF , 1606px 1204px #FFF , 1358px 237px #FFF , 920px 1591px #FFF , 848px 286px #FFF , 977px 559px #FFF , 1501px 1014px #FFF , 1179px 88px #FFF , 578px 164px #FFF , 929px 799px #FFF , 617px 607px #FFF , 1834px 1995px #FFF , 1117px 924px #FFF , 1343px 27px #FFF , 1683px 435px #FFF , 1350px 160px #FFF , 304px 869px #FFF , 660px 1088px #FFF , 1409px 536px #FFF , 983px 1674px #FFF , 1592px 961px #FFF , 1921px 406px #FFF , 1390px 600px #FFF , 1848px 241px #FFF , 1858px 1551px #FFF , 1787px 1872px #FFF , 1745px 1647px #FFF , 300px 1663px #FFF , 296px 1215px #FFF , 1412px 1694px #fff;
}

@keyframes eclipse {
	0% {
			font-variation-settings: 'T1  ' 1, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;	}
	
	5% {
		font-variation-settings: 'T1  ' 0, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;	}
	10% {
		font-variation-settings: 'T1  ' 0, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;
	}
	15% {
			font-variation-settings: 'T1  ' 1, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;	}
}

              
            
!

JS

              
                var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-text", this.innerText);
});

              
            
!
999px

Console