Learn to code this colorful 2023 animation

Our team recently found another beautiful 2023 animation and wanted to teach you how to code it. Follow the simple steps below to create this colorful animation!

The HTML is simple at just 4 lines. Copy and paste this into your index.html script.

– (1..2).each do
.wrap
– (1..21).each do
.box

Then paste this CSS into your style.css script.

$bg: #111;
$t: transparent;
$y: #ffce3b;
$o: #ff7520;
$r: #ea0014;
$lb: #00fffe;
$db: #0056a7;
$p: #51386b;
$w: #fff;
$tl: 0% 0%;
$tr: 100% 0%;
$bl: 0% 100%;
$br: 100% 100%;
$time: 4s;

body{
background:radial-gradient(circle at top left, $y -50%, $t 50%), radial-gradient(circle at bottom right, $o -20%, $t 40%), $w;

width:100%;
height:100vh;
.wrap{
width:80vw;
height:34.25vw;
position:absolute;
left:calc(50% – 40vw);
top:50%;
transform:translateY(-50%);
z-index:0;
&:nth-of-type(2){
filter:blur(50px);
animation:blur 3s ease-in-out infinite alternate;
z-index:-1;
@keyframes blur{
to{
filter:blur(25px);
}
}
}
.box{
width:11.425vw;
height:11.425vw;
display:inline-block;
float:left;
position:relative;
overflow:hidden;
&:before{
content:”;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
// animation:none !important;
}
&:first-of-type, &:nth-of-type(13){
&:before{
background:radial-gradient(circle at bottom right, $o, $y 70%, $t 70%);
transform-origin:$br;
animation:rotatel $time ease-in-out infinite alternate;

}
}
&:nth-of-type(2), &:nth-of-type(14){
&:before{
background:radial-gradient(circle at bottom left, $y, $o 70%, $t 70%);
transform-origin:$bl;
animation:rotater $time ease-in-out infinite alternate;
}
}
&:nth-of-type(9), &:nth-of-type(21){
&:before{
background:radial-gradient(circle at top left, $r, $o 70%, $t 70%);
transform-origin:$tl;
animation:rotater $time ease-in-out infinite alternate;
}
}
&:nth-of-type(15){
&:before{
background:radial-gradient(circle at bottom right, $y, $r 70%, $t 70%);
transform-origin:$br;
animation:rotater $time ease-in-out infinite alternate;
}
}
&:nth-of-type(16){
&:before{
background:$r;
animation:slider $time ease-in-out infinite alternate;
}
}
&:nth-of-type(3){
&:before{
background:radial-gradient(circle at bottom right, $lb, $db 70%, $t 70%);
transform-origin:$br;
animation:rotater $time ease-in-out infinite alternate;
}
}
&:nth-of-type(4){
&:before{
background:radial-gradient(circle at bottom left, $db, $lb 70%, $t 70%);
transform-origin:$bl;
animation:rotatel $time ease-in-out infinite alternate;
}
}
&:nth-of-type(10), &:nth-of-type(20){
&:before{
background:radial-gradient(circle at top right, $db, $lb 70%, $t 70%);
transform-origin:$tr;
animation:rotatel $time ease-in-out infinite alternate;
}
}
&:nth-of-type(20){
&:before{
background:radial-gradient(circle at top right, $r, $y 70%, $t 70%);
}
}
&:nth-of-type(11){
&:before{
background:radial-gradient(circle at top left, $lb, $p 70%, $t 70%);
transform-origin:$tl;
animation:rotatel $time ease-in-out infinite alternate;
}
}
&:nth-of-type(5){
&:before{
background:repeating-linear-gradient(to right, $r, $r 1px, $t 1px, $t 5px), linear-gradient(to top, $y, $w);
transform-origin:bottom;
animation:slide $time ease-in-out infinite alternate;
}
}
&:nth-of-type(12){
&:before{
background:repeating-linear-gradient(to right, $r, $r 1px, $t 1px, $t 5px), linear-gradient(to bottom, $y, $o);
transform-origin:$tl;
animation:slide $time ease-in-out infinite alternate;
}
}
&:nth-of-type(6){
&:before{
background:radial-gradient(circle at right, $y, $o 45%, $t 45%);
transform-origin:$br;
animation:slidel $time ease-in-out infinite alternate;
}
}
&:nth-of-type(7){
&:before{
background:radial-gradient(circle at left, $r, $y 45%, $t 45%);
transform-origin:$br;
animation:slider $time ease-in-out infinite alternate;
}
}
@for $i from 1 through 21{
&:nth-of-type(#{$i}){
&:before{
animation-delay:#{$i/-30}s;
}
}
}
}
}

}

@keyframes rotater{
0%{
transform:rotate(-180deg);
}
10%{
transform:rotate(-180deg);
}
40%{
transform:rotate(0deg);
}
100%{
transform:rotate(0deg);
}
}

@keyframes rotatel{
0%{
transform:rotate(180deg);
}
10%{
transform:rotate(180deg);
}
30%{
transform:rotate(0deg);
}
100%{
transform:rotate(0deg);
}
}

@keyframes slide{
0%{
transform:scaleY(0);
}
30%{
transform:scaleY(0);
}
50%{
transform:scaleY(1);
}
100%{
transform:scaleY(1);
}
}
@keyframes slider{
0%{
transform:translateX(-200%);
}
10%{
transform:translateX(-200%);
}
30%{
transform:translateX(0%);
}
100%{
transform:translateX(0%);
}
}

@keyframes slidel{
0%{
transform:translateX(200%);
}
10%{
transform:translateX(200%);
}
30%{
transform:translateX(0%);
}
100%{
transform:translateX(0%);
}
}

A cool feature of this Pen is that it doesn’t require JavaScript, since the HTML includes all the interactive code.

Enjoy this post? Read more from our Blog.