Graph Paper Background
How do I make an graph paper background?
Add a graph paper grid to your background using canvas rather than an image.. What is a graph paper background? How do you make a graph paper background? This script and codes were developed by Mnicpt on 30 July 2022, Saturday.
Graph Paper Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Graph Paper Background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- add reverse class to do a color reversal -->
<canvas id="grid-bkgrd" class="grid-bkgrd"></canvas>
<div class="title"> <h1>Graph Background</h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Graph Paper Background - Script Codes CSS Codes
.grid-bkgrd { position: fixed; background: -webkit-radial-gradient(circle, #2D35FA 0%, #0C0F59 100%); opacity: .8; z-index: -1;
}
.grid-bkgrd.reverse { background: -webkit-radial-gradient(circle, #fff 0%, #aaa 100%);
}
.title { padding: 10px; font-size: 58px; font-family: sans-serif; color: #efefef;
}
Graph Paper Background - Script Codes JS Codes
var grid = { draw : function(spacing){ var i = 0, width = window.screen.availWidth, height = window.screen.availHeight, canvas = document.getElementById("grid-bkgrd"), context = canvas.getContext("2d"); context.canvas.width = width; context.canvas.height = height; context.strokeStyle = $("#grid-bkgrd").hasClass("reverse") ? "#2D35FA" : "#fff"; context.lineWidth = 1; for(i = 1; i < height / spacing; i++){ //horizontal lines context.beginPath(); context.moveTo(0, spacing * i + .5); context.lineTo(width, spacing * i + .5); context.stroke(); context.closePath(); } for(i = 1; i < width / spacing; i++){ //vertical lines context.beginPath(); context.moveTo(spacing * i + .5, 0); context.lineTo(spacing * i + .5, height); context.stroke(); context.closePath(); } }
}
//put in your onready function
grid.draw(30);
Developer | Mnicpt |
Username | mnicpt |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 2,517 Kb |
Views | 52,624 |
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 |
Angular Calculator | 3,616 Kb |
3,268 Kb | |
Rotate Image | 1,843 Kb |
First 100 Prime Numbers | 1,615 Kb |
Quick Sort | 7,584 Kb |
A Pen by mnicpt | 3,851 Kb |
Contact Snippet | 1,815 Kb |
Model View Sync | 1,733 Kb |
IOS 7 Layering | 2,931 Kb |
JavaScript OO | 1,904 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 |
HEXAGON | Aurumlux | 1,684 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Super Discount | Orrinward | 3,225 Kb |
Zeichensatz | Moklick | 2,058 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!