$img: 'https://user-images.githubusercontent.com/8554143/34104896-4442e35e-e42d-11e7-80e8-3cf98219f23d.gif';

$img2: 'https://user-images.githubusercontent.com/8554143/34146030-68a604c8-e4d3-11e7-90d1-1f025efc6f40.gif';

​

div {

    width: 300px;

    height: 300px;

    margin: 50px;

    float: left;

    box-sizing: border-box;

}

​

.bg1 {

    border-radius: 50%;

    border: 5px solid #000;

    background: url($img),

        linear-gradient(45deg, #fff 0%, #fff 50%, #000 50%, #000 100%);

    background-size: 280px 280px, 25% 25%;

    background-position: center;

    background-repeat: no-repeat, repeat;

    background-blend-mode: difference;

}

​

.bg2 {

    border: 5px solid #000;

    background: url($img),

        linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%);

    background-size: 280px 280px, 25% 25%;

    background-position: center;

    background-repeat: no-repeat, repeat;

    background-blend-mode: difference;

}

​

.bg3 {

    border-radius: 50%;

    border: 5px solid #000;

    background: url($img),

        linear-gradient(90deg, #fff 0%, #fff 50%, #000 50%, #000 100%);

    background-size: 280px 280px, 10% 10%;

    background-position: center;

    background-repeat: no-repeat, repeat;

    background-blend-mode: difference;

}

​

.bg4 {

    border: 5px solid #000;

    background: url($img2),

        linear-gradient(45deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);

    background-size: 280px 280px, 20% 20%;

    background-position: center, 50% 50%, 50% 50%;

    background-repeat: no-repeat, repeat, repeat;

    background-blend-mode: difference;

}