Hugging Face's logo

Spaces:
bird0867
/
blobwave-background
Running

App Files Community
bird0867 commited on
Commit
2ce7c5d
·
verified ·
1 Parent(s): f3ffd08

make all blobs except for 3 of them some shade of purple -- the other 3 blobs should be some shade of pink that is nearly purple

Browse files
Files changed (1) hide show
  1. index.html +18 -20
index.html CHANGED
@@ -49,17 +49,17 @@
49
  </head>
50
  <body>
51
  <div class="container">
52
- <div id="blob1" class="blob bg-purple-500"></div>
53
- <div id="blob2" class="blob bg-blue-500"></div>
54
- <div id="blob3" class="blob bg-pink-500"></div>
55
  <!-- Orbiting blobs -->
56
- <div id="orbitBlob1" class="orbit-blob bg-teal-500"></div>
57
- <div id="orbitBlob2" class="orbit-blob bg-yellow-500"></div>
58
- <div id="orbitBlob3" class="orbit-blob bg-indigo-500"></div>
59
- <div id="orbitBlob4" class="orbit-blob bg-green-500"></div>
60
- <div id="orbitBlob5" class="orbit-blob bg-red-500"></div>
61
- <div id="orbitBlob6" class="orbit-blob bg-cyan-500"></div>
62
- <div class="content">
63
  </div>
64
  </div>
65
  <script>
@@ -84,20 +84,19 @@
84
  blob3.style.left = '45%';
85
  // Set initial positions for orbiting blobs
86
  const orbitBlobs = [
87
- { el: document.getElementById('orbitBlob1'), size: 200, color: 'bg-teal-500', angle: 0, speed: 0.005, distance: 350 },
88
- { el: document.getElementById('orbitBlob2'), size: 170, color: 'bg-yellow-500', angle: Math.PI/3, speed: 0.003, distance: 300 },
89
- { el: document.getElementById('orbitBlob3'), size: 230, color: 'bg-indigo-500', angle: Math.PI/1.5, speed: 0.004, distance: 400 },
90
- { el: document.getElementById('orbitBlob4'), size: 150, color: 'bg-green-500', angle: Math.PI, speed: 0.006, distance: 250 },
91
- { el: document.getElementById('orbitBlob5'), size: 190, color: 'bg-red-500', angle: Math.PI*1.5, speed: 0.0035, distance: 330 },
92
- { el: document.getElementById('orbitBlob6'), size: 210, color: 'bg-cyan-500', angle: Math.PI*1.8, speed: 0.0045, distance: 370 }
93
  ];
94
  orbitBlobs.forEach(blob => {
95
  blob.el.style.width = `${blob.size}px`;
96
  blob.el.style.height = `${blob.size}px`;
97
  blob.el.className = `orbit-blob ${blob.color}`;
98
  });
99
-
100
- // Mouse move interaction for main blobs
101
  document.addEventListener('mousemove', (e) => {
102
  const x = e.clientX;
103
  const y = e.clientY;
@@ -106,8 +105,7 @@ orbitBlobs.forEach(blob => {
106
  blob2.style.transform = `translate(${x * -0.022}px, ${y * -0.022}px)`;
107
  blob3.style.transform = `translate(${x * 0.015}px, ${y * 0.015}px)`;
108
  });
109
-
110
- // Animation loop for orbiting blobs
111
  function animateOrbitBlobs() {
112
  const centerX = window.innerWidth / 2;
113
  const centerY = window.innerHeight / 2;
 
49
  </head>
50
  <body>
51
  <div class="container">
52
+ <div id="blob1" class="blob bg-purple-600"></div>
53
+ <div id="blob2" class="blob bg-purple-400"></div>
54
+ <div id="blob3" class="blob bg-fuchsia-500"></div>
55
  <!-- Orbiting blobs -->
56
+ <div id="orbitBlob1" class="orbit-blob bg-purple-300"></div>
57
+ <div id="orbitBlob2" class="orbit-blob bg-purple-700"></div>
58
+ <div id="orbitBlob3" class="orbit-blob bg-fuchsia-400"></div>
59
+ <div id="orbitBlob4" class="orbit-blob bg-purple-500"></div>
60
+ <div id="orbitBlob5" class="orbit-blob bg-fuchsia-600"></div>
61
+ <div id="orbitBlob6" class="orbit-blob bg-purple-800"></div>
62
+ <div class="content">
63
  </div>
64
  </div>
65
  <script>
 
84
  blob3.style.left = '45%';
85
  // Set initial positions for orbiting blobs
86
  const orbitBlobs = [
87
+ { el: document.getElementById('orbitBlob1'), size: 200, color: 'bg-purple-300', angle: 0, speed: 0.005, distance: 350 },
88
+ { el: document.getElementById('orbitBlob2'), size: 170, color: 'bg-purple-700', angle: Math.PI/3, speed: 0.003, distance: 300 },
89
+ { el: document.getElementById('orbitBlob3'), size: 230, color: 'bg-fuchsia-400', angle: Math.PI/1.5, speed: 0.004, distance: 400 },
90
+ { el: document.getElementById('orbitBlob4'), size: 150, color: 'bg-purple-500', angle: Math.PI, speed: 0.006, distance: 250 },
91
+ { el: document.getElementById('orbitBlob5'), size: 190, color: 'bg-fuchsia-600', angle: Math.PI*1.5, speed: 0.0035, distance: 330 },
92
+ { el: document.getElementById('orbitBlob6'), size: 210, color: 'bg-purple-800', angle: Math.PI*1.8, speed: 0.0045, distance: 370 }
93
  ];
94
  orbitBlobs.forEach(blob => {
95
  blob.el.style.width = `${blob.size}px`;
96
  blob.el.style.height = `${blob.size}px`;
97
  blob.el.className = `orbit-blob ${blob.color}`;
98
  });
99
+ // Mouse move interaction for main blobs
 
100
  document.addEventListener('mousemove', (e) => {
101
  const x = e.clientX;
102
  const y = e.clientY;
 
105
  blob2.style.transform = `translate(${x * -0.022}px, ${y * -0.022}px)`;
106
  blob3.style.transform = `translate(${x * 0.015}px, ${y * 0.015}px)`;
107
  });
108
+ // Animation loop for orbiting blobs
 
109
  function animateOrbitBlobs() {
110
  const centerX = window.innerWidth / 2;
111
  const centerY = window.innerHeight / 2;