.rect{
    position: relative;
    width: 90%;
    height: 100%;
    filter: url(#wavy) blur(1px);
}
.rect:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 20px rgb(255, 0, 0),
                inset 0 0 20px rgb(255, 0, 0);
    
    animation: animate 5s linear infinite;
}
.rect:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 4px #fff,
                inset 0 0 8px #fff;
    
}
.rect:nth-child(2):before{
    animation-delay: -2.5s;
}
@keyframes animate
{
    0%{
        box-shadow: 0 0 20px rgb(255, 0, 0),
                inset 0 0 20px rgb(255, 0, 0);
        filter: hue-rotate(0deg);
    }
    20%{
        box-shadow: 0 0 24px rgb(255, 0, 0),
                inset 0 0 24px rgb(255, 0, 0);
        
    }
    40%{
        box-shadow: 0 0 32px rgb(255, 0, 0),
                inset 0 0 32px rgb(255, 0, 0);
        
    }
    60%{
        box-shadow: 0 0 32px rgb(255, 0, 0),
                inset 0 0 32px rgb(255, 0, 0);
        
    }
    80%{
        box-shadow: 0 0 40px rgb(255, 0, 0),
                inset 0 0 40px rgb(255, 0, 0);
        
    }
     100%{
        box-shadow: 0 0 20px rgb(255, 0, 0),
                inset 0 0 20px rgb(255, 0, 0);
         /* filter: hue-rotate(360deg); */
    }
}
svg{
    width: 0;
    height: 0;
}

/* blue */

.bluerect{
    position: relative;
    width: 90%;
    height: 100%;
    filter: url(#wavy) blur(1px);
}
.bluerect:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 20px blue,
                inset 0 0 20px blue;
    
    animation: animateblue 5s linear infinite;
}
.bluerect:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 4px #fff,
                inset 0 0 8px #fff;
    
}
.bluerect:nth-child(2):before{
    animation-delay: -2.5s;
}
@keyframes animateblue
{
    0%{
        box-shadow: 0 0 20px blue,
                inset 0 0 20px blue;
        filter: hue-rotate(0deg);
    }
    20%{
        box-shadow: 0 0 24px blue,
                inset 0 0 24px blue;
        
    }
    40%{
        box-shadow: 0 0 32px blue,
                inset 0 0 32px blue;
        
    }
    60%{
        box-shadow: 0 0 32px blue,
                inset 0 0 32px blue;
        
    }
    80%{
        box-shadow: 0 0 40px blue,
                inset 0 0 40px blue;
        
    }
     100%{
        box-shadow: 0 0 20px blue,
                inset 0 0 20px blue;
         /* filter: hue-rotate(360deg); */
    }
}

/* green */

.greenrect{
    position: relative;
    width: 90%;
    height: 100%;
    filter: url(#wavy) blur(1px);
}
.greenrect:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 20px green,
                inset 0 0 20px green;
    
    animation: animategreen 5s linear infinite;
}
.greenrect:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 4px #fff,
                inset 0 0 8px #fff;
    
}
.greenrect:nth-child(2):before{
    animation-delay: -2.5s;
}
@keyframes animategreen
{
    0%{
        box-shadow: 0 0 20px green,
                inset 0 0 20px green;
        filter: hue-rotate(0deg);
    }
    20%{
        box-shadow: 0 0 24px green,
                inset 0 0 24px green;
        
    }
    40%{
        box-shadow: 0 0 32px green,
                inset 0 0 32px green;
        
    }
    60%{
        box-shadow: 0 0 32px green,
                inset 0 0 32px green;
        
    }
    80%{
        box-shadow: 0 0 40px green,
                inset 0 0 40px green;
        
    }
     100%{
        box-shadow: 0 0 20px green,
                inset 0 0 20px green;
         /* filter: hue-rotate(360deg); */
    }
}

/* yellow */

.yellowrect{
    position: relative;
    width: 90%;
    height: 100%;
    filter: url(#wavy) blur(1px);
}
.yellowrect:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 20px yellow,
                inset 0 0 20px yellow;
    
    animation: animateyellow 5s linear infinite;
}
.yellowrect:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 4px #fff,
                inset 0 0 8px #fff;
    
}
.yellowrect:nth-child(2):before{
    animation-delay: -2.5s;
}
@keyframes animateyellow
{
    0%{
        box-shadow: 0 0 20px yellow,
                inset 0 0 20px yellow;
        filter: hue-rotate(0deg);
    }
    20%{
        box-shadow: 0 0 24px yellow,
                inset 0 0 24px yellow;
        
    }
    40%{
        box-shadow: 0 0 32px yellow,
                inset 0 0 32px yellow;
        
    }
    60%{
        box-shadow: 0 0 32px yellow,
                inset 0 0 32px yellow;
        
    }
    80%{
        box-shadow: 0 0 40px yellow,
                inset 0 0 40px yellow;
        
    }
     100%{
        box-shadow: 0 0 20px yellow,
                inset 0 0 20px yellow;
         /* filter: hue-rotate(360deg); */
    }
}

/* purple */

.purplerect{
    position: relative;
    width: 90%;
    height: 100%;
    filter: url(#wavy) blur(1px);
}
.purplerect:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 20px purple,
                inset 0 0 20px purple;
    
    animation: animatepurple 5s linear infinite;
}
.purplerect:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 2%;
    border: 20px solid #fff;
    box-shadow: 0 0 4px #fff,
                inset 0 0 8px #fff;
    
}
.purplerect:nth-child(2):before{
    animation-delay: -2.5s;
}
@keyframes animatepurple
{
    0%{
        box-shadow: 0 0 20px purple,
                inset 0 0 20px purple;
        filter: hue-rotate(0deg);
    }
    20%{
        box-shadow: 0 0 24px purple,
                inset 0 0 24px purple;
        
    }
    40%{
        box-shadow: 0 0 32px purple,
                inset 0 0 32px purple;
        
    }
    60%{
        box-shadow: 0 0 32px purple,
                inset 0 0 32px purple;
        
    }
    80%{
        box-shadow: 0 0 40px purple,
                inset 0 0 40px purple;
        
    }
     100%{
        box-shadow: 0 0 20px purple,
                inset 0 0 20px purple;
         /* filter: hue-rotate(360deg); */
    }
}