.com
  a.th(href='https://unsplash.com/photos/UrfpprfDB0k' target='_blank')
    img(src='https://images.unsplash.com/photo-1530919424169-4b95f917e937?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2133&q=80')

:root {
    --inset: 1vmin;
    --color0: #0ac;
    --color1: #222;
    --duration: 5s;
    --bgcolor0: #0aca;
    --bgcolor1: #222a;
}

body {
    display: grid; 
    place-content: center; 
    block-size: 100vh;
    &::before {
        content: '';
        display: block;
        inline-size: 100vw;
        block-size: 100vh;
        position: fixed;
        background: linear-gradient(-45deg, var(--bgcolor0) 60%, var(--bgcolor1) 0),
            linear-gradient(to top left, var(--bgcolor0) 50%, var(--bgcolor1) 0),
            linear-gradient(to bottom left, var(--bgcolor0) 50%, var(--bgcolor1) 0),
            linear-gradient(135deg, var(--bgcolor0) 20%, var(--bgcolor1) 0);
    }
}

.com {
    block-size: 40vmin; 
    inline-size: 40vmin;
    display: grid;
    place-items: center;
    rotate: 45deg; 
    overflow: hidden;
    box-shadow: inset 0 0 10px black, 0 0 10px black;
    filter: drop-shadow(0 0 10px var(--color0)) saturate(2);
    
    .th {
        inline-size: 100%;
        block-size: 100%;
        overflow: hidden;
        clip-path: inset(var(--inset));
        
        img {
            display: block;
            inline-size: 100%; 
            block-size: 100%; 
            object-fit: cover;
            rotate: -45deg;
            scale: 1.6;
        }    
    }
    
    &::before {
        content: '';
        display: block;
        inline-size: 100%;
        block-size: 100%;
        position: absolute;
        background: repeating-conic-gradient(transparent, var(--color0) 25deg, var(--color1) 22.5deg, transparent 90deg);
        animation: var(--duration) f linear infinite;
        scale: 1.6;
        @keyframes f {
            0% { rotate: 0 }
            100% { rotate: 1turn }
        }
    }
}

// ---- chrome Version 87.0.4280.141 (Official Build)

@supports not (rotate: 0deg) {
    .com {
        transform: rotate(45deg);
        .th {
            img {
                transform: rotate(-45deg) scale(1.6);
            }
        }
        &::before {
            transform: scale(1.6);
            animation-name: g;
        }
    }
    @keyframes g {
        0% { transform: rotate(0) scale(1.6) }
        100% { transform: rotate(1turn) scale(1.6) }
    }
}