Background patterns
How do I make an background patterns?
What is a background patterns? How do you make a background patterns? This script and codes were developed by Boaz on 09 January 2023, Monday.
Background patterns - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>background patterns</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="category-libi"></div>
<div class="category-yogev"></div>
<div class="category-tv"></div>
<div class="category-yanshuf"></div>
<br>
<div class="category-libi-light"></div>
<div class="category-yogev-light"></div>
<div class="category-tv-light"></div>
<div class="category-yanshuf-light"></div>
</body>
</html>
Background patterns - Script Codes CSS Codes
div{width:24.5%;height:400px;display:inline-block;}
.category-libi{background-image: url("data:image/svg+xml,%3Csvg width='80' height='40' viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234e63ae' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M2.01 39.976c.02-4.594 1.786-9.182 5.302-12.687.475-.475.97-.917 1.483-1.327v9.77L4.54 39.977H2.01zm5.374 0L23.842 23.57c.687 5.35-1.03 10.95-5.154 15.06-.483.482-.987.93-1.508 1.346H7.384zm-7.384 0c.018-5.107 1.982-10.208 5.89-14.104 5.263-5.247 12.718-6.978 19.428-5.192 1.783 6.658.07 14.053-5.137 19.296H0zm10.806-15.41c3.537-2.116 7.644-2.92 11.614-2.415L10.806 33.73v-9.164zM65.25.75C58.578-1.032 51.164.694 45.93 5.93c-5.236 5.234-6.962 12.648-5.18 19.32 6.672 1.782 14.086.056 19.32-5.18 5.236-5.234 6.962-12.648 5.18-19.32zM43.632 23.783c5.338.683 10.925-1.026 15.025-5.126 4.1-4.1 5.81-9.687 5.126-15.025l-20.15 20.15zm7.186-19.156c3.518-2.112 7.602-2.915 11.55-2.41l-11.55 11.55v-9.14zm-3.475 2.716c-4.1 4.1-5.81 9.687-5.126 15.025l6.6-6.6V6.02c-.51.41-1 .85-1.474 1.323zM.07 0C.066 1.766.29 3.533.75 5.25c6.672 1.782 14.086.056 19.32-5.18l.072-.07H.072zm17.087 0C13.25 3.125 8.345 4.386 3.632 3.783L7.414 0h9.743zM2.07 0c-.002.79.047 1.582.147 2.368L4.587 0H2.07z'/%3E%3C/g%3E%3C/svg%3E");background-color:#32c1d6;
}
.category-libi-light{background-image: url("data:image/svg+xml,%3Csvg width='80' height='40' viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23DBDFEE' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M2.01 39.976c.02-4.594 1.786-9.182 5.302-12.687.475-.475.97-.917 1.483-1.327v9.77L4.54 39.977H2.01zm5.374 0L23.842 23.57c.687 5.35-1.03 10.95-5.154 15.06-.483.482-.987.93-1.508 1.346H7.384zm-7.384 0c.018-5.107 1.982-10.208 5.89-14.104 5.263-5.247 12.718-6.978 19.428-5.192 1.783 6.658.07 14.053-5.137 19.296H0zm10.806-15.41c3.537-2.116 7.644-2.92 11.614-2.415L10.806 33.73v-9.164zM65.25.75C58.578-1.032 51.164.694 45.93 5.93c-5.236 5.234-6.962 12.648-5.18 19.32 6.672 1.782 14.086.056 19.32-5.18 5.236-5.234 6.962-12.648 5.18-19.32zM43.632 23.783c5.338.683 10.925-1.026 15.025-5.126 4.1-4.1 5.81-9.687 5.126-15.025l-20.15 20.15zm7.186-19.156c3.518-2.112 7.602-2.915 11.55-2.41l-11.55 11.55v-9.14zm-3.475 2.716c-4.1 4.1-5.81 9.687-5.126 15.025l6.6-6.6V6.02c-.51.41-1 .85-1.474 1.323zM.07 0C.066 1.766.29 3.533.75 5.25c6.672 1.782 14.086.056 19.32-5.18l.072-.07H.072zm17.087 0C13.25 3.125 8.345 4.386 3.632 3.783L7.414 0h9.743zM2.07 0c-.002.79.047 1.582.147 2.368L4.587 0H2.07z'/%3E%3C/g%3E%3C/svg%3E");
}
.category-yanshuf{background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23f26722' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");background-color: #f3df7c;}
.category-yanshuf-light{background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23FCE0D2' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");}
.category-yogev{background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%232e9874' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");background-color:#c1bfb4;
}
.category-yogev-light{background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23D5EAE3' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.category-tv{background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 1424 1424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 981.188 288.108 c -88.808 -12.768 -183.382 -22.016 -282.076 -27.22 l 164.888 -164.888 l -64 -64 l -224.558 224.556 c -21.006 -0.368 -42.156 -0.556 -63.442 -0.556 v 0 l -256 -256 l -64 64 l 194.196 194.196 c -120.922 4.242 -236.338 14.524 -343.386 29.912 c -27.532 107.726 -42.81 226.752 -42.81 351.892 s 15.278 244.166 42.804 351.89 c 143.642 20.652 302.34 32.11 469.196 32.11 s 325.55 -11.458 469.188 -32.11 c 27.534 -107.724 42.812 -226.75 42.812 -351.89 s -15.278 -244.166 -42.812 -351.892 Z M 863.892 874.594 c -107.73 13.766 -226.75 21.406 -351.892 21.406 s -244.166 -7.64 -351.892 -21.406 c -20.648 -71.816 -32.108 -151.166 -32.108 -234.594 c 0 -83.43 11.458 -162.78 32.108 -234.596 c 107.726 -13.766 226.75 -21.404 351.892 -21.404 c 125.136 0 244.162 7.638 351.886 21.404 c 20.656 71.816 32.114 151.166 32.114 234.596 c 0 83.428 -11.458 162.778 -32.108 234.594 Z' fill='%239475b0' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");background-color:#f69487;}
.category-tv-light{background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 1424 1424' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 981.188 288.108 c -88.808 -12.768 -183.382 -22.016 -282.076 -27.22 l 164.888 -164.888 l -64 -64 l -224.558 224.556 c -21.006 -0.368 -42.156 -0.556 -63.442 -0.556 v 0 l -256 -256 l -64 64 l 194.196 194.196 c -120.922 4.242 -236.338 14.524 -343.386 29.912 c -27.532 107.726 -42.81 226.752 -42.81 351.892 s 15.278 244.166 42.804 351.89 c 143.642 20.652 302.34 32.11 469.196 32.11 s 325.55 -11.458 469.188 -32.11 c 27.534 -107.724 42.812 -226.75 42.812 -351.89 s -15.278 -244.166 -42.812 -351.892 Z M 863.892 874.594 c -107.73 13.766 -226.75 21.406 -351.892 21.406 s -244.166 -7.64 -351.892 -21.406 c -20.648 -71.816 -32.108 -151.166 -32.108 -234.594 c 0 -83.43 11.458 -162.78 32.108 -234.596 c 107.726 -13.766 226.75 -21.404 351.892 -21.404 c 125.136 0 244.162 7.638 351.886 21.404 c 20.656 71.816 32.114 151.166 32.114 234.596 c 0 83.428 -11.458 162.778 -32.108 234.594 Z' fill='%23E9E3EF' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");}
![Background patterns - Script Codes](http://shots.codepen.io/Aniboaz/pen/VMePLV-512.jpg)
Developer | Boaz |
Username | Aniboaz |
Uploaded | January 09, 2023 |
Rating | 3 |
Size | 3,347 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
New website header | 9,167 Kb |
Online Tools 3.0 | 5,929 Kb |
Digital assets | 1,706 Kb |
Kanban Board | 8,227 Kb |
Top nav menu test | 5,620 Kb |
New navbar | 6,055 Kb |
Gofen | 8,745 Kb |
Online Tools 2.0 | 8,379 Kb |
Online Tools | 7,134 Kb |
A Pen by Boaz | 10,180 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
404 Page | Saransh | 2,666 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Adding Items | Valhead | 4,008 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!