└⦿✚⦿┘ code.ChatGPT

[test _ a=tF²]

I asked ChatGPT to provide me with a code for a simple animated web page in my └⦿✚⦿┘ style and with my typical visuals. Here is the result:

intima.org/o-o/-

↓

It wrote the following

a) style:

body {
animation: fade 1s linear infinite;
}
@keyframes fade {
0% { background-color: #ffffff; }
50% { background-color: #000000; }
100% { background-color: #ffffff; }
}
#circle1, #circle2 {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 60px solid #000000;
background-color: #01ffff;
}
#center-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

b) script:

var circle1 = document.getElementById(“circle1”);
var circle2 = document.getElementById(“circle2”);
var x1 = 111;
var y1 = 111;
var x2 = 555;
var y2 = 555;
var xSpeed1 = 2;
var ySpeed1 = 2;
var xSpeed2 = 3;
var ySpeed2 = 3;

// set the starting positions of the circles
function setStartingPositions() {
x1 = Math.random() * (window.innerWidth – 0);
y1 = Math.random() * (window.innerHeight – 0);
x2 = Math.random() * (window.innerWidth – 500);
y2 = Math.random() * (window.innerHeight – 500);
// make sure the circles don’t overlap
while (Math.abs(x1 – x2) < 300 && Math.abs(y1 – y2) < 300) {
x2 = Math.random() * (window.innerWidth – 300);
y2 = Math.random() * (window.innerHeight – 300);
}
circle1.style.left = x1 + “px”;
circle1.style.top = y1 + “px”;
circle2.style.left = x2 + “px”;
circle2.style.top = y2 + “px”;
}

function animate() {
// move the first circle
x1 += xSpeed1;
y1 += ySpeed1;
// bounce the first circle when it touches the edge of the browser
if (x1 + 300 > window.innerWidth || x1 < 0) {
xSpeed1 = Math.random() * 6 – 3;
}
if (y1 + 300 > window.innerHeight || y1 < 0) {
ySpeed1 = Math.random() * 6 – 3;
}
circle1.style.left = x1 + “px”;
circle1.style.top = y1 + “px”;

// move the second circle
x2 += xSpeed2;
y2 += ySpeed2;
// bounce the second circle when it touches the edge of the browser
if (x2 + 300 > window.innerWidth || x2 < 0) {
xSpeed2 = Math.random() * 6 – 3;
}
if (y2 + 300 > window.innerHeight || y2 < 0) {
ySpeed2 = Math.random() * 6 – 3;
}

circle2.style.left = x2 + “px”;
circle2.style.top = y2 + “px”;

// check if the circles touch each other
if (Math.abs(x1 – x2) < 300 && Math.abs(y1 – y2) < 300) {
// bounce the circles in a random direction
xSpeed1 = Math.random() * 6 – 3;
ySpeed1 = Math.random() * 6 – 3;
xSpeed2 = Math.random() * 6 – 3;
ySpeed2 = Math.random() * 6 – 3;
}

requestAnimationFrame(animate);
}

animate();