#codevember #20 Circularly Pulsating Squares

Developer

Size

4,043 Kb

Views

32,384

#codevember #20 Circularly Pulsating Squares Previews
#codevember #20 Circularly Pulsating Squares HTML Codes
#codevember #20 Circularly Pulsating Squares CSS Codes

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); }
}

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

Name	Size
Sine Perlin	5,654 Kb
The Birth of a Sine Wave	2,607 Kb
Rotating Neon Curves	3,770 Kb
Lissajous x Lissajous	3,369 Kb
Text by Brownian Motion	3,182 Kb
IFS Fractal Christmas Tree	6,537 Kb
Circle Fractal	2,482 Kb
Circuit Board Warper	4,057 Kb
Particle Text	5,685 Kb
Random Fractal	2,751 Kb

Create amazing video scripts 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
Stylize Stories	Jvhti	2,465 Kb
Elephants Full screen site	Orrinward	3,981 Kb
Disable JavaScript execution from console	Ludviglindblom	2,534 Kb
A Different Type of Gallery	DonPage	2,950 Kb
Wikipedia Viewer	Thalpha	4,426 Kb
Blog	Rottingroom	1,430 Kb
Easing	GreenSock	2,043 Kb
CSS3 Latte Art Logo	Esambino	2,036 Kb
Materializecss input form	Jasonchan	1,443 Kb
Hello People	Danburrows	2,365 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!