5+ JavaScript Background Pattern Examples

This post contains a total of 5+ JavaScript Background Pattern Examples with Source Code. All these Background Patterns are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Background Pattern Examples

1. By Stuart Trann

Made by Stuart Trann. Alphabet Soup Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
.letter-grid {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: -1;
}
.letter-grid span {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.25);
  display: block;
  float: left;
  font-size: 10px;
  opacity: 0;
  padding: 10px;
  text-transform: uppercase;
  transition: background-color .75s, color .75s, opacity .75s, transform .5s;
  user-select: none;
  visibility: hidden;
  width: 10px;
  height: 10px;
}
.letter-grid span:hover {
  background-color: orange;
  color: white;
  cursor: default;
}
.letter-grid span:nth-child(5n+1) {
  color: orange;
  font-weight: bold;
  transform: rotate(45deg);
}
.letter-grid span:nth-child(10n+1) {
  transform: rotate(-45deg);
}
.letter-grid span:nth-child(5n+1):hover {
  color: white;
}

.js-show-letters span {
  opacity: 1;
  visibility: visible;
}
</style>
</head>
<body>
  <div class="letter-grid"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>
      <script>
(function () {
  // setup

  var grid = document.querySelector('.letter-grid');
  var gridWidth;
  var gridHeight;
  var letterWidth = 30; // @todo: make this dynamic
  var letterHeight = 30; // @todo: make this dynamic
  var totalLetters;
  var letterArray = [];
  var currentLetters = 0;
  var resizeCount = 0;

  // the unicode values that we want to loop through (A-Z)
  // http://www.codingforums.com/showpost.php?s=ca38992f8716f43d325c12be6fc0198b&p=843844&postcount=3

  var charCodeRange = {
    start: 65,
    end: 90 };


  // get the grid's width and height

  function getDimensions() {
    var gridRect = grid.getBoundingClientRect();
    gridWidth = gridRect.width;
    gridHeight = gridRect.height;
    console.log('Grid width: ' + gridWidth, '\nGrid height: ' + gridHeight);
  }

  // get the total possible letters needed to fill the grid
  // and store that in totalLetters

  function getTotalLetters() {
    var multiplierX = gridWidth / letterWidth;
    var multiplierY = gridHeight / letterHeight;
    totalLetters = Math.round(multiplierX * multiplierY);
    console.log('multiplierX: ' + multiplierX, '\nmultiplierY: ' + multiplierY, '\ntotalLetters: ' + totalLetters);
  }

  // loop through the unicode values and push each character into letterArray

  function populateLetters() {
    for (var i = charCodeRange.start; i <= charCodeRange.end; i++) {if (window.CP.shouldStopExecution(0)) break;
      letterArray.push(String.fromCharCode(i));
    }window.CP.exitedLoop(0);
    console.log('letterArray: ' + letterArray, '\nletterArray.length: ' + letterArray.length);
  }

  // a function to loop a given number of times (value), each time
  // appending a letter from the letter array to the grid

  function drawLetters(value) {
    var text;
    var span;
    var count = 0;

    for (var letter = 0; letter <= value; letter++) {if (window.CP.shouldStopExecution(1)) break;
      text = document.createTextNode(letterArray[count]);
      span = document.createElement('span');
      span.appendChild(text);
      grid.appendChild(span);
      count++;

      // if our count equals the length of our letter array, then that
      // means we've reached the end of the array (Z), so we set count to 
      // zero again in order to start from the beginning of the array (A).
      // we keep looping over the letter array 'value' number of times.

      if (count === letterArray.length) {
        count = 0;
      }

      // if our for counter var (letter) equals the passed in value argument
      // then we've finished our loop and we throw a class onto the grid element

      if (letter === value) {
        grid.classList.add('js-show-letters');
      }
    }window.CP.exitedLoop(1);
  }

  // get the length of the grid.find('span') jQuery object
  // essentially the current number of letters in the grid at this point

  function getCurrentLetters() {
    currentLetters = grid.querySelectorAll('span').length;
    console.log('currentLetters: ' + currentLetters);
  }

  function init() {
    populateLetters();
    getDimensions();
    getTotalLetters();
    drawLetters(totalLetters);
    getCurrentLetters();
  }

  function onResize() {
    console.log('\nresizeCount: ' + resizeCount + '\n');
    resizeCount++;
    getDimensions();
    getTotalLetters();

    // here we're looking to see if the current number of letters in the grid
    // (currentLetters) is less than the total possible letters
    // if so, we figure out how many need to be added to fill it up, then draw them

    if (currentLetters < totalLetters) {
      var difference = totalLetters - currentLetters;
      drawLetters(difference);
    }

    // update currentLetters with the current number of letters in the grid

    getCurrentLetters();
  }

  init();

  // do everything we've done so far, except on window resize using debounce to 
  // ensure that resize isn't going nuts firing all this code constantly

  window.addEventListener('resize', _.debounce(onResize, 100));
})();
    </script>
</body>
</html>

2. By Yuanchuan

Made by Yuanchuan. Random JavaScript Background pattern, New Background Pattern on Reload. Source

JavaScript Background Pattern by YuanChuan
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body { 
  height: 100%; 
  margin: 0 
}
body { 
  display: flex; 
  align-items: center; 
  justify-content: center 
}
</style>
</head>
<body>
<x-graph numbers="30" style="--size:80vh;"></x-graph>
      <script>
customElements.define('x-graph', class extends HTMLElement {
  constructor() {
    super();
    let num = parseInt(this.getAttribute('numbers'), 10) || 1;
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        :host {
        --width: var(--size, '480px');
        --num: ${num};
        width: var(--width);
        min-width: var(--width);
      }
      .graph {
        --cell-size: calc(var(--size, 80vh) / var(--num) * 5);
        width: var(--cell-size);
        height: var(--cell-size);
        background: #fafafa;
        position: relative;
        float: left;
      }
      .graph:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--corner, '100% 0 0 0');
        background: var(--color, #a00);
      }
      </style>
      ${'<div class="graph"></div>'.repeat(num)}
    `;
  }
  _random(array) {
    return array[Math.floor(Math.random() * array.length)];
  }
  connectedCallback() {
    const graphs = this.shadowRoot.querySelectorAll('.graph');
    [].forEach.call(graphs, g => {
      g.style.setProperty('--color', this._random([
      '#272884', '#c73095', '#90278a', '#4c207f']));

      g.style.setProperty('--corner', this._random([
      '100% 0 0 0', '0 100% 0 0',
      '0 0 100% 0', '0 0 0 100%']));

    });
  }});
    </script>
</body>
</html>

3. By Florin Pop

Made by Florin Pop. Random Background Patterns Generator. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

html, body {
	font-family: 'Muli';
	margin: 0;
	padding: 0;
}

#container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.element {
	transition: all 0.5s linear;
	transform-origin: center center;
}

.settings {
	background-color: #001F61;
	color: #fff;
	padding: 15px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	width: 200px;
}

.settings h2 {
	margin: 0 0 5px;
	text-align: center;
}

.settings label {
	font-size: 12px;
}

.settings p {
	margin: 10px 0 5px;
}

.settings input[type='number'], .settings select {
	padding: 7px;
	font-size: 14px;
	width: 100%;
}

/* SOCIAL PANEL CSS */
.social-panel-container {
	position: fixed;
	right: 0;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
	transform: translateX(-10px);
}

.social-panel {	
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
	border: 5px solid #001F61;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Muli';
	position: relative;
	height: 169px;	
	width: 370px;
	max-width: calc(100% - 10px);
}

.social-panel button.close-btn {
	border: 0;
	color: #97A5CE;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #001F61;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 235px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #FF7500;
	text-decoration: none;
}

.social-panel h4 {
	margin: 20px 0;
	color: #97A5CE;	
	font-family: 'Muli';	
	font-size: 14px;	
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li a {
	border: 1px solid #DCE1F2;
	border-radius: 50%;
	color: #001F61;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.social-panel ul li a:hover {
	border-color: #FF6A00;
	box-shadow: 0 9px 12px -9px #FF6A00;
}

.floating-btn {
	border-radius: 26.5px;
	background-color: #001F61;
	border: 1px solid #001F61;
	box-shadow: 0 16px 22px -17px #03153B;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #ffffff;
	color: #001F61;
}

.floating-btn:focus {
	outline: none;
}

.floating-text {
	background-color: #001F61;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: 'Muli';
	padding: 7px 15px;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 998;
}

.floating-text a {
	color: #FF7500;
	text-decoration: none;
}

@media screen and (max-width: 480px) {

	.social-panel-container.visible {
		transform: translateX(0px);
	}
	
	.floating-btn {
		right: 10px;
	}
}
</style>
</head>
<body>
  <div class="settings">
	<h2>Settings</h2>
	<div class="radius">
		<p>Radius:</p>
		<label>1</label><input type="checkbox" checked>
		<label>2</label><input type="checkbox">
		<label>3</label><input type="checkbox">
		<label>4</label><input type="checkbox">
	</div>
	<p>Items:</p>
	<input type="number" id="items" value="15" />
	<p>Colors:</p>
	<select id="colors">
		<option value="purplish">Purplish</option>
		<option value="redish">Redish</option>
		<option value="blueish">Blueish</option>
		<option value="greenish">Greenish</option>
		<option value="brownish">Brownish</option>
	</select>
</div>
<div id="container"></div>

<!-- SOCIAL PANEL HTML -->
<div class="social-panel-container">
	<div class="social-panel">
		<p>Created with <i class="fa fa-heart"></i> by
			<a target="_blank" href="#">Florin Pop</a></p>
		<button class="close-btn"><i class="fas fa-times"></i></button>
		<h4>Get in touch on</h4>
		<ul>
			<li>
				<a href="#" target="_blank">
					<i class="fab fa-discord"></i>
				</a>
			</li>
			<li>
				<a href="#" target="_blank">
					<i class="fab fa-twitter"></i>
				</a>
			</li>
			<li>
				<a href="#" target="_blank">
					<i class="fab fa-linkedin"></i>
				</a>
			</li>
			<li>
				<a href="#" target="_blank">
					<i class="fab fa-facebook"></i>
				</a>
			</li>
			<li>
				<a href="#" target="_blank">
					<i class="fab fa-instagram"></i>
				</a>
			</li>
		</ul>
	</div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
const container = document.getElementById('container');
const radiusCB = document.querySelectorAll('.radius input');
const itemsEl = document.getElementById('items');
const colorsEl = document.getElementById('colors');

const colorsObj = {
  'purplish': ['#262486', '#CA2996', '#92208E', '#4C1981'],
  'redish': ['#f9d5bb', '#f66767', '#d35656', '#3c3d47'],
  'greenish': ['#42b883', '#347474', '#35495e', '#ff7e67'],
  'brownish': ['#46211a', '#693d3d', '#ba5536', '#a43820'],
  'blueish': ['#00487C', '#4BB3FD', '#0496FF', '#027BCE'] };


let colors = [...colorsObj.purplish];
let items = 15;
let radiusArr = ['100%', '0%', '0%', '0%'];

radiusCB.forEach((checkbox, idx) => {
  checkbox.addEventListener('change', e => {
    radiusArr[idx] = e.target.checked ? '100%' : '0%';
    createTiles();
  });
});

itemsEl.addEventListener('change', e => {
  items = +e.target.value;
  createTiles();
});

colorsEl.addEventListener('change', e => {
  colors = [...colorsObj[e.target.value]];
  createTiles();
});

function createTiles() {
  // Clear everything
  container.innerHTML = '';

  const { innerWidth: width, innerHeight: height } = window;
  const radius = radiusArr.reduce((acc, el) => acc += `${el} `, '');
  const itemsRow = items;
  const itemsCol = items;
  const rowSize = width / itemsRow;
  const colSize = height / itemsCol;

  for (let i = 0; i < itemsRow; i++) {if (window.CP.shouldStopExecution(0)) break;
    const parentEl = document.createElement('div');
    for (let j = 0; j < itemsCol; j++) {if (window.CP.shouldStopExecution(1)) break;
      const size = Math.floor(Math.max(rowSize, colSize));
      const el = document.createElement('div');
      el.classList.add('element');
      el.style.width = `${size}px`;
      el.style.height = `${size}px`;
      el.style.background = colors[Math.floor(Math.random() * colors.length)];
      el.style.borderRadius = radius;
      el.style.transform = `rotate(${Math.floor(Math.random() * 4) * 90}deg)`;
      parentEl.appendChild(el);
    }window.CP.exitedLoop(1);
    container.appendChild(parentEl);
  }window.CP.exitedLoop(0);

}

createTiles();

// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
  social_panel_container.classList.toggle('visible');
});

close_btn.addEventListener('click', () => {
  social_panel_container.classList.remove('visible');
});
    </script>
</body>
</html>

4. By Dudley Storey

Made by Dudley Storey. Dynamic SVG Background Patterns. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  min-height: 100vh;
  background-color: #000;
  margin: 0;
  font-family: Avenir, sans-serif;
}

form {
  position: absolute;
  padding: 1rem;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  line-height: 2.5;
}

output {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  color: #fff;
  font-size: 1.2rem;
  min-height: 3rem;
  padding: 1rem;
  font-family: monospace;
}
</style>
</head>
<body>
  <form action="#" id="patterncontrols">
  <label for="radius">Radius</label>
  <input type="range" min="1" max="200" value="100" id="radius"/><br>
  <label for="thickness">Thickness</label>
  <input type="range" min="1" max="20" value="2" id="thickness"/><br>
  <label for="spacing">Spacing</label>
  <input type="range" min="10" max="200" value="125" id="spacing"/><br>
  <label for="circColor">Color</label>
  <input type="color" value="#ffffff" id="circColor"/><br>
  <label for="sizing">Size</label>
  <input type="range" min="50" max="500" value="250" id="sizing"/><br>
</form>
      <script>
function svg() {
  var radius = document.getElementById("radius").value;
  var thickness = document.getElementById("thickness").value;
  var spacing = document.getElementById("spacing").value;
  var circColor = document.getElementById("circColor").value;
  var sizing = document.getElementById("sizing").value;
  var svgString = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" id="linkedcircles"><defs><pattern id="chainedcircles" patternUnits="userSpaceOnUse" width="' + sizing + '" height="' + sizing + '"><circle cx="' + sizing / 2 + '" cy="' + sizing / 2 + '" r="' + radius + '" stroke-width="' + thickness + '" stroke="' + circColor + '" fill="none" id="circ" /><use xlink:href="#circ" /><use xlink:href="#circ" transform="translate(' + spacing + ')"/><use xlink:href="#circ" transform="translate(-' + spacing + ')"/><use xlink:href="#circ" transform="translate(0 ' + spacing + ')"/><use xlink:href="#circ" transform="translate(0 -' + spacing + ')"/></pattern></defs><rect width="100%" height="100%" fill="url(#chainedcircles)" /></svg>';
  var encodedData = window.btoa(svgString);
  var url = 'data:image/svg+xml;base64,' + encodedData;
  document.body.style.backgroundImage = "url(" + url + ")";
}
svg();
var patternMaker = document.getElementById("patterncontrols");
var codeOutput = document.querySelector("output code span");
patternMaker.addEventListener("input", function (e) {
  svg();
});
    </script>
</body>
</html>

5. By Yuanchuan

Made by yuanchuan. Multiple Background patterns with Full screen display on click feature. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* Layout things */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, main {
  height: 100%;
}

body {
  background: #35363A;
}

main {
  display: grid;
  place-items: center;
  max-width: 80em;
  margin: auto;
}

ul {
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1em;
  padding: 2em;
  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
}

li {
  height: 20em;
  border: 6px solid #fff;
  overflow: hidden;
}

li css-doodle {
  transition: transform .2s ease;
  will-change: transform;
}

li.active {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  border: none;
}
li.active css-doodle {
  animation: scale-down .4s ease;
}
li:not(.active):hover {
  cursor: pointer;
}
li:not(.active):hover css-doodle {
  transform: scale(1.02);
}
li.active:after {
  content: '';
  cursor: pointer;
  position: fixed;
  top: 1em;
  right: 1em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg stroke='%23fff' stroke-width='.5'%3E%3Cline x1='1' y1='1' x2='9' y2='9' /%3E%3Cline x1='9' y1='1' x2='1' y2='9' /%3E%3C/g%3E%3C/svg%3E");
  background-color: rgba(0, 0, 0, .8);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center center;
}

@keyframes scale-down {
  from { transform: scale(1.02); }
  to { transform: scale(1); }
}
</style>
</head>
<body>
<style>
css-doodle {
  
  --pattern-1: (
    @grid: 1 / 100%;
    background: @doodle(
      @grid: 1 / 100%;
      background-size: 300px 300px;
      background-image: @doodle(
        :doodle {
          @grid: 5x12 / 100% 240%;
          transform: scale(1.25);
        }
        top: calc(@y * -30px);
        :before, :after {
          content: '';
          @size: 100%;
          position: absolute;
          left: @pn(auto, 50%);
          top: @pn(auto, 25%);
          border-radius: 50%;
          z-index: calc(@y - @pn(2, 1));
          background: repeating-radial-gradient(
            @stripe(#023967 4px, #c5dff5 2px)
          );
        }
      );
    );
  );
  
  --pattern-2: (
    @grid: 1 / 100%;
    background: @doodle(
      @grid: 1 / 100%;
      background-color: #f5f8ff;
      background-size:  160px 160px;
      background-image: @doodle(
        :doodle {
          @grid: 3 / 100%;
          transform: scale(calc(3 / 2));
        }
        :after, :before {
          content: '';
          @size: 100%;
          border-radius: 50%;
          position: absolute;
          border: 3px double #4169E1;
          background: @doodle(
            @grid: 1 / 100%;
            @shape: clover 4;
            background: #4169E1;
          );
          background-size: 45% 45%;
          background-repeat: no-repeat;
          background-position: 50% 52%;
        }
        :before {
          transform: translate(50%, 50%);
        }
      );
    );
  );

  --pattern-3: (
    @grid: 1 / 100%;
    background-color: #fff;
    background-image: @doodle(
      @grid: 1 / 100%;
      background-size:  180px 180px;
      background-image: @doodle(
        :doodle {
          @grid: 3 / 100%;
          transform: scale(calc(3 / 2));
        }
        z-index: @ri(100);
        :after, :before {
          content: '';
          @size: 100%;
          border-radius: 50%;
          position: absolute;
          background: radial-gradient(
            @[email protected]@pn(#654062, #fff, transparent)
          );
        }
        :before {
          transform: translateX(50%) translateY(50%);
        }
      );
    );
  );

  --pattern-4: (
    @grid: 1 / 100%;
    background-color: #332B33;
    background-image: @doodle(
      :doodle {
        @grid: 1 / 10000px;
        transform: scale(1.5) rotate(45deg);
      }
      background-size: 50px 50px;
      background-image: @doodle(
        :doodle {
          @grid: 8x1 / 90%;
          border-radius: 0% 60%;
          overflow: hidden;
        }
        position: absolute;
        border: 1px solid #BCB8BB;
        @nth(1) { border-radius: 0% 60%; }
        @size: calc(100% - 100% / @I * (@i - 1));
        background: linear-gradient(
          45deg, @stripe(transparent, #BCB8BB 1px, transparent)
        );
      );
    );
  );

  --pattern-5: (
    @grid: 1 / 100%;
    background: @doodle(
      :doodle {
        @grid: 1 / 10000px;
        transform: rotate(45deg) scale(2);
      }
      background-size: 30px 30px;
      background-image: @doodle(
        @grid: 5x1 / calc(100% + 1px);
        @place-cell: center;
        @size: calc(100% - 100% / @I * (@i - 1));
        border-radius: calc(100% / @I * (@i - 1));
        border: 1px solid #003049;
        background: @pn(
          #d62828, #f77f00, #fcbf49, #eae2b7
        );
      );
    );
  );

  --pattern-6: (
    @grid: 1 / 100%;
    background-color: #fff;
    background-image: @doodle(
      @grid: 1 / 100%;
      background-size:  125px 125px;
      background-image: @doodle(
        :doodle {
          @grid: 3 / 100%;
          transform: scale(calc(3 / 2));
        }
        z-index: @ri(100);
        :after, :before {
          content: '';
          @size: 100%;
          border-radius: 50%;
          position: absolute;
          background: radial-gradient(
            @[email protected]@pn(#F7D006, #52514F)
          );
        }
        :before {
          transform: translate(50%, 50%);
        }
      );
    );
  );

  --pattern-7: (
    @grid: 1 / 100%;
    background-size: 83px 135px;
    background-color: #D24B45;
    background-image: @doodle(
      @grid: 2 / 100%;
      background: @pn(#3C2B34, #F7F0E9, #F7F0E9);
      transform-origin: @pn(100% 100%, 0 100%, 100% 0, 0 0);
      transform:
        rotateX(45deg)
        skewY(@pn(34deg, -34deg, -34deg));
    );
  );

  --pattern-8: (
    @grid: 1 / 100%;
    background: @doodle(
      :doodle {
        @grid: 1 / 10000px;
        transform: scale(1.5) rotate(45deg);
      }
      background-size: 150px 150px;
      background-color: #1d3557;
      background-image: @doodle(
        @grid: 4 / 100%;
        :after {
          content: '';
          @size: 100%;
          position: absolute;
          background: @doodle(
            @grid: @p([1-4]) / 100%;
            @shape: triangle;
            background: @p(#e63946, #f1faee, #a8dadc, #457b9d);
            transform: rotate(@p(0, 180deg)) scale(.8);
          );
        }
      );
    );
  );

  --pattern-9: (
    @grid: 1 / 100%;
    background-color: #211a4c;
    background-image: @doodle(
      :doodle {
        @grid: 1 / 10000px;
        transform: scale(1.5) rotate(45deg);
      }
      background-size: 300px 300px;
      background-image: @doodle(
        @grid: 1 / 100%;
        background: @doodle(
          @grid: @r(8) / 100%;
           background: @doodle(
            @grid: @r(10) / 100%;
            background: radial-gradient(
              @[email protected]@p(
                @m10(#293462),
                @m10(#211a4c), 
                @m2(#b2ebf2), 
                #e84a5f
              )
            );
          );
        );
      );
    );
  );

  --pattern-10: (
    @grid: 1 / 100%;
    background: @doodle(
      :doodle {
        @grid: / 10000px;
        transform: scale(1.5) rotate(45deg);
      }
      background-color: #213061;
      background-size: 150px 150px;
      background-image: @doodle(
        @grid: 10 / 100%;
        :after, :before {
          content: '';
          position: absolute;
          left: 50%; top: 50%;
          @size: @r(10%, 50%) 1px;
          transform: rotate(@r(360deg));
          transform-origin: 0 50%;
          background: currentColor;
          color: #fff9;
        }
      );
    );
  );
  
  --pattern-11: (
    @grid: 1 / 100%;
    background-size: 200px 200px;
    background-image: @doodle(
      @grid: 1 / 100%;
      background-color: #005874;
      background-image: @[email protected](
        @grid: 1 / 50px;
        background: @p(#65d6ce,#1c819e,#e6e6d4,#ffbe00);
        transform: rotate(@r(360deg)) scale(@r(.5, 1));
        clip-path: @shape(
          split: 50;
          scale: .3;
          x: cos(t) + cos(2t) * 2;
          y: sin(2t) + sin(t) * 2;
        );
      );
      background-position: 
        -25px 45px, 50px 75px, 90px 95px,
        160px 165px, 20px 0, 22px -65px,
        110px -18px, 120px 34px, 130px 125px,
        5px 90px;
    );
  );
  
  --pattern-12: (
    @grid: 1 / 100%;
    background-size: 300px 300px;
    background-color: #293D56; 
    background-image: @doodle(
      @grid: 16x1 / 100%;
      @place-cell: center;
      @size: 100%;
      background-image: @doodle(
        @grid: 1 / 80px;
        background: @p(#ff6f6f,#fff46e,#f6f6f6,#a58bff);
        transform: rotate(@r(360deg)) scale(@r(.5, 1));
        clip-path: @shape(
          split: 240;
          y: sin(2t) * sin(4t) * cos(5t);
          x: cos(2t) * cos(5t) * sin(t); 
        );
      );
      background-position: @pn(
        -5px 10px, 65px 25px, 80px 90px, 110px -40px, -40px 120px,
        40px 240px, 90px 180px, 150px 190px, 160px 40px, 220px 60px,
        240px 240px, 210px 160px, 20px 150px,  160px 100px
      );
      z-index: 2;
      @nth(15, 16) {
        z-index: 1;
        background: @m90(
          radial-gradient(
            @p(#ff6f6f,#fff46e,#f6f6f6,#a58bff) @r(50%), 
            transparent 0
          ) 
          @r(100%) @r(100%) / @r(10px) @lr 
          no-repeat
        );
      }
    );
  );
  
}
</style>

<main>
  <ul>
    <li> <css-doodle use="var(--pattern-1)"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-2)"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-3)"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-4)"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-5)"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-6)" seed="1608648378232"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-7)"></css-doodle></li>
    <li> <css-doodle use="var(--pattern-8)" seed="1608633329491"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-9)" seed="1608634842475"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-10)" seed="1608625270519"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-11)" seed="1608724650251"></css-doodle> </li>
    <li> <css-doodle use="var(--pattern-12)" seed="1608732448356"></css-doodle> </li>
  </ul>
</main>
  <script src='https://unpkg.com/[email protected]/css-doodle.min.js'></script>
      <script>
Array.from(document.querySelectorAll('li')).forEach(li => {
  li.addEventListener('click', e => {
    li.classList.toggle('active');
    return false;
  });
});
    </script>
</body>
</html>

6. By Akshaya Venky

Made by Akshaya Venky. Multiple Patterns using Gradients. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
  
<style>
/* VARIABLES -  START */
/* COLORS  */
/* DIMENSIONS */
/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
/* VARIABLES - END */
/* COMMONS - START */
.flex-center, .body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

* {
  box-sizing: border-box;
  margin: 0;
}

/* COMMONS - END */
/* STYLES -  START */
.body .page-title {
  position: fixed;
  top: 0;
  left: 0;
  height: 35px;
  width: 100%;
  padding: 5px;
  font: 20px "Lato", sans-serif;
  text-align: center;
  z-index: 10;
  background-color: white;
}
.body .page-title span {
  background: linear-gradient(to right, royalblue, darkblue, black);
  -webkit-background-clip: text;
  color: transparent;
}

.wrapper {
  text-align: center;
  margin-top: 40px;
}
.wrapper .pattern {
  margin: 10px;
  cursor: pointer;
  position: relative;
  overflow-y: auto;
  transition: border-radius 0.2s;
}
.wrapper .pattern.close {
  width: 180px;
  height: 180px;
  display: inline-block;
  border-radius: 90px;
  box-shadow: 5px 5px 5px #999;
}
.wrapper .pattern:hover .title {
  display: block;
}
.wrapper .pattern.fill {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  z-index: 15;
  overflow: hidden;
  margin: 0;
}
.wrapper .pattern.fill .icon {
  display: block;
}
.wrapper .pattern.fill .title {
  display: none;
}
.wrapper .pattern .icon {
  color: black;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  display: none;
}
.wrapper .pattern .title {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: "Lato", sans-serif;
  padding-top: calc(50% - 12px);
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  color: white;
}
.wrapper .pattern.one {
  background: linear-gradient(-45deg, white 50%, transparent 50%) 8px 0, linear-gradient(45deg, transparent 50%, pink 50%), white;
  background-size: 32px 32px;
}
.wrapper .pattern.two {
  background: linear-gradient(-45deg, plum 25%, transparent 50%, plum 25%) 16px 0, linear-gradient(45deg, plum 25%, transparent 50%, plum 25%), black;
  background-size: 32px 128px;
}
.wrapper .pattern.three {
  background-color: white;
  background-image: radial-gradient(navy 4px, aqua 5px, transparent 12px, transparent 15px, darkblue 16px, darkblue 20px, transparent 21px, transparent 25px);
  background-size: 60px 60px;
}
.wrapper .pattern.four {
  background: linear-gradient(-45deg, white 50%, transparent 50%) 1px 0, linear-gradient(45deg, transparent 50%, rosybrown 50%), linear-gradient(135deg, white 50%, transparent 50%) 16px 0, linear-gradient(-135deg, transparent 50%, rosybrown 50%), white;
  background-size: 18px 54px;
}
.wrapper .pattern.five {
  background: linear-gradient(60deg, mintcream 50%, transparent 50%) 6px 0, linear-gradient(-60deg, transparent 50%, midnightblue 50%), mintcream;
  background-size: 32px 32px;
}
.wrapper .pattern.six {
  background: radial-gradient(circle, white 20px, skyblue 10px), skyblue;
  background-size: 25px 60px;
}
.wrapper .pattern.seven {
  background: radial-gradient(snow 16px, transparent 16px), chocolate;
  background-size: 30px 30px;
}
.wrapper .pattern.eight {
  background: linear-gradient(90deg, burlywood 46%, transparent 50%), linear-gradient(180deg, transparent 50%, burlywood 54%), bisque;
  background-size: 20px 20px;
}
.wrapper .pattern.nine {
  background: linear-gradient(0deg, white 15%, transparent 15%) 0 6px, linear-gradient(90deg, white 50%, transparent 50%) -10px 0, linear-gradient(120deg, black 50%, transparent 50%), linear-gradient(60deg, transparent 49%, black 50%), white;
  background-size: 40px 40px;
}
.wrapper .pattern.ten {
  background: linear-gradient(-60deg, seashell 50%, transparent 50%) 8px 0, linear-gradient(60deg, transparent 50%, PaleVioletRed 50%), seashell;
  background-size: 16px 32px;
}
.wrapper .pattern.eleven {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 20px, transparent 20px), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, 0.5) 50%) 20px 20px, linear-gradient(0deg, rgba(0, 0, 0, 0.5) 50%, transparent 50%) 40px 0, linear-gradient(180deg, transparent 20px, rgba(0, 0, 0, 0.5) 20px) 40px 0, floralwhite;
  background-size: 40px 40px;
}
.wrapper .pattern.twelve {
  background: linear-gradient(75deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px), linear-gradient(-75deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px), linear-gradient(60deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px), linear-gradient(-60deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px), linear-gradient(45deg, black 8px, transparent 8px), linear-gradient(-45deg, black 8px, transparent 8px), linear-gradient(255deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px), linear-gradient(-255deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px), linear-gradient(240deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px), linear-gradient(-240deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px), linear-gradient(135deg, black 8px, transparent 8px), linear-gradient(-135deg, black 8px, transparent 8px), white;
  background-size: 90px 90px;
}

/* STYLES - END */
</style>
</head>
<body>
  <div class="body" id="body">
  <div class="page-title">
    <span>
      Patterns using Gradients
    </span>
  </div>
  <div class="wrapper">
    <div class="pattern close one">
      <div class="title">Buntings</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close two">
      <div class="title">Misty Fence</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close three">
      <div class="title">Evil Eye Charm</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close four">
      <div class="title">Mountain Range</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close five">
      <div class="title">Plain Old Kurti</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close six">
      <div class="title">Jets of cloud</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close seven">
      <div class="title">Chocolate Diamonds</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close eight">
      <div class="title">Waffles</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close nine">
      <div class="title">Black Bookmarks</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close ten">
      <div class="title">More Buntings</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close eleven">
      <div class="title">Table Cloth</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close twelve">
      <div class="title">Dark Void</div>
      <i class="icon fas fa-times"></i>
    </div>

  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
      <script>
$(".pattern").click(function () {
  $(this).removeClass("close");
  $(this).addClass("fill");
  console.log($(window).width());
  if ($(window).width() < 650 || $(window).height() < 850) {
    $(window).scrollTop(0);

    $(".body").css({
      position: "fixed",
      top: `-${window.scrollY}px`
      // height: "100vh",
      // width: "100vw"
    });
  }
});

$(".icon").click(function (e) {
  e.stopPropagation();
  $parent = $(this).parent();
  $parent.removeClass("fill");
  $parent.addClass("close");
  if ($(window).width() <= 768 || $(window).height() < 850)
  $(".body").css({ position: "relative", top: "" });
});
    </script>
</body>
</html>