Responsive SVG background

In this example below you will see how to do a Responsive SVG background with some HTML / CSS and Javascript

Set SVG background size in viewport units, so the pattern can be responsive.

Thumbnail
This awesome code was written by kubasanitrak, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kubasanitrak ©
  • HTML
  • CSS
  • JavaScript
    <div class="wrapper">
	
<div class="grid-based-item"></div>
<div class="grid-based-item"></div>
</div>

/*Downloaded from https://www.codeseek.co/kubasanitrak/responsive-svg-background-aKoJYP */
    body {
// background: radial-gradient(circle, white 10%, transparent 10%),
//   radial-gradient(circle, white 10%, black 10%) 50% 50%;
// background-size:100px 100px;
	background: url(http://www.gpu.sanitrak.cz/assets/GPU-bgr-pattern.svg) top left repeat;
	background-size: 150vw 63vw;
	@media screen and (min-width: 38rem) {
		background-size: 100vw 42vw;
	}
	@media screen and (min-width: 60rem) {
		background-size: 50vw 21vw;
	}
}

$unitX: 100vw / 33;
$unitY: $unitX * 0.88461538;
$unitY: $unitX * 0.9;
.wrapper {
	// border: 1px solid pink;
	margin: 6.5vw 0;
	display: flex;
	justify-content: center;
	justify-content: space-evenly
}
.grid-based-item {
	width: 15 * $unitX;
	height: 25 * $unitY;
	background-color: #e2e2e2;
	position: relative;
	margin-left: -0.7vw;
	&::before {
		content:"";
		display: block;
		position: absolute;
		width: 0.60vw;
		height: 0.60vw;
		background-color: #000;
		border-radius: 50%;
		top: -0.3vw;
		left: -0.3vw;
	}
}


/*Downloaded from https://www.codeseek.co/kubasanitrak/responsive-svg-background-aKoJYP */
    

Comments