#codevember #20 Circularly Pulsating Squares

Size
4,043 Kb
Views
32,384

How do I make an #codevember #20 circularly pulsating squares?

Resize the window to a square for best effect.As suggested by Ana Tudor, @thebabydino :. What is a #codevember #20 circularly pulsating squares? How do you make a #codevember #20 circularly pulsating squares? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.

#codevember #20 Circularly Pulsating Squares Previews

#codevember #20 Circularly Pulsating Squares - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#codevember #20 Circularly Pulsating Squares</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
</body>
</html>

#codevember #20 Circularly Pulsating Squares - Script Codes CSS Codes

/* Johan Karlsson (DonKarlssonSan) All my #codevember Pens: http://codepen.io/collection/XwMkWm/
*/
html, body { margin: 0; background-color: beige; overflow: hidden;
}
/*
@debug distToCenter(8.5, 9.5);
@debug dist(0, 0, 3, 4);
*/
.square { position: absolute; background-color: #222; width: 5vmin; height: 5vmin; -webkit-animation-name: scale; animation-name: scale; -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.square:nth-child(1) { -webkit-animation-delay: 1944.54365ms; animation-delay: 1944.54365ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(2) { -webkit-animation-delay: 1776.5838ms; animation-delay: 1776.5838ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(3) { -webkit-animation-delay: 1629.8006ms; animation-delay: 1629.8006ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(4) { -webkit-animation-delay: 1510.38075ms; animation-delay: 1510.38075ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(5) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(6) { -webkit-animation-delay: 1380.67013ms; animation-delay: 1380.67013ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(7) { -webkit-animation-delay: 1380.67013ms; animation-delay: 1380.67013ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(8) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(9) { -webkit-animation-delay: 1510.38075ms; animation-delay: 1510.38075ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(10) { -webkit-animation-delay: 1629.8006ms; animation-delay: 1629.8006ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(11) { -webkit-animation-delay: 1776.5838ms; animation-delay: 1776.5838ms; left: calc(calc(50vw - 52.5vmin) + 0vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(12) { -webkit-animation-delay: 1776.5838ms; animation-delay: 1776.5838ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(13) { -webkit-animation-delay: 1590.99026ms; animation-delay: 1590.99026ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(14) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(15) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(16) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(17) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(18) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(19) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(20) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(21) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(22) { -webkit-animation-delay: 1590.99026ms; animation-delay: 1590.99026ms; left: calc(calc(50vw - 52.5vmin) + 10vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(23) { -webkit-animation-delay: 1629.8006ms; animation-delay: 1629.8006ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(24) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(25) { -webkit-animation-delay: 1237.43687ms; animation-delay: 1237.43687ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(26) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(27) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(28) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(29) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(30) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(31) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(32) { -webkit-animation-delay: 1237.43687ms; animation-delay: 1237.43687ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(33) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 20vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(34) { -webkit-animation-delay: 1510.38075ms; animation-delay: 1510.38075ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(35) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(36) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(37) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(38) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(39) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(40) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(41) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(42) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(43) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(44) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 30vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(45) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(46) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(47) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(48) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(49) { -webkit-animation-delay: 530.33009ms; animation-delay: 530.33009ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(50) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(51) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(52) { -webkit-animation-delay: 530.33009ms; animation-delay: 530.33009ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(53) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(54) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(55) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 40vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(56) { -webkit-animation-delay: 1380.67013ms; animation-delay: 1380.67013ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(57) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(58) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(59) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(60) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(61) { -webkit-animation-delay: 176.7767ms; animation-delay: 176.7767ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(62) { -webkit-animation-delay: 176.7767ms; animation-delay: 176.7767ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(63) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(64) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(65) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(66) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 50vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(67) { -webkit-animation-delay: 1380.67013ms; animation-delay: 1380.67013ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(68) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(69) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(70) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(71) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(72) { -webkit-animation-delay: 176.7767ms; animation-delay: 176.7767ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(73) { -webkit-animation-delay: 176.7767ms; animation-delay: 176.7767ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(74) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(75) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(76) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(77) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 60vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(78) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(79) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(80) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(81) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(82) { -webkit-animation-delay: 530.33009ms; animation-delay: 530.33009ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(83) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(84) { -webkit-animation-delay: 395.28471ms; animation-delay: 395.28471ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(85) { -webkit-animation-delay: 530.33009ms; animation-delay: 530.33009ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(86) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(87) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(88) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 70vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(89) { -webkit-animation-delay: 1510.38075ms; animation-delay: 1510.38075ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(90) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(91) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(92) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(93) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(94) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(95) { -webkit-animation-delay: 637.37744ms; animation-delay: 637.37744ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(96) { -webkit-animation-delay: 728.86899ms; animation-delay: 728.86899ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(97) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(98) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(99) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 80vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(100) { -webkit-animation-delay: 1629.8006ms; animation-delay: 1629.8006ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(101) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(102) { -webkit-animation-delay: 1237.43687ms; animation-delay: 1237.43687ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(103) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(104) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(105) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(106) { -webkit-animation-delay: 883.88348ms; animation-delay: 883.88348ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(107) { -webkit-animation-delay: 951.97164ms; animation-delay: 951.97164ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(108) { -webkit-animation-delay: 1075.29066ms; animation-delay: 1075.29066ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(109) { -webkit-animation-delay: 1237.43687ms; animation-delay: 1237.43687ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(110) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 90vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
.square:nth-child(111) { -webkit-animation-delay: 1776.5838ms; animation-delay: 1776.5838ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 0vmin);
}
.square:nth-child(112) { -webkit-animation-delay: 1590.99026ms; animation-delay: 1590.99026ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 10vmin);
}
.square:nth-child(113) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 20vmin);
}
.square:nth-child(114) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 30vmin);
}
.square:nth-child(115) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 40vmin);
}
.square:nth-child(116) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 50vmin);
}
.square:nth-child(117) { -webkit-animation-delay: 1131.92314ms; animation-delay: 1131.92314ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 60vmin);
}
.square:nth-child(118) { -webkit-animation-delay: 1185.85412ms; animation-delay: 1185.85412ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 70vmin);
}
.square:nth-child(119) { -webkit-animation-delay: 1286.95377ms; animation-delay: 1286.95377ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 80vmin);
}
.square:nth-child(120) { -webkit-animation-delay: 1425.21928ms; animation-delay: 1425.21928ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 90vmin);
}
.square:nth-child(121) { -webkit-animation-delay: 1590.99026ms; animation-delay: 1590.99026ms; left: calc(calc(50vw - 52.5vmin) + 100vmin); top: calc(calc(50vh - 52.5vmin) + 100vmin);
}
@-webkit-keyframes scale { to { -webkit-transform: scale(2.3) rotate(-180deg); transform: scale(2.3) rotate(-180deg); }
}
@keyframes scale { to { -webkit-transform: scale(2.3) rotate(-180deg); transform: scale(2.3) rotate(-180deg); }
}
#codevember #20 Circularly Pulsating Squares - Script Codes
#codevember #20 Circularly Pulsating Squares - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 26, 2022
Rating 4
Size 4,043 Kb
Views 32,384
Do you need developer help for #codevember #20 Circularly Pulsating Squares?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Create amazing love letters 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!