<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    float: left;
}
.f0 {
    background-image: filter(
        url("resources/image.svg"),
        brightness(0.5));
}
.f1 {
    background-image: filter(
        url("resources/image.svg"),
        contrast(0.5));
}
.f2 {
    background-image: filter(
        url("resources/image.svg"),
        saturate(0.5));
}
.f3 {
    background-image: filter(
        url("resources/image.svg"),
        sepia(0.5));
}
.f4 {
    background-image: filter(
        url("resources/image.svg"),
        grayscale(0.5));
}
.f5 {
    background-image: filter(
        url("resources/image.svg"),
        invert(0.5));
}
.f6 {
    background-image: filter(
        url("resources/image.svg"),
        opacity(0.5));
}
.f7 {
    background-image: filter(
        url("resources/image.svg"),
        sepia(0.3) brightness(1.2) contrast(0.2));
}
.f8 {
    background-image: filter(
        url("resources/image.svg"),
        brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2));
}
.f9 {
    background-image: filter(
        url("resources/image.svg"),
        contrast(0.5) contrast(1.5));
}
.f10 {
    background-image: -webkit-filter(
        url("resources/image.svg"),
        contrast(0.5));
}
</style>
</head>
<body>
<div class="f0"></div>
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
<div class="f5"></div>
<div class="f6"></div>
<div class="f7"></div>
<div class="f8"></div>
<div class="f9"></div>
<div class="f10"></div>
</body>
</html>