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. 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

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

              
                <svg width="612" height="612" viewBox="0 0 612 612" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.313995361328125 0 0 0.313995361328125 305.95 297.1)" id="gradient0">
			<stop offset="0" stop-color="#3ef5f0"/>
			<stop offset="0.2901960784313726" stop-color="#3ef5f0"/>
			<stop offset="0.7490196078431373" stop-color="#e248a0"/>
			<stop offset="1" stop-color="#e248a0"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.2566986083984375 0 0 0.2566986083984375 259.05 275.75)" id="gradient1">
			<stop offset="0" stop-color="#3ff6f0"/>
			<stop offset="1" stop-color="#39b9f6"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.1155242919921875 -0.19970703125 0.19970703125 -0.1155242919921875 258.6 440.1)" id="gradient2">
			<stop offset="0" stop-color="#543864"/>
			<stop offset="1" stop-color="#2f1f38"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.26922607421875 0 0 0.26922607421875 342.65 298.15)" id="gradient3">
			<stop offset="0" stop-color="#f450aa"/>
			<stop offset="1" stop-color="#a32f80"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.0058135986328125 -0.02166748046875 0.02166748046875 0.0058135986328125 417.15 449.1)" id="gradient4">
			<stop offset="0" stop-color="#3ac3f4" stop-opacity="0"/>
			<stop offset="1" stop-color="#144258" stop-opacity="0.4980392156862745"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.0190887451171875 0.0050506591796875 -0.0050506591796875 -0.0190887451171875 332.45 240.6)" id="gradient5">
			<stop offset="0" stop-color="#543864" stop-opacity="0"/>
			<stop offset="1" stop-color="#23172a" stop-opacity="0.4980392156862745"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.01348876953125 0.013519287109375 -0.013519287109375 0.01348876953125 168.1 408.3)" id="gradient6">
			<stop offset="0" stop-color="#f450aa" stop-opacity="0"/>
			<stop offset="1" stop-color="#2c0c22" stop-opacity="0.24705882352941178"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.1155242919921875 -0.19970703125 0.19970703125 -0.1155242919921875 179.25 486)" id="gradient7">
			<stop offset="0" stop-color="#543864"/>
			<stop offset="1" stop-color="#2f1f38"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.26922607421875 0 0 0.26922607421875 342.6 199.6)" id="gradient8">
			<stop offset="0" stop-color="#f450aa"/>
			<stop offset="1" stop-color="#a32f80"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.2502899169921875 0 0 0.2502899169921875 259.05 275.75)" id="gradient9">
			<stop offset="0" stop-color="#3ff6f0"/>
			<stop offset="1" stop-color="#39b9f6"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(0.26922607421875 0 0 0.26922607421875 342.6 403.4)" id="gradient10">
			<stop offset="0" stop-color="#f450aa"/>
			<stop offset="1" stop-color="#a32f80"/>
		</linearGradient>
		<linearGradient gradientUnits="userSpaceOnUse" x1="-819.2" x2="819.2" spreadMethod="pad" gradientTransform="matrix(-0.1155242919921875 -0.19970703125 0.19970703125 -0.1155242919921875 417.65 348.1)" id="gradient11">
			<stop offset="0" stop-color="#543864"/>
			<stop offset="1" stop-color="#2f1f38"/>
		</linearGradient>

		<filter id="penrose-glow">
			<feGaussianBlur stdDeviation="20" />
			<feComponentTransfer>
				<feFuncA type="linear" slope="1.5" />
			</feComponentTransfer>
			<feBlend in2="SourceGraphic" />
		</filter>
	</defs>

	<g>
		<path filter="url(#penrose-glow)" class="penrose-bg" fill="url(#gradient0)" d="M48.75 479.35 L282.8 72.2 329.15 72.2 563.2 479.35 542.5 522 69.45 522 48.75 479.35 M167.2 436.65 L444.85 436.65 305.95 195.2 167.2 436.65"/>
		<path fill="url(#gradient1)" d="M330.35 74.35 L122.05 436.65 444.85 436.65 469.35 479.35 48.75 479.35 282.8 72.2 329.15 72.2 330.35 74.35"/>
		<path fill="url(#gradient2)" d="M48.75 479.35 L469.35 479.35 305.95 195.2 328.55 156 542.5 522 69.45 522 48.75 479.35"/>
		<path fill="url(#gradient3)" d="M122.05 436.65 L330.35 74.35 563.2 479.35 542.5 522 328.55 156 167.2 436.65 122.05 436.65"/>
		<g class="circle-spinner">
			<path fill="#ebebeb" d="M448.45 274.85 Q434 250.15 412.05 231.7 390.05 213.25 363.2 203.3 335.6 193.1 306 193.1 284.3 193.1 263.35 198.7 242.35 204.35 223.55 215.2 L205.45 183.8 Q228.4 170.55 253.95 163.7 279.55 156.85 306 156.85 342.1 156.85 375.75 169.3 408.5 181.4 435.3 203.9 462.1 226.4 479.75 256.55 497.85 287.55 504.1 323.1 L468.45 329.4 Q463.3 300.25 448.45 274.85"/>
			<path fill="#ebebeb" d="M176.75 203.95 L200 231.65 Q172 255.15 156.55 288.3 141.1 321.45 141.1 358.05 141.1 402.25 163.2 440.5 185.25 478.8 223.55 500.9 L205.45 532.25 Q158.75 505.3 131.8 458.6 104.85 411.95 104.85 358.05 104.85 313.45 123.7 273 142.6 232.6 176.75 203.95"/>
			<path fill="#ebebeb" d="M306 559.2 Q270.55 559.2 237.25 547.05 L249.6 513.05 Q276.95 522.95 306 522.95 339.55 522.95 370.2 510 399.8 497.5 422.65 474.65 445.45 451.85 458 422.25 470.95 391.6 470.95 358.05 L507.2 358.05 Q507.2 398.95 491.4 436.35 476.1 472.45 448.25 500.25 420.4 528.1 384.3 543.4 346.95 559.2 306 559.2"/>
			<path fill="#9900ff" fill-opacity="0" d="M508.5 358 Q508.5 441.9 449.2 501.2 389.85 560.5 306 560.5 222.15 560.5 162.8 501.2 103.5 441.9 103.5 358 103.5 274.15 162.8 214.85 222.15 155.5 306 155.5 389.85 155.5 449.2 214.85 508.5 274.15 508.5 358"/>
		</g>
		<path fill="url(#gradient4)" d="M360.25 436.65 L444.85 436.65 469.35 479.35 360.25 479.35 360.25 436.65"/>
		<path fill="url(#gradient5)" d="M374.85 315 L305.95 195.25 305.95 195.2 328.55 156 408.55 292.9 374.85 315"/>
		<path fill="url(#gradient6)" d="M205.05 370.8 L167.2 436.65 122.05 436.65 171.85 350.05 205.05 370.8"/>
		<path fill="url(#gradient7)" d="M48.75 479.35 L305.95 479.35 305.95 522 69.45 522 48.75 479.35"/>
		<path fill="url(#gradient8)" d="M328.55 156 L232.7 322.65 198.8 303.15 329.15 76.55 328.55 156"/>
		<path fill="url(#gradient9)" d="M330.35 74.35 L198.8 303.15 162.2 282 282.8 72.2 329.15 72.2 330.35 74.35 M306 479.35 L48.75 479.35 73.3 436.65 306 436.65 306 479.35"/>
		<path fill="url(#gradient10)" d="M418.25 309.45 L451.35 284.75 563.2 479.35 542.5 522 540.65 520.95 417.5 310.1 418.25 309.5 420.2 312.8 420.35 312.9 418.25 309.45"/>
		<path fill="url(#gradient11)" d="M420.35 312.9 L542.5 522 469.35 479.35 385.65 333.75 418.25 309.5 420.2 312.8 420.35 312.9"/>
	</g>
</svg>
              
            
!

CSS

              
                body {
  background-color: #170523;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22528%22%20height%3D%22532%22%20viewBox%3D%220%200%20528%20532%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpath%20fill%3D%22%233e1036%22%20d%3D%22M495%2076%20L528%2095%20528%20133%20429%2076%20297%20152%20330%20171%20297%20190%20165%20114%2099%20152%20132%20171%20165%20190%20198%20171%20231%20190%20198%20209%20165%20190%20165%20228%2033%20152%2066%20133%20132%2095%2066%2057%20132%2019%20165%2038%20132%2057%20165%2076%20198%2057%20231%2038%20264%2019%20330%2057%20363%2076%20396%2057%20363%2038%20396%2019%20429%2038%20462%2057%20495%2076%20M429%20304.05%20L528%20247%20528%20285.05%20363%20380.05%20396%20399.05%20429%20418.05%20429%20456.05%20297%20380.05%20330%20361.05%20363%20342.05%20330%20323.05%20297%20304.05%20330%20285.05%20363%20304.05%20396%20323.05%20429%20304.05%20M462%20361.05%20L528%20399.05%20528%20437.05%20495%20418.05%20462%20437.05%20429%20418.05%20462%20399.05%20429%20380.05%20462%20361.05%20M528%20475.05%20L528%20513%20527.95%20513%20495%20494.05%20528%20475.05%20M0%20513%20L0%20475.05%2033%20456.05%200%20437.05%200%20399.05%2066%20361.05%2099%20380.05%2033%20418.05%2066%20437.05%2099%20418.05%20132%20437.05%200.1%20513%200%20513%20M0%20285.05%20L0%20247%2066%20285.05%2099%20304.05%20132%20323.05%20165%20304.05%20198%20323.05%20165%20342.05%20231%20380.05%20264%20399.05%20297%20418.05%20264%20437.05%200%20285.05%20M396%20171%20L429%20152%20462%20133%20495%20152%20396%20209%20363%20228%20264%20285.05%20231%20266%20198%20247%20231%20228%20264%20247%20297%20228%20330%20209%20363%20190%20396%20171%20M297%20114%20L330%2095%20264%2057%20198%2095%20231%20114%20264%20133%20297%20114%22%3E%3C%2Fpath%3E%3Cpath%20stroke%3D%22none%22%20fill%3D%22%232c0a2e%22%20d%3D%22M297%20114%20L264%2095%20264%2057%20330%2095%20297%20114%20M495%200%20L528%200%20528%2019%20495%200%20M528%20133%20L528%20171%20495%20152%20462%20133%20429%20114%20429%2076%20528%20133%20M528%20437.05%20L528%20475.05%20495%20456.05%20495%20418.05%20528%20437.05%20M528%20513%20L528%20532%20495%20532%20495%20513.05%20495.1%20513%20495%20513%20495%20494.05%20527.95%20513%20528%20513%20M462%20532%20L429%20532%20429%20513.05%20429.1%20513%20429%20513%20429%20494.05%20396%20475.05%20363%20456.05%20363%20513%20362.95%20513%20363%20513.05%20363%20532%20330%20532%20330%20513.05%20330.1%20513%20330%20513%20330%20475.05%20330%20437.05%20297%20418.05%20264%20399.05%20264%20323.05%20231%20304.05%20231%20266%20264%20285.05%20264%20323.05%20297%20304.05%20297%20380.05%20429%20456.05%20429%20418.05%20396%20399.05%20429%20380.05%20462%20399.05%20429%20418.05%20462%20437.05%20462%20513%20461.95%20513%20462%20513.05%20462%20532%20M297%20494.05%20L264%20475.05%20231%20456.05%20198%20437.05%20198%20513%20197.95%20513%20198%20513.05%20198%20532%20165%20532%20165%20513.05%20165.1%20513%20165%20513%20165%20456.05%20165%20418.05%20132%20399.05%20132%20437.05%2099%20418.05%2099%20380.05%2066%20361.05%200%20323.05%200%20285.05%20264%20437.05%20264%20475.05%20297%20456.05%20297%20494.05%20M0%20475.05%20L0%20437.05%2033%20456.05%200%20475.05%20M66%20285.05%20L66%20209%200%20171%200%2019%2033%200%2033%20152%20165%20228%20165%20190%20198%20209%20198%20247%20198%20323.05%20165%20304.05%20165%20266%20132%20247%2099%20228%2099%20304.05%2066%20285.05%20M165%2038%20L165%200%20198%200%20198%2057%20165%2076%20165%2038%20M330%2057%20L330%200%20363%200%20363%2038%20396%2057%20363%2076%20330%2057%20M429%2038%20L429%200%20462%200%20462%2057%20429%2038%20M363%20152%20L396%20133%20396%20171%20363%20190%20363%20152%20M396%20209%20L396%20323.05%20363%20304.05%20363%20266%20363%20228%20396%20209%20M330%20323.05%20L363%20342.05%20330%20361.05%20330%20323.05%20M198%20171%20L165%20152%20165%20114%20297%20190%20297%20228%20264%20247%20264%20209%20231%20190%20198%20171%20M66%20133%20L66%2057%20132%2095%2066%20133%22%3E%3C%2Fpath%3E%3Cpath%20stroke%3D%22none%22%20fill%3D%22%23370f40%22%20d%3D%22M495%200%20L495%2076%20462%2057%20462%200%20495%200%20M528%20171%20L429%20228%20429%20304.05%20396%20323.05%20396%20209%20495%20152%20528%20171%20M528%20285.05%20L528%20323.05%20462%20361.05%20429%20380.05%20396%20399.05%20363%20380.05%20528%20285.05%20M495%20532%20L462%20532%20462%20513.05%20462.1%20513%20462%20513%20462%20437.05%20495%20418.05%20495%20456.05%20495%20494.05%20495%20513%20494.95%20513%20495%20513.05%20495%20532%20M396%20475.05%20L396%20513%20395.95%20513%20396%20513.05%20396%20532%20363%20532%20363%20513.05%20363.1%20513%20363%20513%20363%20456.05%20396%20475.05%20M330%20475.05%20L297%20494.05%20297%20456.05%20264%20475.05%20264%20437.05%20297%20418.05%20330%20437.05%20330%20475.05%20M231%20456.05%20L231%20513%20230.95%20513%20231%20513.05%20231%20532%20198%20532%20198%20513.05%20198.1%20513%20198%20513%20198%20437.05%20231%20456.05%20M165%20456.05%20L66.1%20513%2065.95%20513%2066%20513.05%2066%20532%200%20532%200%20513%200.1%20513%20132%20437.05%20132%20399.05%20165%20418.05%20165%20456.05%20M0%2019%20L0%200%2033%200%2066%200%2066%2057%2066%20133%2033%20152%2033%200%200%2019%20M198%200%20L231%200%20231%2038%20198%2057%20198%200%20M363%200%20L396%200%20396%2019%20363%2038%20363%200%20M363%20152%20L330%20171%20297%20152%20429%2076%20429%20114%20429%20152%20396%20171%20396%20133%20363%20152%20M330%20171%20L330%20209%20297%20228%20297%20190%20330%20171%20M363%20266%20L330%20285.05%20297%20304.05%20264%20323.05%20264%20285.05%20363%20228%20363%20266%20M330%20323.05%20L330%20361.05%20297%20380.05%20297%20304.05%20330%20323.05%20M264%2057%20L264%2095%20231%20114%20198%2095%20264%2057%20M165%2076%20L132%2057%20165%2038%20165%2076%20M231%20190%20L264%20209%20231%20228%20198%20247%20231%20266%20231%20304.05%20231%20380.05%20165%20342.05%20198%20323.05%20198%20247%20198%20209%20231%20190%20M165%20114%20L165%20152%20132%20171%2099%20152%20165%20114%20M99%20304.05%20L99%20228%20132%20247%20132%20323.05%2099%20304.05%20M99%20418.05%20L66%20437.05%2033%20418.05%2099%20380.05%2099%20418.05%20M33%20513.05%20L33.1%20513%2032.95%20513%2033%20513.05%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

svg {
  display: block;
  width: auto;
  max-width: 100vw;
  max-height: 100vh;
  margin: auto;
}

.penrose-bg {
  animation: fade 3s infinite linear;
}

.circle-spinner {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rotation 1.5s infinite cubic-bezier(0.68, -0.35, 0.265, 1.65);
  animation-delay: 0.5s;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.25; }
  100% { opacity: 1; }
}
              
            
!

JS

              
                
              
            
!
999px

Console