/ Background Patterns

6 stop shirt pattern

6 stop shirt pattern

6 stop shirt pattern

Idea from this tweet - minimum number of stops needed to recreate the shirt pattern.

6-stop-shirt-pattern

Fun flight. @svgeesus & I debated what's the min # of stops needed to make this guy's shirt pattern w/ CSS gradients

Made with

Html
Css/scss

Author

Ana Tudor

Css

$size: 9em;
$strip: .25em;

html {
	height: 100vh;
	background: 
		linear-gradient(90deg, 
			  #fff $strip, transparent 0), 
		linear-gradient(90deg, 
			  #36599d 50%, transparent 0), 
		linear-gradient(90deg, 
			  #643140 50%, #0a226a 0);
	background-size: 
		.25*$size, .5*$size, $size;
}

Demo

See the Pen 6 stop shirt pattern by Ana Tudor (@thebabydino) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More