<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Christmas Tree</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
perspective: 1000px; /* Add perspective to the scene */
}
.tree {
position: relative;
transform-style: preserve-3d; /* Ensure children are rendered in 3D space */
transform: rotateX(30deg); /* Rotate the tree to face the correct direction */
}
.star {
position: absolute;
font-size: 12px;
opacity: 0;
animation: twinkle 1s infinite alternate, appear 5s forwards;
}
@keyframes twinkle {
from { opacity: 1; }
to { opacity: 0.5; }
}
@keyframes appear {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="tree" id="tree"></div>
<script>
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function createTree() {
const tree = document.getElementById('tree');
const layers = 10;
let delay = 0;
for (let i = 0; i < layers; i++) {
const layerSize = (layers - i) * 10;
const radius = (layers - i) * 15; // Increase radius to prevent overlapping
for (let j = 0; j < layerSize; j++) {
const star = document.createElement('div');
star.className = 'star';
const angle = (j / layerSize) * 2 * Math.PI;
const x = radius * Math.cos(angle);
const z = radius * Math.sin(angle);
const y = i * 20;
star.innerText = '*';
star.style.color = getRandomColor();
star.style.left = `${x}px`;
star.style.bottom = `${y}px`;
star.style.transform = `translateZ(${z}px)`;
star.style.animationDelay = `${delay}s, ${delay + 1}s`;
star.style.fontSize = `${12 + i}px`; // Increase size of each star
tree.appendChild(star);
delay += 0.05; // Delay each star slightly for animation
}
}
// Add Top Star
const topStar = document.createElement('div');
topStar.className = 'star';
topStar.innerText = '*';
topStar.style.color = '#FFD700'; // Golden Top Star
topStar.style.fontSize = '42px';
topStar.style.left = '-2px';
topStar.style.bottom = `${layers * 20}px`;
topStar.style.transform = `translateZ(0px)`;
topStar.style.animationDelay = `${delay}s, ${delay + 1}s`;
tree.appendChild(topStar);
}
createTree();
</script>
</body>
</html>
Build Your Own Forms without Manual Coding
SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)