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