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

              
                p These are all variations on the basic technique illustrated 
	a(href='https://mastodon.social/@anatudor/112401133442879091' target='_blank') here
	| . The base code looks as follows:
pre
	span.token--decl
		span.token--prop background
		span.token--punc :
		|  
		span.token--val.token--list
			span.token--item
				span.token--func var
				span.token--punc (
				span.token--arg.token--prop --map
				span.token--punc )
			span.token--punc ,
			|  
			span.token--item
				span.token--func var
				span.token--punc (
				span.token--arg --pattern
				span.token--punc )
		span.token--punc ;
	span.token--decl
		span.token--prop background-blend-mode
		span.token--punc :
		|  
		span.token--val.token--keyw multiply
		span.token--punc ;
	span.token--decl
		span.token--prop filter
		span.token--punc :
		|  
		span.token--val.token--list
			span.token--item
				span.token--func contrast
				span.token--punc (
				span.token--arg.token--num 21
				span.token--punc )
	
section
	h2 Varying the pattern
	.card
		pre
			span.token--decl
				span.token--prop --pattern
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func repeating-radial-gradient
						span.token--punc (
						span.token--args
							span.token--arg.token--keyw circle
							span.token--punc ,
							|  
							span.token--arg #777
							span.token--punc ,
							|  
							span.token--arg #fff
							span.token--punc ,
							|  
							span.token--arg #777 1em
						span.token--punc )
	.card
		pre
			span.token--decl
				span.token--prop --pattern
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func linear-gradient
						span.token--punc (
						span.token--args
							span.token--arg #777
							span.token--punc ,
							|  
							span.token--arg #fff
						span.token--punc )
						|  
						span.token--pos 0
						span.token--sep /
						|  
						span.token--size 1% 1em
	.card
		pre
			span.token--decl
				span.token--prop --pattern
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func repeating-conic-gradient
						span.token--punc (
						span.token--args
							span.token--arg #777
							span.token--punc ,
							|  
							span.token--arg #fff
							span.token--punc ,
							|  
							span.token--arg #777 2.5%
						span.token--punc )
	.card
		pre
			span.token--decl
				span.token--prop --dot
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func radial-gradient
						span.token--punc (
						span.token--args
							span.token--arg.token--keyw closest-side
							span.token--punc ,
							|  
							span.token--arg #777
							span.token--punc ,
							|  
							span.token--arg #fff 75%
						span.token--punc )
				span.token--punc ;
			span.token--decl
				span.token--prop --pattern
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func var
						span.token--punc (
						span.token--arg --dot
						span.token--punc )
						|  
						span.token--pos 0 0
						span.token--sep /
						|  
						span.token--size 2em 2em
					span.token--punc ,
					|  
					span.token--item
						span.token--func var
						span.token--punc (
						span.token--arg --dot
						span.token--punc )
						|  
						span.token--pos 1em 1em
						span.token--sep /
						|  
						span.token--size 2em 2em
	.card
		pre
			span.token--decl
				span.token--prop --pattern
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func linear-gradient
						span.token--punc (
						span.token--args
							span.token--arg.token--ang 90deg
							span.token--punc ,
							|  
							span.token--arg #777
							span.token--punc ,
							|  
							span.token--arg #fff
						span.token--punc )
						|  
						span.token--pos 0
						span.token--sep /
						|  
						span.token--size 1em
	.card
		pre
			span.token--decl
				span.token--prop --pattern
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func repeating-conic-gradient
						span.token--punc (
						span.token--args
							span.token--arg #fff
							span.token--punc ,
							|  
							span.token--arg #777
							span.token--punc ,
							|  
							span.token--arg #fff 25%
						span.token--punc )
						|  
						span.token--pos 0 0
						span.token--sep /
						|  
						span.token--size 3em 3em
	p Such a pattern variation is what creted this 
		a(href='https://codepen.io/thebabydino/pen/jOvMQMO' target='_blank') pure CSS retro wave
		| .
section
	h2 Varying the map
	.card
		pre
			span.token--decl
				span.token--prop --map
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func radial-gradient
						span.token--punc (
						span.token--args
							span.token--arg.token--keyw circle
							span.token--punc ,
							|  
							span.token--arg #888
							span.token--punc ,
							|  
							span.token--arg #fff
						span.token--punc )
	.card
		pre
			span.token--decl
				span.token--prop --map
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func repeating-linear-gradient
						span.token--punc (
						span.token--args
							span.token--arg.token--ang 45deg
							span.token--punc ,
							|  
							span.token--arg #fff
							span.token--punc ,
							|  
							span.token--arg #888
							span.token--punc ,
							|  
							span.token--arg #fff 33%
						span.token--punc )
	.card
		pre
			span.token--decl
				span.token--prop --map
				span.token--punc :
				|  
				span.token--val.token--list
					span.token--item
						span.token--func conic-gradient
						span.token--punc (
						span.token--args
							span.token--arg #fff
							span.token--punc ,
							|  
							span.token--arg #888
							span.token--punc ,
							|  
							span.token--arg #fff
						span.token--punc )
	p The map can also be a 
		code .jpg
		|  image, like in 
		a(href='https://codepen.io/thebabydino/pen/LYGGwrm' target='_blank') this demo
		| . And since CSS gradients can be animated by animating CSS variables they depend on, this means that a map animation gives us 
		a(href='https://codepen.io/thebabydino/pen/gOpMeWv' target='_blank') animated halftone patterns
		| . Here's also a 
		a(href='https://codepen.io/thebabydino/pen/RwQjpmQ' target='_blank') variation on this in 3D
		| .
section
	h2 Varying both the pattern and map
	p This gives us even more interesting results, such as these 
		a(href='https://codepen.io/thebabydino/pen/xxYMOoQ' target='_blank') varying stripes
		|  or  
		a(href='https://codepen.io/thebabydino/pen/LYyNVJQ' target='_blank') dash dot patterns
		| . Or, why not, 
		a(href='https://codepen.io/thebabydino/pen/QWMRWRQ' target='_blank') these cards
		| . This 
		a(href='https://codepen.io/thebabydino/pen/MWPWXXw?editors=0100') blinds animation
		|  was created in a similar fashion, it's just that in this case, we're varying the background-position.
footer
	p
		strong One more thing.
		|  If you like the Maths and Physics infused CSS, canvas and SVG work that I've been putting out for over a decade, you can support it by being a cool cat and becoming a patron on 
		a(href='https://www.patreon.com/anatudor' target='_blank') Patreon
		|  or with a one time donation on 
		a(href='https://ko-fi.com/anatudor' target='_blank') Ko-fi
		| . Or at least by sharing this to show the world what can be done on the web these days... because I think it's pretty damn cool!
              
            
!

CSS

              
                html, body, section, div, pre { display: grid }

html { min-height: 100% }

body {
	background: #3a3043;
	color: #ededed;
	font: 1.5em handlee, purisa, comic sans ms, cursive
}

a { color: hotpink }

section {
	grid-gap: .5em;
	place-self: center;
	grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
	width: min(76rem, 100%)
}

p, h2 {
	grid-column: 1/ -1;
	text-align: center
}

.card {
	--pattern: 
		radial-gradient(closest-side, #777, #fff) 0 0/ 1em 1em;
	height: min(50vh, 30em);
	box-shadow: 2px 2px 5px #000;
	background: #c4b7d0;
	
	&::before, pre { grid-area: 1/ 1 }
	
	&::before {
		background: var(--pattern), 
			var(--map, linear-gradient(90deg, #888, #fff));
		background-blend-mode: multiply;
		filter: contrast(21);
		mix-blend-mode: darken;
		content: ''
	}
	
	section:first-of-type & {
		&:nth-of-type(1) {
			--pattern: repeating-radial-gradient(circle, #777, #fff, #777 1em)
		}

		&:nth-of-type(2) {
			--pattern: linear-gradient(#777, #fff) 0/ 1% 1em
		}

		&:nth-of-type(3) {
			--pattern: repeating-conic-gradient(#777, #fff, #777 2.5%)
		}

		&:nth-of-type(4) {
			--dot: radial-gradient(closest-side, #777, #fff 75%);
			--pattern: var(--dot) 0 0/ 2em 2em, var(--dot) 1em 1em/ 2em 2em
		}

		&:nth-of-type(5) {
			--pattern: linear-gradient(90deg, #777, #fff) 0/ 1em
		}

		&:nth-of-type(6) {
			--pattern: repeating-conic-gradient(#fff, #777, #fff 25%) 0 0/ 3em 3em
		}
	}
	
	section:nth-of-type(2) & {
		&:nth-of-type(1) {
			--map: radial-gradient(#888, #fff)
		}
		
		&:nth-of-type(2) {
			--map: repeating-linear-gradient(45deg, #fff, #888, #fff 33%)
		}
		
		&:nth-of-type(3) {
			--map: conic-gradient(#fff, #888, #fff)
		}
	}
}

pre {
	place-self: center;
	z-index: 1;
	padding: .5em;
	box-shadow: inherit;
	background: #2b213aed;
	color: #ededed;
	font-size: .8em
}

.token {
	.card &--item::before { content: '\A   '	}
	&--decl:first-child &--pos::before { content: '\A     '	}
	
	&--arg:is(.token--keyw, .token--ang) + &--punc + &--arg, .card:nth-of-type(3n) &--arg:first-child {
		&::before { content: '\A       ' }
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console