FourPerfectlyRoundCircles

Developer

Size

5,772 Kb

Views

16,192

FourPerfectlyRoundCircles Previews
FourPerfectlyRoundCircles HTML Codes
FourPerfectlyRoundCircles CSS Codes

How do I make an fourperfectlyroundcircles?

A optical illusion. Please use fullscreen mode and look in the middle of the circles to see a waggly spiral.. What is a fourperfectlyroundcircles? How do you make a fourperfectlyroundcircles? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

FourPerfectlyRoundCircles Previews

FourPerfectlyRoundCircles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FourPerfectlyRoundCircles</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; background-color: #666; color: white;
}
.title { position: fixed; top: 20px; left: 20px; margin: 0; font: italic 3em/1em "Georgia"; text-align: center; background-color: rgba(102, 102, 102, 0.75); z-index: 10; padding: 12px 20px; border-radius: 16px;
}
.title span:nth-child(odd) { color: black;
}
.circle { position: absolute; left: 50%; top: 50%;
}
.box { transform-origin: 50% 100%; position: absolute;
}
.circle-1 .box { height: 112px;
}
.circle-2 .box { height: 192px;
}
.circle-3 .box { height: 272px;
}
.circle-4 .box { height: 352px;
}
.box-border { width: 16px; height: 16px; border: 3px solid black; transform: rotate(15deg);
}
.circle-2 .box-border,
.circle-4 .box-border { transform: rotate(-15deg);
}
.box:nth-child(even) .box-border { border-color: white;
}
.circle-1 .box-1 { transform: translate(-50%, -100%) rotate(20deg);
}
.circle-1 .box-2 { transform: translate(-50%, -100%) rotate(40deg);
}
.circle-1 .box-3 { transform: translate(-50%, -100%) rotate(60deg);
}
.circle-1 .box-4 { transform: translate(-50%, -100%) rotate(80deg);
}
.circle-1 .box-5 { transform: translate(-50%, -100%) rotate(100deg);
}
.circle-1 .box-6 { transform: translate(-50%, -100%) rotate(120deg);
}
.circle-1 .box-7 { transform: translate(-50%, -100%) rotate(140deg);
}
.circle-1 .box-8 { transform: translate(-50%, -100%) rotate(160deg);
}
.circle-1 .box-9 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-1 .box-10 { transform: translate(-50%, -100%) rotate(200deg);
}
.circle-1 .box-11 { transform: translate(-50%, -100%) rotate(220deg);
}
.circle-1 .box-12 { transform: translate(-50%, -100%) rotate(240deg);
}
.circle-1 .box-13 { transform: translate(-50%, -100%) rotate(260deg);
}
.circle-1 .box-14 { transform: translate(-50%, -100%) rotate(280deg);
}
.circle-1 .box-15 { transform: translate(-50%, -100%) rotate(300deg);
}
.circle-1 .box-16 { transform: translate(-50%, -100%) rotate(320deg);
}
.circle-1 .box-17 { transform: translate(-50%, -100%) rotate(340deg);
}
.circle-1 .box-18 { transform: translate(-50%, -100%) rotate(360deg);
}
.circle-2 .box-1 { transform: translate(-50%, -100%) rotate(10deg);
}
.circle-2 .box-2 { transform: translate(-50%, -100%) rotate(20deg);
}
.circle-2 .box-3 { transform: translate(-50%, -100%) rotate(30deg);
}
.circle-2 .box-4 { transform: translate(-50%, -100%) rotate(40deg);
}
.circle-2 .box-5 { transform: translate(-50%, -100%) rotate(50deg);
}
.circle-2 .box-6 { transform: translate(-50%, -100%) rotate(60deg);
}
.circle-2 .box-7 { transform: translate(-50%, -100%) rotate(70deg);
}
.circle-2 .box-8 { transform: translate(-50%, -100%) rotate(80deg);
}
.circle-2 .box-9 { transform: translate(-50%, -100%) rotate(90deg);
}
.circle-2 .box-10 { transform: translate(-50%, -100%) rotate(100deg);
}
.circle-2 .box-11 { transform: translate(-50%, -100%) rotate(110deg);
}
.circle-2 .box-12 { transform: translate(-50%, -100%) rotate(120deg);
}
.circle-2 .box-13 { transform: translate(-50%, -100%) rotate(130deg);
}
.circle-2 .box-14 { transform: translate(-50%, -100%) rotate(140deg);
}
.circle-2 .box-15 { transform: translate(-50%, -100%) rotate(150deg);
}
.circle-2 .box-16 { transform: translate(-50%, -100%) rotate(160deg);
}
.circle-2 .box-17 { transform: translate(-50%, -100%) rotate(170deg);
}
.circle-2 .box-18 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-2 .box-19 { transform: translate(-50%, -100%) rotate(190deg);
}
.circle-2 .box-20 { transform: translate(-50%, -100%) rotate(200deg);
}
.circle-2 .box-21 { transform: translate(-50%, -100%) rotate(210deg);
}
.circle-2 .box-22 { transform: translate(-50%, -100%) rotate(220deg);
}
.circle-2 .box-23 { transform: translate(-50%, -100%) rotate(230deg);
}
.circle-2 .box-24 { transform: translate(-50%, -100%) rotate(240deg);
}
.circle-2 .box-25 { transform: translate(-50%, -100%) rotate(250deg);
}
.circle-2 .box-26 { transform: translate(-50%, -100%) rotate(260deg);
}
.circle-2 .box-27 { transform: translate(-50%, -100%) rotate(270deg);
}
.circle-2 .box-28 { transform: translate(-50%, -100%) rotate(280deg);
}
.circle-2 .box-29 { transform: translate(-50%, -100%) rotate(290deg);
}
.circle-2 .box-30 { transform: translate(-50%, -100%) rotate(300deg);
}
.circle-2 .box-31 { transform: translate(-50%, -100%) rotate(310deg);
}
.circle-2 .box-32 { transform: translate(-50%, -100%) rotate(320deg);
}
.circle-2 .box-33 { transform: translate(-50%, -100%) rotate(330deg);
}
.circle-2 .box-34 { transform: translate(-50%, -100%) rotate(340deg);
}
.circle-2 .box-35 { transform: translate(-50%, -100%) rotate(350deg);
}
.circle-2 .box-36 { transform: translate(-50%, -100%) rotate(360deg);
}
.circle-3 .box-1 { transform: translate(-50%, -100%) rotate(7.5deg);
}
.circle-3 .box-2 { transform: translate(-50%, -100%) rotate(15deg);
}
.circle-3 .box-3 { transform: translate(-50%, -100%) rotate(22.5deg);
}
.circle-3 .box-4 { transform: translate(-50%, -100%) rotate(30deg);
}
.circle-3 .box-5 { transform: translate(-50%, -100%) rotate(37.5deg);
}
.circle-3 .box-6 { transform: translate(-50%, -100%) rotate(45deg);
}
.circle-3 .box-7 { transform: translate(-50%, -100%) rotate(52.5deg);
}
.circle-3 .box-8 { transform: translate(-50%, -100%) rotate(60deg);
}
.circle-3 .box-9 { transform: translate(-50%, -100%) rotate(67.5deg);
}
.circle-3 .box-10 { transform: translate(-50%, -100%) rotate(75deg);
}
.circle-3 .box-11 { transform: translate(-50%, -100%) rotate(82.5deg);
}
.circle-3 .box-12 { transform: translate(-50%, -100%) rotate(90deg);
}
.circle-3 .box-13 { transform: translate(-50%, -100%) rotate(97.5deg);
}
.circle-3 .box-14 { transform: translate(-50%, -100%) rotate(105deg);
}
.circle-3 .box-15 { transform: translate(-50%, -100%) rotate(112.5deg);
}
.circle-3 .box-16 { transform: translate(-50%, -100%) rotate(120deg);
}
.circle-3 .box-17 { transform: translate(-50%, -100%) rotate(127.5deg);
}
.circle-3 .box-18 { transform: translate(-50%, -100%) rotate(135deg);
}
.circle-3 .box-19 { transform: translate(-50%, -100%) rotate(142.5deg);
}
.circle-3 .box-20 { transform: translate(-50%, -100%) rotate(150deg);
}
.circle-3 .box-21 { transform: translate(-50%, -100%) rotate(157.5deg);
}
.circle-3 .box-22 { transform: translate(-50%, -100%) rotate(165deg);
}
.circle-3 .box-23 { transform: translate(-50%, -100%) rotate(172.5deg);
}
.circle-3 .box-24 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-3 .box-25 { transform: translate(-50%, -100%) rotate(187.5deg);
}
.circle-3 .box-26 { transform: translate(-50%, -100%) rotate(195deg);
}
.circle-3 .box-27 { transform: translate(-50%, -100%) rotate(202.5deg);
}
.circle-3 .box-28 { transform: translate(-50%, -100%) rotate(210deg);
}
.circle-3 .box-29 { transform: translate(-50%, -100%) rotate(217.5deg);
}
.circle-3 .box-30 { transform: translate(-50%, -100%) rotate(225deg);
}
.circle-3 .box-31 { transform: translate(-50%, -100%) rotate(232.5deg);
}
.circle-3 .box-32 { transform: translate(-50%, -100%) rotate(240deg);
}
.circle-3 .box-33 { transform: translate(-50%, -100%) rotate(247.5deg);
}
.circle-3 .box-34 { transform: translate(-50%, -100%) rotate(255deg);
}
.circle-3 .box-35 { transform: translate(-50%, -100%) rotate(262.5deg);
}
.circle-3 .box-36 { transform: translate(-50%, -100%) rotate(270deg);
}
.circle-3 .box-37 { transform: translate(-50%, -100%) rotate(277.5deg);
}
.circle-3 .box-38 { transform: translate(-50%, -100%) rotate(285deg);
}
.circle-3 .box-39 { transform: translate(-50%, -100%) rotate(292.5deg);
}
.circle-3 .box-40 { transform: translate(-50%, -100%) rotate(300deg);
}
.circle-3 .box-41 { transform: translate(-50%, -100%) rotate(307.5deg);
}
.circle-3 .box-42 { transform: translate(-50%, -100%) rotate(315deg);
}
.circle-3 .box-43 { transform: translate(-50%, -100%) rotate(322.5deg);
}
.circle-3 .box-44 { transform: translate(-50%, -100%) rotate(330deg);
}
.circle-3 .box-45 { transform: translate(-50%, -100%) rotate(337.5deg);
}
.circle-3 .box-46 { transform: translate(-50%, -100%) rotate(345deg);
}
.circle-3 .box-47 { transform: translate(-50%, -100%) rotate(352.5deg);
}
.circle-3 .box-48 { transform: translate(-50%, -100%) rotate(360deg);
}
.circle-4 .box-1 { transform: translate(-50%, -100%) rotate(5.625deg);
}
.circle-4 .box-2 { transform: translate(-50%, -100%) rotate(11.25deg);
}
.circle-4 .box-3 { transform: translate(-50%, -100%) rotate(16.875deg);
}
.circle-4 .box-4 { transform: translate(-50%, -100%) rotate(22.5deg);
}
.circle-4 .box-5 { transform: translate(-50%, -100%) rotate(28.125deg);
}
.circle-4 .box-6 { transform: translate(-50%, -100%) rotate(33.75deg);
}
.circle-4 .box-7 { transform: translate(-50%, -100%) rotate(39.375deg);
}
.circle-4 .box-8 { transform: translate(-50%, -100%) rotate(45deg);
}
.circle-4 .box-9 { transform: translate(-50%, -100%) rotate(50.625deg);
}
.circle-4 .box-10 { transform: translate(-50%, -100%) rotate(56.25deg);
}
.circle-4 .box-11 { transform: translate(-50%, -100%) rotate(61.875deg);
}
.circle-4 .box-12 { transform: translate(-50%, -100%) rotate(67.5deg);
}
.circle-4 .box-13 { transform: translate(-50%, -100%) rotate(73.125deg);
}
.circle-4 .box-14 { transform: translate(-50%, -100%) rotate(78.75deg);
}
.circle-4 .box-15 { transform: translate(-50%, -100%) rotate(84.375deg);
}
.circle-4 .box-16 { transform: translate(-50%, -100%) rotate(90deg);
}
.circle-4 .box-17 { transform: translate(-50%, -100%) rotate(95.625deg);
}
.circle-4 .box-18 { transform: translate(-50%, -100%) rotate(101.25deg);
}
.circle-4 .box-19 { transform: translate(-50%, -100%) rotate(106.875deg);
}
.circle-4 .box-20 { transform: translate(-50%, -100%) rotate(112.5deg);
}
.circle-4 .box-21 { transform: translate(-50%, -100%) rotate(118.125deg);
}
.circle-4 .box-22 { transform: translate(-50%, -100%) rotate(123.75deg);
}
.circle-4 .box-23 { transform: translate(-50%, -100%) rotate(129.375deg);
}
.circle-4 .box-24 { transform: translate(-50%, -100%) rotate(135deg);
}
.circle-4 .box-25 { transform: translate(-50%, -100%) rotate(140.625deg);
}
.circle-4 .box-26 { transform: translate(-50%, -100%) rotate(146.25deg);
}
.circle-4 .box-27 { transform: translate(-50%, -100%) rotate(151.875deg);
}
.circle-4 .box-28 { transform: translate(-50%, -100%) rotate(157.5deg);
}
.circle-4 .box-29 { transform: translate(-50%, -100%) rotate(163.125deg);
}
.circle-4 .box-30 { transform: translate(-50%, -100%) rotate(168.75deg);
}
.circle-4 .box-31 { transform: translate(-50%, -100%) rotate(174.375deg);
}
.circle-4 .box-32 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-4 .box-33 { transform: translate(-50%, -100%) rotate(185.625deg);
}
.circle-4 .box-34 { transform: translate(-50%, -100%) rotate(191.25deg);
}
.circle-4 .box-35 { transform: translate(-50%, -100%) rotate(196.875deg);
}
.circle-4 .box-36 { transform: translate(-50%, -100%) rotate(202.5deg);
}
.circle-4 .box-37 { transform: translate(-50%, -100%) rotate(208.125deg);
}
.circle-4 .box-38 { transform: translate(-50%, -100%) rotate(213.75deg);
}
.circle-4 .box-39 { transform: translate(-50%, -100%) rotate(219.375deg);
}
.circle-4 .box-40 { transform: translate(-50%, -100%) rotate(225deg);
}
.circle-4 .box-41 { transform: translate(-50%, -100%) rotate(230.625deg);
}
.circle-4 .box-42 { transform: translate(-50%, -100%) rotate(236.25deg);
}
.circle-4 .box-43 { transform: translate(-50%, -100%) rotate(241.875deg);
}
.circle-4 .box-44 { transform: translate(-50%, -100%) rotate(247.5deg);
}
.circle-4 .box-45 { transform: translate(-50%, -100%) rotate(253.125deg);
}
.circle-4 .box-46 { transform: translate(-50%, -100%) rotate(258.75deg);
}
.circle-4 .box-47 { transform: translate(-50%, -100%) rotate(264.375deg);
}
.circle-4 .box-48 { transform: translate(-50%, -100%) rotate(270deg);
}
.circle-4 .box-49 { transform: translate(-50%, -100%) rotate(275.625deg);
}
.circle-4 .box-50 { transform: translate(-50%, -100%) rotate(281.25deg);
}
.circle-4 .box-51 { transform: translate(-50%, -100%) rotate(286.875deg);
}
.circle-4 .box-52 { transform: translate(-50%, -100%) rotate(292.5deg);
}
.circle-4 .box-53 { transform: translate(-50%, -100%) rotate(298.125deg);
}
.circle-4 .box-54 { transform: translate(-50%, -100%) rotate(303.75deg);
}
.circle-4 .box-55 { transform: translate(-50%, -100%) rotate(309.375deg);
}
.circle-4 .box-56 { transform: translate(-50%, -100%) rotate(315deg);
}
.circle-4 .box-57 { transform: translate(-50%, -100%) rotate(320.625deg);
}
.circle-4 .box-58 { transform: translate(-50%, -100%) rotate(326.25deg);
}
.circle-4 .box-59 { transform: translate(-50%, -100%) rotate(331.875deg);
}
.circle-4 .box-60 { transform: translate(-50%, -100%) rotate(337.5deg);
}
.circle-4 .box-61 { transform: translate(-50%, -100%) rotate(343.125deg);
}
.circle-4 .box-62 { transform: translate(-50%, -100%) rotate(348.75deg);
}
.circle-4 .box-63 { transform: translate(-50%, -100%) rotate(354.375deg);
}
.circle-4 .box-64 { transform: translate(-50%, -100%) rotate(360deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Title -->
<div class='title'><span>F</span><span>o</span><span>u</span><span>r</span><span>P</span><span>e</span><span>r</span><span>f</span><span>e</span><span>c</span><span>t</span><span>l</span><span>y</span><span>R</span><span>o</span><span>u</span><span>n</span><span>d</span><span>C</span><span>i</span><span>r</span><span>c</span><span>l</span><span>e</span><span>s</span><br>
<small>– A optical illusion –</small></div>
<!-- Create required elements -->
<div class='circle circle-1'> <div class='box box-1'> <div class='box-border'></div> </div> <div class='box box-2'> <div class='box-border'></div> </div> <div class='box box-3'> <div class='box-border'></div> </div> <div class='box box-4'> <div class='box-border'></div> </div> <div class='box box-5'> <div class='box-border'></div> </div> <div class='box box-6'> <div class='box-border'></div> </div> <div class='box box-7'> <div class='box-border'></div> </div> <div class='box box-8'> <div class='box-border'></div> </div> <div class='box box-9'> <div class='box-border'></div> </div> <div class='box box-10'> <div class='box-border'></div> </div> <div class='box box-11'> <div class='box-border'></div> </div> <div class='box box-12'> <div class='box-border'></div> </div> <div class='box box-13'> <div class='box-border'></div> </div> <div class='box box-14'> <div class='box-border'></div> </div> <div class='box box-15'> <div class='box-border'></div> </div> <div class='box box-16'> <div class='box-border'></div> </div> <div class='box box-17'> <div class='box-border'></div> </div> <div class='box box-18'> <div class='box-border'></div> </div>
</div>
<div class='circle circle-2'> <div class='box box-1'> <div class='box-border'></div> </div> <div class='box box-2'> <div class='box-border'></div> </div> <div class='box box-3'> <div class='box-border'></div> </div> <div class='box box-4'> <div class='box-border'></div> </div> <div class='box box-5'> <div class='box-border'></div> </div> <div class='box box-6'> <div class='box-border'></div> </div> <div class='box box-7'> <div class='box-border'></div> </div> <div class='box box-8'> <div class='box-border'></div> </div> <div class='box box-9'> <div class='box-border'></div> </div> <div class='box box-10'> <div class='box-border'></div> </div> <div class='box box-11'> <div class='box-border'></div> </div> <div class='box box-12'> <div class='box-border'></div> </div> <div class='box box-13'> <div class='box-border'></div> </div> <div class='box box-14'> <div class='box-border'></div> </div> <div class='box box-15'> <div class='box-border'></div> </div> <div class='box box-16'> <div class='box-border'></div> </div> <div class='box box-17'> <div class='box-border'></div> </div> <div class='box box-18'> <div class='box-border'></div> </div> <div class='box box-19'> <div class='box-border'></div> </div> <div class='box box-20'> <div class='box-border'></div> </div> <div class='box box-21'> <div class='box-border'></div> </div> <div class='box box-22'> <div class='box-border'></div> </div> <div class='box box-23'> <div class='box-border'></div> </div> <div class='box box-24'> <div class='box-border'></div> </div> <div class='box box-25'> <div class='box-border'></div> </div> <div class='box box-26'> <div class='box-border'></div> </div> <div class='box box-27'> <div class='box-border'></div> </div> <div class='box box-28'> <div class='box-border'></div> </div> <div class='box box-29'> <div class='box-border'></div> </div> <div class='box box-30'> <div class='box-border'></div> </div> <div class='box box-31'> <div class='box-border'></div> </div> <div class='box box-32'> <div class='box-border'></div> </div> <div class='box box-33'> <div class='box-border'></div> </div> <div class='box box-34'> <div class='box-border'></div> </div> <div class='box box-35'> <div class='box-border'></div> </div> <div class='box box-36'> <div class='box-border'></div> </div>
</div>
<div class='circle circle-3'> <div class='box box-1'> <div class='box-border'></div> </div> <div class='box box-2'> <div class='box-border'></div> </div> <div class='box box-3'> <div class='box-border'></div> </div> <div class='box box-4'> <div class='box-border'></div> </div> <div class='box box-5'> <div class='box-border'></div> </div> <div class='box box-6'> <div class='box-border'></div> </div> <div class='box box-7'> <div class='box-border'></div> </div> <div class='box box-8'> <div class='box-border'></div> </div> <div class='box box-9'> <div class='box-border'></div> </div> <div class='box box-10'> <div class='box-border'></div> </div> <div class='box box-11'> <div class='box-border'></div> </div> <div class='box box-12'> <div class='box-border'></div> </div> <div class='box box-13'> <div class='box-border'></div> </div> <div class='box box-14'> <div class='box-border'></div> </div> <div class='box box-15'> <div class='box-border'></div> </div> <div class='box box-16'> <div class='box-border'></div> </div> <div class='box box-17'> <div class='box-border'></div> </div> <div class='box box-18'> <div class='box-border'></div> </div> <div class='box box-19'> <div class='box-border'></div> </div> <div class='box box-20'> <div class='box-border'></div> </div> <div class='box box-21'> <div class='box-border'></div> </div> <div class='box box-22'> <div class='box-border'></div> </div> <div class='box box-23'> <div class='box-border'></div> </div> <div class='box box-24'> <div class='box-border'></div> </div> <div class='box box-25'> <div class='box-border'></div> </div> <div class='box box-26'> <div class='box-border'></div> </div> <div class='box box-27'> <div class='box-border'></div> </div> <div class='box box-28'> <div class='box-border'></div> </div> <div class='box box-29'> <div class='box-border'></div> </div> <div class='box box-30'> <div class='box-border'></div> </div> <div class='box box-31'> <div class='box-border'></div> </div> <div class='box box-32'> <div class='box-border'></div> </div> <div class='box box-33'> <div class='box-border'></div> </div> <div class='box box-34'> <div class='box-border'></div> </div> <div class='box box-35'> <div class='box-border'></div> </div> <div class='box box-36'> <div class='box-border'></div> </div> <div class='box box-37'> <div class='box-border'></div> </div> <div class='box box-38'> <div class='box-border'></div> </div> <div class='box box-39'> <div class='box-border'></div> </div> <div class='box box-40'> <div class='box-border'></div> </div> <div class='box box-41'> <div class='box-border'></div> </div> <div class='box box-42'> <div class='box-border'></div> </div> <div class='box box-43'> <div class='box-border'></div> </div> <div class='box box-44'> <div class='box-border'></div> </div> <div class='box box-45'> <div class='box-border'></div> </div> <div class='box box-46'> <div class='box-border'></div> </div> <div class='box box-47'> <div class='box-border'></div> </div> <div class='box box-48'> <div class='box-border'></div> </div>
</div>
<div class='circle circle-4'> <div class='box box-1'> <div class='box-border'></div> </div> <div class='box box-2'> <div class='box-border'></div> </div> <div class='box box-3'> <div class='box-border'></div> </div> <div class='box box-4'> <div class='box-border'></div> </div> <div class='box box-5'> <div class='box-border'></div> </div> <div class='box box-6'> <div class='box-border'></div> </div> <div class='box box-7'> <div class='box-border'></div> </div> <div class='box box-8'> <div class='box-border'></div> </div> <div class='box box-9'> <div class='box-border'></div> </div> <div class='box box-10'> <div class='box-border'></div> </div> <div class='box box-11'> <div class='box-border'></div> </div> <div class='box box-12'> <div class='box-border'></div> </div> <div class='box box-13'> <div class='box-border'></div> </div> <div class='box box-14'> <div class='box-border'></div> </div> <div class='box box-15'> <div class='box-border'></div> </div> <div class='box box-16'> <div class='box-border'></div> </div> <div class='box box-17'> <div class='box-border'></div> </div> <div class='box box-18'> <div class='box-border'></div> </div> <div class='box box-19'> <div class='box-border'></div> </div> <div class='box box-20'> <div class='box-border'></div> </div> <div class='box box-21'> <div class='box-border'></div> </div> <div class='box box-22'> <div class='box-border'></div> </div> <div class='box box-23'> <div class='box-border'></div> </div> <div class='box box-24'> <div class='box-border'></div> </div> <div class='box box-25'> <div class='box-border'></div> </div> <div class='box box-26'> <div class='box-border'></div> </div> <div class='box box-27'> <div class='box-border'></div> </div> <div class='box box-28'> <div class='box-border'></div> </div> <div class='box box-29'> <div class='box-border'></div> </div> <div class='box box-30'> <div class='box-border'></div> </div> <div class='box box-31'> <div class='box-border'></div> </div> <div class='box box-32'> <div class='box-border'></div> </div> <div class='box box-33'> <div class='box-border'></div> </div> <div class='box box-34'> <div class='box-border'></div> </div> <div class='box box-35'> <div class='box-border'></div> </div> <div class='box box-36'> <div class='box-border'></div> </div> <div class='box box-37'> <div class='box-border'></div> </div> <div class='box box-38'> <div class='box-border'></div> </div> <div class='box box-39'> <div class='box-border'></div> </div> <div class='box box-40'> <div class='box-border'></div> </div> <div class='box box-41'> <div class='box-border'></div> </div> <div class='box box-42'> <div class='box-border'></div> </div> <div class='box box-43'> <div class='box-border'></div> </div> <div class='box box-44'> <div class='box-border'></div> </div> <div class='box box-45'> <div class='box-border'></div> </div> <div class='box box-46'> <div class='box-border'></div> </div> <div class='box box-47'> <div class='box-border'></div> </div> <div class='box box-48'> <div class='box-border'></div> </div> <div class='box box-49'> <div class='box-border'></div> </div> <div class='box box-50'> <div class='box-border'></div> </div> <div class='box box-51'> <div class='box-border'></div> </div> <div class='box box-52'> <div class='box-border'></div> </div> <div class='box box-53'> <div class='box-border'></div> </div> <div class='box box-54'> <div class='box-border'></div> </div> <div class='box box-55'> <div class='box-border'></div> </div> <div class='box box-56'> <div class='box-border'></div> </div> <div class='box box-57'> <div class='box-border'></div> </div> <div class='box box-58'> <div class='box-border'></div> </div> <div class='box box-59'> <div class='box-border'></div> </div> <div class='box box-60'> <div class='box-border'></div> </div> <div class='box box-61'> <div class='box-border'></div> </div> <div class='box box-62'> <div class='box-border'></div> </div> <div class='box box-63'> <div class='box-border'></div> </div> <div class='box box-64'> <div class='box-border'></div> </div>
</div>
</body>
</html>

FourPerfectlyRoundCircles - Script Codes CSS Codes

body { margin: 0; background-color: #666; color: white;
}
.title { position: fixed; top: 20px; left: 20px; margin: 0; font: italic 3em/1em "Georgia"; text-align: center; background-color: rgba(102, 102, 102, 0.75); z-index: 10; padding: 12px 20px; border-radius: 16px;
}
.title span:nth-child(odd) { color: black;
}
.circle { position: absolute; left: 50%; top: 50%;
}
.box { transform-origin: 50% 100%; position: absolute;
}
.circle-1 .box { height: 112px;
}
.circle-2 .box { height: 192px;
}
.circle-3 .box { height: 272px;
}
.circle-4 .box { height: 352px;
}
.box-border { width: 16px; height: 16px; border: 3px solid black; transform: rotate(15deg);
}
.circle-2 .box-border,
.circle-4 .box-border { transform: rotate(-15deg);
}
.box:nth-child(even) .box-border { border-color: white;
}
.circle-1 .box-1 { transform: translate(-50%, -100%) rotate(20deg);
}
.circle-1 .box-2 { transform: translate(-50%, -100%) rotate(40deg);
}
.circle-1 .box-3 { transform: translate(-50%, -100%) rotate(60deg);
}
.circle-1 .box-4 { transform: translate(-50%, -100%) rotate(80deg);
}
.circle-1 .box-5 { transform: translate(-50%, -100%) rotate(100deg);
}
.circle-1 .box-6 { transform: translate(-50%, -100%) rotate(120deg);
}
.circle-1 .box-7 { transform: translate(-50%, -100%) rotate(140deg);
}
.circle-1 .box-8 { transform: translate(-50%, -100%) rotate(160deg);
}
.circle-1 .box-9 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-1 .box-10 { transform: translate(-50%, -100%) rotate(200deg);
}
.circle-1 .box-11 { transform: translate(-50%, -100%) rotate(220deg);
}
.circle-1 .box-12 { transform: translate(-50%, -100%) rotate(240deg);
}
.circle-1 .box-13 { transform: translate(-50%, -100%) rotate(260deg);
}
.circle-1 .box-14 { transform: translate(-50%, -100%) rotate(280deg);
}
.circle-1 .box-15 { transform: translate(-50%, -100%) rotate(300deg);
}
.circle-1 .box-16 { transform: translate(-50%, -100%) rotate(320deg);
}
.circle-1 .box-17 { transform: translate(-50%, -100%) rotate(340deg);
}
.circle-1 .box-18 { transform: translate(-50%, -100%) rotate(360deg);
}
.circle-2 .box-1 { transform: translate(-50%, -100%) rotate(10deg);
}
.circle-2 .box-2 { transform: translate(-50%, -100%) rotate(20deg);
}
.circle-2 .box-3 { transform: translate(-50%, -100%) rotate(30deg);
}
.circle-2 .box-4 { transform: translate(-50%, -100%) rotate(40deg);
}
.circle-2 .box-5 { transform: translate(-50%, -100%) rotate(50deg);
}
.circle-2 .box-6 { transform: translate(-50%, -100%) rotate(60deg);
}
.circle-2 .box-7 { transform: translate(-50%, -100%) rotate(70deg);
}
.circle-2 .box-8 { transform: translate(-50%, -100%) rotate(80deg);
}
.circle-2 .box-9 { transform: translate(-50%, -100%) rotate(90deg);
}
.circle-2 .box-10 { transform: translate(-50%, -100%) rotate(100deg);
}
.circle-2 .box-11 { transform: translate(-50%, -100%) rotate(110deg);
}
.circle-2 .box-12 { transform: translate(-50%, -100%) rotate(120deg);
}
.circle-2 .box-13 { transform: translate(-50%, -100%) rotate(130deg);
}
.circle-2 .box-14 { transform: translate(-50%, -100%) rotate(140deg);
}
.circle-2 .box-15 { transform: translate(-50%, -100%) rotate(150deg);
}
.circle-2 .box-16 { transform: translate(-50%, -100%) rotate(160deg);
}
.circle-2 .box-17 { transform: translate(-50%, -100%) rotate(170deg);
}
.circle-2 .box-18 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-2 .box-19 { transform: translate(-50%, -100%) rotate(190deg);
}
.circle-2 .box-20 { transform: translate(-50%, -100%) rotate(200deg);
}
.circle-2 .box-21 { transform: translate(-50%, -100%) rotate(210deg);
}
.circle-2 .box-22 { transform: translate(-50%, -100%) rotate(220deg);
}
.circle-2 .box-23 { transform: translate(-50%, -100%) rotate(230deg);
}
.circle-2 .box-24 { transform: translate(-50%, -100%) rotate(240deg);
}
.circle-2 .box-25 { transform: translate(-50%, -100%) rotate(250deg);
}
.circle-2 .box-26 { transform: translate(-50%, -100%) rotate(260deg);
}
.circle-2 .box-27 { transform: translate(-50%, -100%) rotate(270deg);
}
.circle-2 .box-28 { transform: translate(-50%, -100%) rotate(280deg);
}
.circle-2 .box-29 { transform: translate(-50%, -100%) rotate(290deg);
}
.circle-2 .box-30 { transform: translate(-50%, -100%) rotate(300deg);
}
.circle-2 .box-31 { transform: translate(-50%, -100%) rotate(310deg);
}
.circle-2 .box-32 { transform: translate(-50%, -100%) rotate(320deg);
}
.circle-2 .box-33 { transform: translate(-50%, -100%) rotate(330deg);
}
.circle-2 .box-34 { transform: translate(-50%, -100%) rotate(340deg);
}
.circle-2 .box-35 { transform: translate(-50%, -100%) rotate(350deg);
}
.circle-2 .box-36 { transform: translate(-50%, -100%) rotate(360deg);
}
.circle-3 .box-1 { transform: translate(-50%, -100%) rotate(7.5deg);
}
.circle-3 .box-2 { transform: translate(-50%, -100%) rotate(15deg);
}
.circle-3 .box-3 { transform: translate(-50%, -100%) rotate(22.5deg);
}
.circle-3 .box-4 { transform: translate(-50%, -100%) rotate(30deg);
}
.circle-3 .box-5 { transform: translate(-50%, -100%) rotate(37.5deg);
}
.circle-3 .box-6 { transform: translate(-50%, -100%) rotate(45deg);
}
.circle-3 .box-7 { transform: translate(-50%, -100%) rotate(52.5deg);
}
.circle-3 .box-8 { transform: translate(-50%, -100%) rotate(60deg);
}
.circle-3 .box-9 { transform: translate(-50%, -100%) rotate(67.5deg);
}
.circle-3 .box-10 { transform: translate(-50%, -100%) rotate(75deg);
}
.circle-3 .box-11 { transform: translate(-50%, -100%) rotate(82.5deg);
}
.circle-3 .box-12 { transform: translate(-50%, -100%) rotate(90deg);
}
.circle-3 .box-13 { transform: translate(-50%, -100%) rotate(97.5deg);
}
.circle-3 .box-14 { transform: translate(-50%, -100%) rotate(105deg);
}
.circle-3 .box-15 { transform: translate(-50%, -100%) rotate(112.5deg);
}
.circle-3 .box-16 { transform: translate(-50%, -100%) rotate(120deg);
}
.circle-3 .box-17 { transform: translate(-50%, -100%) rotate(127.5deg);
}
.circle-3 .box-18 { transform: translate(-50%, -100%) rotate(135deg);
}
.circle-3 .box-19 { transform: translate(-50%, -100%) rotate(142.5deg);
}
.circle-3 .box-20 { transform: translate(-50%, -100%) rotate(150deg);
}
.circle-3 .box-21 { transform: translate(-50%, -100%) rotate(157.5deg);
}
.circle-3 .box-22 { transform: translate(-50%, -100%) rotate(165deg);
}
.circle-3 .box-23 { transform: translate(-50%, -100%) rotate(172.5deg);
}
.circle-3 .box-24 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-3 .box-25 { transform: translate(-50%, -100%) rotate(187.5deg);
}
.circle-3 .box-26 { transform: translate(-50%, -100%) rotate(195deg);
}
.circle-3 .box-27 { transform: translate(-50%, -100%) rotate(202.5deg);
}
.circle-3 .box-28 { transform: translate(-50%, -100%) rotate(210deg);
}
.circle-3 .box-29 { transform: translate(-50%, -100%) rotate(217.5deg);
}
.circle-3 .box-30 { transform: translate(-50%, -100%) rotate(225deg);
}
.circle-3 .box-31 { transform: translate(-50%, -100%) rotate(232.5deg);
}
.circle-3 .box-32 { transform: translate(-50%, -100%) rotate(240deg);
}
.circle-3 .box-33 { transform: translate(-50%, -100%) rotate(247.5deg);
}
.circle-3 .box-34 { transform: translate(-50%, -100%) rotate(255deg);
}
.circle-3 .box-35 { transform: translate(-50%, -100%) rotate(262.5deg);
}
.circle-3 .box-36 { transform: translate(-50%, -100%) rotate(270deg);
}
.circle-3 .box-37 { transform: translate(-50%, -100%) rotate(277.5deg);
}
.circle-3 .box-38 { transform: translate(-50%, -100%) rotate(285deg);
}
.circle-3 .box-39 { transform: translate(-50%, -100%) rotate(292.5deg);
}
.circle-3 .box-40 { transform: translate(-50%, -100%) rotate(300deg);
}
.circle-3 .box-41 { transform: translate(-50%, -100%) rotate(307.5deg);
}
.circle-3 .box-42 { transform: translate(-50%, -100%) rotate(315deg);
}
.circle-3 .box-43 { transform: translate(-50%, -100%) rotate(322.5deg);
}
.circle-3 .box-44 { transform: translate(-50%, -100%) rotate(330deg);
}
.circle-3 .box-45 { transform: translate(-50%, -100%) rotate(337.5deg);
}
.circle-3 .box-46 { transform: translate(-50%, -100%) rotate(345deg);
}
.circle-3 .box-47 { transform: translate(-50%, -100%) rotate(352.5deg);
}
.circle-3 .box-48 { transform: translate(-50%, -100%) rotate(360deg);
}
.circle-4 .box-1 { transform: translate(-50%, -100%) rotate(5.625deg);
}
.circle-4 .box-2 { transform: translate(-50%, -100%) rotate(11.25deg);
}
.circle-4 .box-3 { transform: translate(-50%, -100%) rotate(16.875deg);
}
.circle-4 .box-4 { transform: translate(-50%, -100%) rotate(22.5deg);
}
.circle-4 .box-5 { transform: translate(-50%, -100%) rotate(28.125deg);
}
.circle-4 .box-6 { transform: translate(-50%, -100%) rotate(33.75deg);
}
.circle-4 .box-7 { transform: translate(-50%, -100%) rotate(39.375deg);
}
.circle-4 .box-8 { transform: translate(-50%, -100%) rotate(45deg);
}
.circle-4 .box-9 { transform: translate(-50%, -100%) rotate(50.625deg);
}
.circle-4 .box-10 { transform: translate(-50%, -100%) rotate(56.25deg);
}
.circle-4 .box-11 { transform: translate(-50%, -100%) rotate(61.875deg);
}
.circle-4 .box-12 { transform: translate(-50%, -100%) rotate(67.5deg);
}
.circle-4 .box-13 { transform: translate(-50%, -100%) rotate(73.125deg);
}
.circle-4 .box-14 { transform: translate(-50%, -100%) rotate(78.75deg);
}
.circle-4 .box-15 { transform: translate(-50%, -100%) rotate(84.375deg);
}
.circle-4 .box-16 { transform: translate(-50%, -100%) rotate(90deg);
}
.circle-4 .box-17 { transform: translate(-50%, -100%) rotate(95.625deg);
}
.circle-4 .box-18 { transform: translate(-50%, -100%) rotate(101.25deg);
}
.circle-4 .box-19 { transform: translate(-50%, -100%) rotate(106.875deg);
}
.circle-4 .box-20 { transform: translate(-50%, -100%) rotate(112.5deg);
}
.circle-4 .box-21 { transform: translate(-50%, -100%) rotate(118.125deg);
}
.circle-4 .box-22 { transform: translate(-50%, -100%) rotate(123.75deg);
}
.circle-4 .box-23 { transform: translate(-50%, -100%) rotate(129.375deg);
}
.circle-4 .box-24 { transform: translate(-50%, -100%) rotate(135deg);
}
.circle-4 .box-25 { transform: translate(-50%, -100%) rotate(140.625deg);
}
.circle-4 .box-26 { transform: translate(-50%, -100%) rotate(146.25deg);
}
.circle-4 .box-27 { transform: translate(-50%, -100%) rotate(151.875deg);
}
.circle-4 .box-28 { transform: translate(-50%, -100%) rotate(157.5deg);
}
.circle-4 .box-29 { transform: translate(-50%, -100%) rotate(163.125deg);
}
.circle-4 .box-30 { transform: translate(-50%, -100%) rotate(168.75deg);
}
.circle-4 .box-31 { transform: translate(-50%, -100%) rotate(174.375deg);
}
.circle-4 .box-32 { transform: translate(-50%, -100%) rotate(180deg);
}
.circle-4 .box-33 { transform: translate(-50%, -100%) rotate(185.625deg);
}
.circle-4 .box-34 { transform: translate(-50%, -100%) rotate(191.25deg);
}
.circle-4 .box-35 { transform: translate(-50%, -100%) rotate(196.875deg);
}
.circle-4 .box-36 { transform: translate(-50%, -100%) rotate(202.5deg);
}
.circle-4 .box-37 { transform: translate(-50%, -100%) rotate(208.125deg);
}
.circle-4 .box-38 { transform: translate(-50%, -100%) rotate(213.75deg);
}
.circle-4 .box-39 { transform: translate(-50%, -100%) rotate(219.375deg);
}
.circle-4 .box-40 { transform: translate(-50%, -100%) rotate(225deg);
}
.circle-4 .box-41 { transform: translate(-50%, -100%) rotate(230.625deg);
}
.circle-4 .box-42 { transform: translate(-50%, -100%) rotate(236.25deg);
}
.circle-4 .box-43 { transform: translate(-50%, -100%) rotate(241.875deg);
}
.circle-4 .box-44 { transform: translate(-50%, -100%) rotate(247.5deg);
}
.circle-4 .box-45 { transform: translate(-50%, -100%) rotate(253.125deg);
}
.circle-4 .box-46 { transform: translate(-50%, -100%) rotate(258.75deg);
}
.circle-4 .box-47 { transform: translate(-50%, -100%) rotate(264.375deg);
}
.circle-4 .box-48 { transform: translate(-50%, -100%) rotate(270deg);
}
.circle-4 .box-49 { transform: translate(-50%, -100%) rotate(275.625deg);
}
.circle-4 .box-50 { transform: translate(-50%, -100%) rotate(281.25deg);
}
.circle-4 .box-51 { transform: translate(-50%, -100%) rotate(286.875deg);
}
.circle-4 .box-52 { transform: translate(-50%, -100%) rotate(292.5deg);
}
.circle-4 .box-53 { transform: translate(-50%, -100%) rotate(298.125deg);
}
.circle-4 .box-54 { transform: translate(-50%, -100%) rotate(303.75deg);
}
.circle-4 .box-55 { transform: translate(-50%, -100%) rotate(309.375deg);
}
.circle-4 .box-56 { transform: translate(-50%, -100%) rotate(315deg);
}
.circle-4 .box-57 { transform: translate(-50%, -100%) rotate(320.625deg);
}
.circle-4 .box-58 { transform: translate(-50%, -100%) rotate(326.25deg);
}
.circle-4 .box-59 { transform: translate(-50%, -100%) rotate(331.875deg);
}
.circle-4 .box-60 { transform: translate(-50%, -100%) rotate(337.5deg);
}
.circle-4 .box-61 { transform: translate(-50%, -100%) rotate(343.125deg);
}
.circle-4 .box-62 { transform: translate(-50%, -100%) rotate(348.75deg);
}
.circle-4 .box-63 { transform: translate(-50%, -100%) rotate(354.375deg);
}
.circle-4 .box-64 { transform: translate(-50%, -100%) rotate(360deg);
}

Home Page	Home
Developer	Oliver Kühn
Username	0x04
Uploaded	November 15, 2022
Rating	3
Size	5,772 Kb
Views	16,192

Do you need developer help for FourPerfectlyRoundCircles?

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!

Oliver Kühn (0x04) Script Codes

Name	Size
Background-blend-mode Test	4,744 Kb
Pure CSS Jalousien	2,238 Kb
Max Headroom	3,784 Kb
ASCIICanvas	6,516 Kb
Border loading indicators	3,025 Kb
Unicode glitching	1,632 Kb
Pentagon loading indicator	2,371 Kb
Hover rotating cube	3,166 Kb
X4.css Theme System	10,530 Kb
Perforated foil	2,617 Kb

Create amazing blog posts with AI!

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!

Similar Scripts & Codes

Name	Username	Size
Delete Hover	Chungman93	2,557 Kb
Zip Button test	Lje7462	1,932 Kb
Sexy Social Buttons	Ipiyale	2,226 Kb
Custom checkbox example	Capelo	3,495 Kb
Mobile Sub Menu Concept	Berdejitendra	2,790 Kb
Bootstrap 4 Gridsystem Demo	Rivella50	1,535 Kb
Canvas stripes	Adrianparr	1,948 Kb
Hamburger Menu Animation	Salmanraza	2,580 Kb
Ghost Buttons with CSS3	Mithicher	2,509 Kb
Fireworks Show	Arianalynn	3,048 Kb

Do you want hide your ip address?

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!