Skip to content

Instantly share code, notes, and snippets.

@deveedutta

deveedutta/ferris-wheel.html

Created December 16, 2023 20:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deveedutta/d119a7b178a6d0c37d4c32a555d3de7d to your computer and use it in GitHub Desktop.
Save deveedutta/d119a7b178a6d0c37d4c32a555d3de7d to your computer and use it in GitHub Desktop.
Download ZIP
ferris wheel drawn with svg
Raw
ferris-wheel.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carnival SVG Animation</title>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ferris-wheel {
width: 200px;
height: 200px;
animation: spin 10s linear infinite;
}
.dot {
fill: #ff0000; /* Change the color of the dots here */
animation: bounce 0.5s infinite alternate;
transform-origin: center bottom;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.dot:nth-child(1) {
animation-delay: 0.1s;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
}
/* Add similar rules for the rest of the dots with appropriate animation-delay values */
</style>
</head>
<body>
<svg class="ferris-wheel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<circle cx="256" cy="256" r="200" fill="#ffeb3b" />
<!-- Add 12 evenly spaced dots along the edge of the Ferris wheel -->
<g transform="translate(256, 256)">
<!-- Calculate dot positions using trigonometry -->
<circle class="dot" cx="0" cy="-200" r="10" />
<circle class="dot" cx="103.92" cy="-179.87" r="10" />
<circle class="dot" cx="179.87" cy="-103.92" r="10" />
<circle class="dot" cx="200" cy="0" r="10" />
<circle class="dot" cx="179.87" cy="103.92" r="10" />
<circle class="dot" cx="103.92" cy="179.87" r="10" />
<circle class="dot" cx="0" cy="200" r="10" />
<circle class="dot" cx="-103.92" cy="179.87" r="10" />
<circle class="dot" cx="-179.87" cy="103.92" r="10" />
<circle class="dot" cx="-200" cy="0" r="10" />
<circle class="dot" cx="-179.87" cy="-103.92" r="10" />
<circle class="dot" cx="-103.92" cy="-179.87" r="10" />
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment