Are you looking for a fun and interactive way to engage your website visitors or provide an entertaining activity for your online community? Look no further than this online SVG coloring book!
With its intuitive interface and customizable features, this online coloring book allows users to select their favorite colors and apply them to any SVG image of your choosing. Whether you're looking to create a personalized coloring page for kids, showcase your artistic talent with a custom design, or simply unwind and relax with a fun activity, this online coloring book has you covered.
In this blog post, provide you with the HTML for this online coloring book, and you can replace the SVG image with your own custom design. So grab your favorite coloring tools and get ready to unleash your creativity!
<html>
<head>
<title>SVG Image Coloring Webpage</title>
<style>
#svg {
width: 800px;
height: 800px;
}
.shape {
cursor: pointer;
}
</style>
</head>
<body>
<div style="float: left; display: table; width: 400px; border-collapse: collapse; margin: auto;">
<div style="overflow-x: auto;">
<table style="width: 100%; max-width: 500px; margin: 0 auto; border-collapse: collapse;">
<tr>
<td class="color-option" style="width: 20%; height: 50px; border: 1px solid black; background-color: #FF0000;"></td>
<td class="color-option" style="width: 20%; height: 50px; border: 1px solid black; background-color: #00FF00;"></td>
<td class="color-option" style="width: 20%; height: 50px; border: 1px solid black; background-color: #0000FF;"></td>
<td class="color-option" style="width: 20%; height: 50px; border: 1px solid black; background-color: #FFFF00;"></td>
<td align="center" class="color-option" style="width: 20%; height: 50px; border: 1px solid black; background-color: #FFFFFF;">
<input type="color" id="color-picker" name="color-picker" style="padding: 0; margin: 0; border: none;">
</td>
</tr>
</table>
</div>
<svg id="svg" viewBox="0 0 800 800" style="width: 400px; height: 400px;">
<rect class="shape" x="100" y="100" width="100" height="100" fill="red" />
<rect class="shape" x="300" y="100" width="100" height="100" fill="blue" />
<rect class="shape" x="100" y="300" width="100" height="100" fill="green" />
<rect class="shape" x="300" y="300" width="100" height="100" fill="orange" />
</svg>
</div>
<script>
const colorOptions = document.querySelectorAll('.color-option');
const colorPicker = document.getElementById('color-picker');
var shapes = document.getElementsByTagName("rect");
colorOptions.forEach(option => {
option.addEventListener('click', () => {
const color = option.style.backgroundColor;
colorPicker.value = rgbToHex(color);
});
});
function rgbToHex(rgb) {
// Convert RGB color to hexadecimal color
const rgbValues = rgb.match(/\d+/g).map(Number);
const hexValues = rgbValues.map(val => {
const hex = val.toString(16);
return hex.length === 1 ? "0" + hex : hex;
});
return "#" + hexValues.join("");
}
for (var i = 0; i < shapes.length; i++) {
shapes[i].addEventListener("click", function(event) {
event.stopPropagation();
this.setAttribute("fill", colorPicker.value);
});
}
colorPicker.addEventListener("change", function() {
for (var i = 0; i < shapes.length; i++) {
shapes[i].addEventListener("click", function(event) {
event.stopPropagation();
this.setAttribute("fill", colorPicker.value);
});
}
});
</script>
</body>
</html>