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="786.869 -499.01 492.001 459.997" width="492.001px" height="459.997px"><g id="object-0" transform="matrix(1, 0, 0, 1, -5.684341886080802e-14, 0)"><path d="M 793.303 -124.576 C 788.776 -120.05 786.869 -115.817 786.869 -109.01 C 786.869 -102.205 788.776 -97.973 793.303 -93.447 C 797.878 -88.871 802.059 -86.544 808.73 -87.011 L 866.873 -87.013 L 870.177 -87.013 L 872.754 -80.967 C 878.122 -68.078 886.484 -58.342 898.081 -50.72 C 909.583 -42.934 922.006 -39.013 936.869 -39.013 C 951.732 -39.013 964.155 -42.934 975.657 -50.72 C 987.255 -58.342 995.617 -68.078 1000.984 -80.966 L 1002.267 -83.974 L 1003.562 -87.013 L 1256.87 -87.013 C 1263.541 -86.546 1267.861 -88.871 1272.436 -93.447 C 1276.963 -97.973 1278.87 -102.205 1278.87 -109.01 C 1278.87 -115.817 1276.963 -120.05 1272.436 -124.576 C 1267.861 -129.152 1263.68 -131.479 1257.009 -131.012 L 1006.866 -131.01 L 1003.562 -131.01 L 1000.985 -137.056 C 995.617 -149.945 987.256 -159.681 975.658 -167.303 C 964.155 -175.089 951.732 -179.01 936.869 -179.01 C 922.006 -179.01 909.583 -175.089 898.081 -167.303 C 886.484 -159.681 878.122 -149.945 872.755 -137.057 L 871.472 -134.049 L 870.177 -131.01 L 808.869 -131.01 C 802.198 -131.477 797.878 -129.152 793.303 -124.576 Z M 894.869 -109.01 C 894.869 -124.096 904.74 -138.658 915.869 -145.386 C 927.319 -151.663 944.633 -152.102 957.985 -145.321 C 969.631 -137.848 978.869 -122.992 978.869 -109.01 C 978.869 -93.929 968.996 -79.368 957.869 -72.64 C 946.418 -66.365 929.109 -65.924 915.756 -72.708 C 904.106 -80.179 894.869 -95.039 894.869 -109.01 Z M 1086.87 -269.01 C 1086.87 -284.096 1096.742 -298.658 1107.871 -305.386 C 1119.322 -311.663 1136.636 -312.102 1149.986 -305.321 C 1161.632 -297.848 1170.87 -282.992 1170.87 -269.01 C 1170.87 -253.929 1160.998 -239.367 1149.869 -232.639 C 1138.418 -226.362 1121.106 -225.923 1107.754 -232.709 C 1096.108 -240.182 1086.87 -255.038 1086.87 -269.01 Z M 1198.866 -291.01 L 1195.562 -291.01 L 1192.985 -297.056 C 1187.617 -309.945 1179.255 -319.681 1167.658 -327.303 C 1156.156 -335.089 1143.733 -339.01 1128.87 -339.01 C 1114.007 -339.01 1101.584 -335.089 1090.082 -327.303 C 1078.485 -319.681 1070.123 -309.945 1064.756 -297.057 L 1063.473 -294.049 L 1062.178 -291.01 L 808.869 -291.01 C 802.198 -291.477 797.878 -289.152 793.303 -284.576 C 788.776 -280.05 786.869 -275.817 786.869 -269.01 C 786.869 -262.203 788.776 -257.97 793.303 -253.444 C 797.878 -248.868 802.059 -246.541 808.73 -247.008 L 1058.874 -247.01 L 1062.178 -247.01 L 1064.755 -240.964 C 1070.123 -228.075 1078.485 -218.339 1090.082 -210.717 C 1101.584 -202.931 1114.007 -199.01 1128.87 -199.01 C 1143.733 -199.01 1156.156 -202.931 1167.658 -210.717 C 1179.255 -218.339 1187.617 -228.075 1192.984 -240.963 L 1194.267 -243.971 L 1195.562 -247.01 L 1256.87 -247.01 C 1263.541 -246.543 1267.861 -248.868 1272.436 -253.444 C 1276.963 -257.97 1278.87 -262.203 1278.87 -269.01 C 1278.87 -275.817 1276.963 -280.05 1272.436 -284.576 C 1267.861 -289.152 1263.68 -291.479 1257.009 -291.012 Z M 968.869 -387.01 C 953.786 -387.01 938.996 -396.751 932.496 -408.011 C 925.969 -419.317 925.779 -436.772 932.563 -450.124 C 940.034 -461.772 954.894 -471.01 968.869 -471.01 C 983.951 -471.01 998.741 -461.272 1005.242 -450.013 C 1011.769 -438.708 1011.958 -421.253 1005.174 -407.896 C 997.703 -396.248 982.843 -387.01 968.869 -387.01 Z M 1038.866 -451.01 L 1035.562 -451.01 L 1032.985 -457.056 C 1027.617 -469.945 1019.255 -479.681 1007.658 -487.303 C 996.156 -495.089 983.732 -499.01 968.869 -499.01 C 954.006 -499.01 941.583 -495.089 930.081 -487.303 C 918.484 -479.681 910.122 -469.945 904.755 -457.057 L 903.472 -454.049 L 902.177 -451.01 L 808.869 -451.01 C 802.198 -451.477 797.878 -449.152 793.303 -444.576 C 788.776 -440.05 786.869 -435.817 786.869 -429.01 C 786.869 -422.203 788.776 -417.97 793.303 -413.444 C 797.878 -408.868 802.059 -406.541 808.73 -407.008 L 898.873 -407.01 L 902.177 -407.01 L 904.754 -400.964 C 910.122 -388.075 918.484 -378.339 930.081 -370.717 C 941.583 -362.931 954.006 -359.01 968.869 -359.01 C 983.732 -359.01 996.156 -362.931 1007.658 -370.717 C 1019.255 -378.339 1027.617 -388.075 1032.984 -400.963 L 1034.267 -403.971 L 1035.562 -407.01 L 1256.87 -407.01 C 1263.541 -406.543 1267.861 -408.868 1272.436 -413.444 C 1276.963 -417.97 1278.87 -422.203 1278.87 -429.01 C 1278.87 -435.817 1276.963 -440.05 1272.436 -444.576 C 1267.861 -449.152 1263.68 -451.479 1257.009 -451.012 Z" style="fill: rgb(181, 166, 106);"/></g></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment