The Wheel of Circles
How do I make an the wheel of circles?
SVG animation using CSS. Each circle rests within it's own SVG tag.. What is a the wheel of circles? How do you make a the wheel of circles? This script and codes were developed by GRAY GHOST on 23 June 2022, Thursday.
The Wheel of Circles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Wheel of Circles</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loader"> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100" id=circle-middle><circle fill=#EDEDED cx=50 cy=50 r="6"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
</div> <script src='js/a08e0d79c150ff5030f9b6afa.js'></script>
</body>
</html>
The Wheel of Circles - Script Codes CSS Codes
html, body { height: 100%; margin: 0;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; background: #324D5B;
}
svg { max-width: 100%;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.loader { -webkit-animation: spin 1s ease-in-out infinite alternate both; animation: spin 1s ease-in-out infinite alternate both; height: 100px; position: relative; width: 100px;
}
.loader svg:not(#circle-middle) { -webkit-animation: spin 1s ease-in-out infinite alternate both; animation: spin 1s ease-in-out infinite alternate both; position: absolute; top: -50%; left: 0; -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
.loader svg:nth-of-type(1):not(#circle-middle) { -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
.loader svg:nth-of-type(2):not(#circle-middle) { -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
.loader svg:nth-of-type(3):not(#circle-middle) { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.loader svg:nth-of-type(4):not(#circle-middle) { -webkit-transform: rotate(120deg); transform: rotate(120deg);
}
.loader svg:nth-of-type(5):not(#circle-middle) { -webkit-transform: rotate(150deg); transform: rotate(150deg);
}
.loader svg:nth-of-type(6):not(#circle-middle) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.loader svg:nth-of-type(7):not(#circle-middle) { -webkit-transform: rotate(210deg); transform: rotate(210deg);
}
.loader svg:nth-of-type(8):not(#circle-middle) { -webkit-transform: rotate(240deg); transform: rotate(240deg);
}
.loader svg:nth-of-type(9):not(#circle-middle) { -webkit-transform: rotate(270deg); transform: rotate(270deg);
}
.loader svg:nth-of-type(10):not(#circle-middle) { -webkit-transform: rotate(300deg); transform: rotate(300deg);
}
.loader svg:nth-of-type(11):not(#circle-middle) { -webkit-transform: rotate(330deg); transform: rotate(330deg);
}
.loader svg:nth-of-type(12):not(#circle-middle) { -webkit-transform: rotate(360deg); transform: rotate(360deg);
}
.loader svg:nth-of-type(13):not(#circle-middle) { -webkit-transform: rotate(390deg); transform: rotate(390deg);
}
Developer | GRAY GHOST |
Username | grayghostvisuals |
Uploaded | June 23, 2022 |
Rating | 4.5 |
Size | 2,919 Kb |
Views | 68,816 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
RWD Accordion | 3,860 Kb |
Secure Input | 6,436 Kb |
Rotating Cube | 3,404 Kb |
Rotating Rainbow Donut | 3,909 Kb |
Bouncy Little Dribbble Preloader | 5,920 Kb |
Fixed Curtains | 4,912 Kb |
Static Image to Video Block | 4,864 Kb |
How to ChartJS | 4,302 Kb |
Wave | 5,440 Kb |
Polybird | 6,417 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Preloader | Rikki_Sixx | 2,815 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Responsive slide | Thorien | 2,400 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!