Background dinamis dengan CSS dan SVG
Free SVG Backgrounds and Patterns by SVGBackgrounds.com
Pilih Background:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background dinamis dengan CSS dan SVG</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #dbdbdb;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
z-index: -1;
}
.radio-container {
text-align: center;
margin-top: 20px;
}
.radio-container label {
margin: 0 15px;
font-size: 18px;
}
.link-url {
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
}
.link-url:hover {
color: #E6E6E6;
}
.footerlink {
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="footerlink"><a href="https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/" class="link-url">Free SVG Backgrounds and Patterns by SVGBackgrounds.com</a></div>
<div class="radio-container">
<label>
<input type="radio" name="background" value="t01" checked> 01
</label>
<label>
<input type="radio" name="background" value="t02"> 02
</label>
<label>
<input type="radio" name="background" value="t03"> 03
</label>
<label>
<input type="radio" name="background" value="t04"> 04
</label>
<label>
<input type="radio" name="background" value="t05"> 05
</label>
</div>
<script>
const radios = document.querySelectorAll('input[name="background"]');
const bgElement = document.querySelector('.bg');
const backgrounds = {
t01: {
backgroundColor: '#5E00FF',
backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100%25\' height=\'100%25\' viewBox=\'0 0 1600 800\'%3E%3Cg %3E%3Cpath fill=\'%23ad00f9\' d=\'M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z\'/%3E%3Cpath fill=\'%23f200ed\' d=\'M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z\'/%3E%3Cpath fill=\'%23ec009a\' d=\'M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z\'/%3E%3Cpath fill=\'%23e5004b\' d=\'M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z\'/%3E%3Cpath fill=\'%23DF0000\' d=\'M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z\'/%3E%3Cpath fill=\'%23e65200\' d=\'M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z\'/%3E%3Cpath fill=\'%23eda900\' d=\'M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z\'/%3E%3Cpath fill=\'%23e2f300\' d=\'M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z\'/%3E%3Cpath fill=\'%2390fa00\' d=\'M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z\'/%3E%3Cpath fill=\'%2339FF02\' d=\'M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z\'/%3E%3C/g%3E%3C/svg%3E")',
},
t02: {
backgroundColor: '#FFF000',
backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100%25\' height=\'100%25\' viewBox=\'0 0 800 800\'%3E%3Cdefs%3E%3CradialGradient id=\'a\' cx=\'400\' cy=\'400\' r=\'46.8%25\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop offset=\'0\' stop-color=\'%23FFF000\'/%3E%3Cstop offset=\'1\' stop-color=\'%23FFE200\'/%3E%3C/radialGradient%3E%3CradialGradient id=\'b\' cx=\'400\' cy=\'400\' r=\'11.5%25\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop offset=\'0\' stop-color=\'%23FFF000\'/%3E%3Cstop offset=\'1\' stop-color=\'%23FF0000\'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill=\'url(%23a)\' width=\'800\' height=\'800\'/%3E%3Cg %3E%3Cpath fill=\'url(%23b)\' d=\'M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z\'/%3E%3C/g%3E%3C/svg%3E")',
},
t03: {
backgroundColor: '#ff9d00',
backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100%25\' height=\'100%25\' viewBox=\'0 0 1600 800\'%3E%3Cg stroke=\'%23000\' stroke-width=\'100\' stroke-opacity=\'0\' %3E%3Ccircle fill=\'%23ff9d00\' cx=\'0\' cy=\'0\' r=\'1800\'/%3E%3Ccircle fill=\'%23fb8d17\' cx=\'0\' cy=\'0\' r=\'1700\'/%3E%3Ccircle fill=\'%23f47d24\' cx=\'0\' cy=\'0\' r=\'1600\'/%3E%3Ccircle fill=\'%23ed6e2d\' cx=\'0\' cy=\'0\' r=\'1500\'/%3E%3Ccircle fill=\'%23e35f34\' cx=\'0\' cy=\'0\' r=\'1400\'/%3E%3Ccircle fill=\'%23d85239\' cx=\'0\' cy=\'0\' r=\'1300\'/%3E%3Ccircle fill=\'%23cc453e\' cx=\'0\' cy=\'0\' r=\'1200\'/%3E%3Ccircle fill=\'%23be3941\' cx=\'0\' cy=\'0\' r=\'1100\'/%3E%3Ccircle fill=\'%23b02f43\' cx=\'0\' cy=\'0\' r=\'1000\'/%3E%3Ccircle fill=\'%23a02644\' cx=\'0\' cy=\'0\' r=\'900\'/%3E%3Ccircle fill=\'%23901e44\' cx=\'0\' cy=\'0\' r=\'800\'/%3E%3Ccircle fill=\'%23801843\' cx=\'0\' cy=\'0\' r=\'700\'/%3E%3Ccircle fill=\'%236f1341\' cx=\'0\' cy=\'0\' r=\'600\'/%3E%3Ccircle fill=\'%235e0f3d\' cx=\'0\' cy=\'0\' r=\'500\'/%3E%3Ccircle fill=\'%234e0c38\' cx=\'0\' cy=\'0\' r=\'400\'/%3E%3Ccircle fill=\'%233e0933\' cx=\'0\' cy=\'0\' r=\'300\'/%3E%3Ccircle fill=\'%232e062c\' cx=\'0\' cy=\'0\' r=\'200\'/%3E%3Ccircle fill=\'%23210024\' cx=\'0\' cy=\'0\' r=\'100\'/%3E%3C/g%3E%3C/svg%3E")',
},
t04: {
backgroundColor: '#ee5522',
backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 2000 1500\'%3E%3Cdefs%3E%3CradialGradient id=\'a\' gradientUnits=\'objectBoundingBox\'%3E%3Cstop offset=\'0\' stop-color=\'%23FB3\'/%3E%3Cstop offset=\'1\' stop-color=\'%23ee5522\'/%3E%3C/radialGradient%3E%3ClinearGradient id=\'b\' gradientUnits=\'userSpaceOnUse\' x1=\'0\' y1=\'750\' x2=\'1550\' y2=\'750\'%3E%3Cstop offset=\'0\' stop-color=\'%23f7882b\'/%3E%3Cstop offset=\'1\' stop-color=\'%23ee5522\'/%3E%3C/linearGradient%3E%3Cpath id=\'s\' fill=\'url(%23b)\' d=\'M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z\'/%3E%3Cg id=\'g\'%3E%3Cuse href=\'%23s\' transform=\'scale(0.12) rotate(60)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.2) rotate(10)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.25) rotate(40)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.3) rotate(-20)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.4) rotate(-30)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.5) rotate(20)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.6) rotate(60)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.7) rotate(10)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.835) rotate(-40)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(0.9) rotate(40)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(1.05) rotate(25)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(1.2) rotate(8)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(1.333) rotate(-60)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(1.45) rotate(-30)\'/%3E%3Cuse href=\'%23s\' transform=\'scale(1.6) rotate(10)\'/%3E%3C/g%3E%3C/defs%3E%3Cg transform=\'translate(2000 0)\'%3E%3Cg %3E%3Ccircle fill=\'url(%23a)\' r=\'3000\'/%3E%3Cg opacity=\'0.5\'%3E%3Ccircle fill=\'url(%23a)\' r=\'2000\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'1800\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'1700\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'1651\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'1450\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'1250\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'1175\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'900\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'750\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'500\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'380\'/%3E%3Ccircle fill=\'url(%23a)\' r=\'250\'/%3E%3C/g%3E%3Cg transform=\'\'%3E%3Cuse href=\'%23g\' transform=\'rotate(10)\'/%3E%3Cuse href=\'%23g\' transform=\'rotate(120)\'/%3E%3Cuse href=\'%23g\' transform=\'rotate(240)\'/%3E%3C/g%3E%3Ccircle fill-opacity=\'0\' fill=\'url(%23a)\' r=\'3000\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
},
t05: {
backgroundColor: '#0080FF',
backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1600 900\'%3E%3Cpolygon fill=\'%23656565\' points=\'957 450 539 900 1396 900\'/%3E%3Cpolygon fill=\'%23d9d9d9\' points=\'957 450 872.9 900 1396 900\'/%3E%3Cpolygon fill=\'%23777777\' points=\'-60 900 398 662 816 900\'/%3E%3Cpolygon fill=\'%23bebebe\' points=\'337 900 398 662 816 900\'/%3E%3Cpolygon fill=\'%238a8a8a\' points=\'1203 546 1552 900 876 900\'/%3E%3Cpolygon fill=\'%23a3a3a3\' points=\'1203 546 1552 900 1162 900\'/%3E%3Cpolygon fill=\'%239d9d9d\' points=\'641 695 886 900 367 900\'/%3E%3Cpolygon fill=\'%238a8a8a\' points=\'587 900 641 695 886 900\'/%3E%3Cpolygon fill=\'%23b1b1b1\' points=\'1710 900 1401 632 1096 900\'/%3E%3Cpolygon fill=\'%23717171\' points=\'1710 900 1401 632 1365 900\'/%3E%3Cpolygon fill=\'%23c5c5c5\' points=\'1210 900 971 687 725 900\'/%3E%3Cpolygon fill=\'%23595959\' points=\'943 900 1210 900 971 687\'/%3E%3C/svg%3E")',
}
};
radios.forEach(radio => {
radio.addEventListener('change', () => {
const selectedValue = radio.value;
bgElement.style.backgroundColor = backgrounds[selectedValue].backgroundColor;
bgElement.style.backgroundImage = backgrounds[selectedValue].backgroundImage;
bgElement.style.color = backgrounds[selectedValue].color;
});
});
const selectedBackground = 't01';
const style = backgrounds[selectedBackground];
for (let property in style) {
bgElement.style[property] = style[property];
}
</script>
</body>
</html>
Komentar
Posting Komentar