Last active
January 10, 2025 03:38
-
-
Save wyattowalsh/22e3b9000e61ced43b3bfc308c974c9b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Final Production Version: p5.js sketch for exporting a highly detailed SVG background | |
| let svg; | |
| function setup() { | |
| svg = createGraphics(windowWidth, 300, SVG); | |
| noLoop(); | |
| } | |
| function draw() { | |
| // Gradient Background with Complex Color Layers | |
| for (let y = 0; y < svg.height; y++) { | |
| let inter = map(y, 0, svg.height, 0, 1); | |
| let c = lerpColor(color('#6a9fb5'), color('#b5a66a'), inter); | |
| svg.stroke(c); | |
| svg.line(0, y, svg.width, y); | |
| } | |
| // Starry effect with varying brightness | |
| for (let i = 0; i < 200; i++) { | |
| let x = random(svg.width); | |
| let y = random(svg.height); | |
| let starSize = random(1, 4); | |
| svg.noStroke(); | |
| svg.fill(255, random(80, 200)); | |
| svg.ellipse(x, y, starSize, starSize); | |
| } | |
| // Dynamic Wave Patterns with Gradient Strokes | |
| for (let i = 0; i < 7; i++) { | |
| let waveHeight = random(20, 100); | |
| let waveOffset = random(-100, 100); | |
| svg.strokeWeight(random(0.8, 2)); | |
| svg.stroke(lerpColor(color(255, 255, 255, 50), color(255, 255, 255, 100), random())); | |
| svg.noFill(); | |
| svg.beginShape(); | |
| for (let x = 0; x < svg.width; x += 10) { | |
| let y = svg.height / 2 + sin((x + waveOffset) * 0.015) * waveHeight; | |
| svg.vertex(x, y); | |
| } | |
| svg.endShape(); | |
| } | |
| // Radial Gradient Circles for Focal Elements | |
| for (let i = 0; i < 30; i++) { | |
| let x = random(svg.width); | |
| let y = random(svg.height); | |
| let maxSize = random(30, 120); | |
| for (let r = maxSize; r > 0; r -= 6) { | |
| let alpha = map(r, 0, maxSize, 60, 0); | |
| svg.fill(255, 255, 255, alpha); | |
| svg.noStroke(); | |
| svg.ellipse(x, y, r, r); | |
| } | |
| } | |
| // Add Glittering Particles for a Magical Effect | |
| for (let i = 0; i < 80; i++) { | |
| let px = random(svg.width); | |
| let py = random(svg.height); | |
| let pSize = random(2, 5); | |
| let glitterColor = lerpColor(color(255, 255, 255, 150), color(255, 200, 100, 180), random()); | |
| svg.fill(glitterColor); | |
| svg.noStroke(); | |
| svg.ellipse(px, py, pSize, pSize); | |
| } | |
| // Subtle Geometric Patterns | |
| for (let i = 0; i < 10; i++) { | |
| let x = random(svg.width / 4, (svg.width / 4) * 3); | |
| let y = random(svg.height / 4, (svg.height / 4) * 3); | |
| let size = random(50, 100); | |
| svg.noFill(); | |
| svg.stroke(255, 150); | |
| svg.strokeWeight(0.5); | |
| svg.beginShape(); | |
| for (let j = 0; j < 6; j++) { | |
| let angle = TWO_PI / 6 * j; | |
| let vx = x + cos(angle) * size; | |
| let vy = y + sin(angle) * size; | |
| svg.vertex(vx, vy); | |
| } | |
| svg.endShape(CLOSE); | |
| } | |
| // Save SVG file | |
| save(svg, "bg.svg"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8"?> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="268.831 -94.324 480 464.0013" width="480px" height="464.001px" preserveAspectRatio="none"><g id="object-11" transform="matrix(1, 0, 0, 1, 1.1368683772161603e-13, 1.1368683772161603e-13)"><path d="M 740.831 -94.324 L 276.831 -94.324 C 272.412 -94.324 268.831 -90.742 268.831 -86.324 L 268.831 281.676 C 268.831 286.094 272.412 289.676 276.831 289.676 L 568.651 289.676 L 581.011 347.356 C 582.313 353.375 589.643 355.727 594.205 351.589 C 594.815 351.035 595.337 350.39 595.751 349.676 L 613.751 318.606 L 663.201 367.356 C 666.32 370.451 671.351 370.451 674.471 367.356 L 698.471 343.356 C 701.626 340.227 701.626 335.126 698.471 331.996 L 655.541 289.676 L 740.831 289.676 C 745.249 289.676 748.831 286.094 748.831 281.676 L 748.831 -86.324 C 748.831 -90.742 745.249 -94.324 740.831 -94.324 Z M 284.831 -78.324 L 732.831 -78.324 L 732.831 -46.324 L 284.831 -46.324 L 284.831 -78.324 Z M 640.351 241.676 L 566.511 225.856 C 560.835 224.639 555.793 229.681 557.011 235.356 L 558.361 241.676 L 524.831 241.676 L 524.831 209.676 L 700.831 209.676 L 700.831 241.676 L 640.351 241.676 Z M 668.831 350.406 L 617.651 299.976 C 616.152 298.501 614.133 297.674 612.031 297.676 C 611.676 297.675 611.322 297.698 610.971 297.746 C 608.518 298.073 606.354 299.517 605.111 301.656 L 592.311 323.736 L 575.241 244.086 L 655.071 261.196 L 631.981 274.786 C 631.751 274.916 631.631 275.156 631.421 275.316 C 630.82 275.74 630.285 276.249 629.831 276.826 C 629.572 277.139 629.341 277.473 629.141 277.826 C 628.797 278.454 628.545 279.127 628.391 279.826 C 628.276 280.089 628.179 280.36 628.101 280.636 C 628.101 280.776 628.151 280.916 628.101 281.066 C 628.051 281.216 627.991 281.416 627.991 281.616 C 628.186 282.555 628.376 283.495 628.561 284.436 C 628.951 285.509 629.568 286.484 630.371 287.296 L 681.481 337.676 L 668.831 350.406 Z M 665.411 273.676 L 680.881 264.566 C 683.304 263.122 684.774 260.497 684.741 257.676 L 708.831 257.676 C 713.249 257.676 716.831 254.094 716.831 249.676 L 716.831 201.676 C 716.831 197.258 713.249 193.676 708.831 193.676 L 516.831 193.676 C 512.412 193.676 508.831 197.258 508.831 201.676 L 508.831 249.676 C 508.831 254.094 512.412 257.676 516.831 257.676 L 561.831 257.676 L 565.261 273.676 L 284.831 273.676 L 284.831 -30.324 L 732.831 -30.324 L 732.831 273.676 L 665.411 273.676 Z" style="fill: rgb(181, 166, 106);" id="object-0"/><path d="M 620.831 33.676 L 620.831 1.676 C 620.831 -2.742 617.249 -6.324 612.831 -6.324 L 404.831 -6.324 C 400.412 -6.324 396.831 -2.742 396.831 1.676 L 396.831 33.676 C 396.831 38.094 400.412 41.676 404.831 41.676 L 612.831 41.676 C 617.249 41.676 620.831 38.094 620.831 33.676 Z M 412.831 25.676 L 412.831 9.676 L 428.831 9.676 L 428.831 25.676 L 412.831 25.676 Z M 604.831 25.676 L 444.831 25.676 L 444.831 9.676 L 604.831 9.676 L 604.831 25.676 Z" style="fill: rgb(181, 166, 106);" id="object-1"/><path d="M 699.301 57.676 L 526.361 57.676 C 516.681 57.682 508.836 65.527 508.831 75.206 L 508.831 152.146 C 508.836 161.825 516.681 169.671 526.361 169.676 L 699.301 169.676 C 708.98 169.671 716.825 161.825 716.831 152.146 L 716.831 75.206 C 716.825 65.527 708.98 57.682 699.301 57.676 Z M 700.831 152.146 C 700.825 152.989 700.143 153.671 699.301 153.676 L 526.361 153.676 C 525.518 153.671 524.836 152.989 524.831 152.146 L 524.831 75.206 C 524.836 74.363 525.518 73.682 526.361 73.676 L 699.301 73.676 C 700.143 73.682 700.825 74.363 700.831 75.206 L 700.831 152.146 Z" style="fill: rgb(181, 166, 106);" id="object-2"/><path d="M 348.831 57.676 C 311.88 57.676 288.786 97.676 307.261 129.676 C 325.737 161.676 371.925 161.676 390.4 129.676 C 394.613 122.379 396.831 114.102 396.831 105.676 C 396.803 79.178 375.329 57.704 348.831 57.676 Z M 348.831 137.676 C 324.197 137.676 308.801 111.009 321.118 89.676 C 333.435 68.343 364.227 68.343 376.543 89.676 C 379.352 94.541 380.831 100.059 380.831 105.676 C 380.831 123.349 366.504 137.676 348.831 137.676 Z" style="fill: rgb(181, 166, 106);" id="object-3"/><path d="M 484.831 177.676 L 404.831 177.676 C 400.412 177.676 396.831 181.258 396.831 185.676 L 396.831 249.676 C 396.831 254.094 400.412 257.676 404.831 257.676 L 484.831 257.676 C 489.249 257.676 492.831 254.094 492.831 249.676 L 492.831 185.676 C 492.831 181.258 489.249 177.676 484.831 177.676 Z M 476.831 241.676 L 412.831 241.676 L 412.831 193.676 L 476.831 193.676 L 476.831 241.676 Z" style="fill: rgb(181, 166, 106);" id="object-4"/><path d="M 484.831 57.676 L 452.831 57.676 C 446.672 57.676 442.823 64.343 445.902 69.676 C 447.331 72.151 449.972 73.676 452.831 73.676 L 484.831 73.676 C 490.989 73.676 494.838 67.009 491.759 61.676 C 490.33 59.201 487.689 57.676 484.831 57.676 Z" style="fill: rgb(181, 166, 106);" id="object-5"/><path d="M 484.831 89.676 L 420.831 89.676 C 414.672 89.676 410.823 96.343 413.902 101.676 C 415.331 104.151 417.972 105.676 420.831 105.676 L 484.831 105.676 C 490.989 105.676 494.838 99.009 491.759 93.676 C 490.33 91.201 487.689 89.676 484.831 89.676 Z" style="fill: rgb(181, 166, 106);" id="object-6"/><path d="M 484.831 121.676 L 420.831 121.676 C 414.672 121.676 410.823 128.343 413.902 133.676 C 415.331 136.151 417.972 137.676 420.831 137.676 L 484.831 137.676 C 490.989 137.676 494.838 131.009 491.759 125.676 C 490.33 123.201 487.689 121.676 484.831 121.676 Z" style="fill: rgb(181, 166, 106);" id="object-7"/><path d="M 372.831 177.676 L 340.831 177.676 C 334.672 177.676 330.823 184.343 333.902 189.676 C 335.331 192.151 337.972 193.676 340.831 193.676 L 372.831 193.676 C 378.989 193.676 382.838 187.009 379.759 181.676 C 378.33 179.201 375.689 177.676 372.831 177.676 Z" style="fill: rgb(181, 166, 106);" id="object-8"/><path d="M 372.831 209.676 L 308.831 209.676 C 302.672 209.676 298.823 216.343 301.902 221.676 C 303.331 224.151 305.972 225.676 308.831 225.676 L 372.831 225.676 C 378.989 225.676 382.838 219.009 379.759 213.676 C 378.33 211.201 375.689 209.676 372.831 209.676 Z" style="fill: rgb(181, 166, 106);" id="object-9"/><path d="M 356.831 241.676 L 324.831 241.676 C 318.672 241.676 314.823 248.343 317.902 253.676 C 319.331 256.151 321.972 257.676 324.831 257.676 L 356.831 257.676 C 362.989 257.676 366.838 251.009 363.759 245.676 C 362.33 243.201 359.689 241.676 356.831 241.676 Z" style="fill: rgb(181, 166, 106);" id="object-10"/></g></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment