Actio 9 - Código de la portada

Portada realizada por código HTML y CSS

$colorc: #ee8fb5 //rgb(random(255),random(255),random(125))
$colora: #d144ce //rgb(random(255),random(255),random(125))
$colorb: #fc4488 //rgb(random(255),random(255),random(125))
$colord: #407de1 //rgb(random(125),random(125),random(255))
$colore: #fc8865 //rgb(random(255),random(125),random(125))
$colorf: #9a5db6 //rgb(random(125),random(125),random(255))
$bg: rgb(random(10),random(10),random(10))

.container
    background: $bg
    width: 100%
    height: 100vh
    overflow: hidden
    position: relative
   
    &:after
        content: ''
        width: 100%
        height: 100vh
        background: url('https://www.textureking.com/content/img/stock/big/10_4955.JPG')
        background-size: cover
        mix-blend-mode: overlay
        position: absolute
        top: 0
        left: 0
        // opacity: 0
   
    .blobs
        width: 50vh
        height: 50vh
        display: block
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        // filter: contrast(30)
       
        .blob
            width: 100%
            height: 100%
            border-radius: 100%
            position: absolute
            mix-blend-mode: multiply
            filter: blur(80px)
           
            &.a
                background-color: mix($colora, white, 80%)
                animation: circular2 40s linear infinite
            &.b
                background-color: mix($colorb, white, 50%)
                animation: circular 20s linear infinite
            &.c
                background-color: mix($colorc, white, 50%)
                animation: circular3 60s linear infinite
            &.d
                background-color: mix($colord, white, 80%)
                animation: circular 40s linear infinite
            &.e
                background-color: mix($colore, white, 30%)
                animation: circular2 100s linear infinite
            &.f
                background-color: mix($colorf, white, 70%)
                animation: circular3 60s linear infinite

$R: 500px
$S: 300px
@keyframes circular
    0%
        transform: translate(0, -$R)
    25%
        transform: translate($R, 0)
    50%
        transform: translate(0, $R)
    75%
        transform: translate(-$R, 0)
    100%
        transform: translate(0, -$R)

@keyframes circular2
    0%
        transform: translate(0, $S)
    25%
        transform: translate(-$S, 0)
    50%
        transform: translate(0, -$S)
    75%
        transform: translate($S, 0)
    100%
        transform: translate(0, $S)
   
    @keyframes circular3
    0%
        transform: translate(0, $R)
    25%
        transform: translate(-$S, 0)
    50%
        transform: translate(0, -$R)
    75%
        transform: translate($S, 0)
    100%
        transform: translate(0, $R)