<style>
    td {
        padding: 5px;
        text-align: center;
    }
    svg {
        width: 100px;
        height: 100px;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: green;
        display: inline-block;
    }
</style>
<body>
    <table>
        <tr>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        <tr>
            <td>blur</td>
            <td>brightness</td>
            <td>contrast</td>
            <td>drop-shadow</td>
        </tr>
        <tr>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        <tr>
            <td>grayscale</td>
            <td>hue-rotate</td>
            <td>invert</td>
            <td>opacity</td>
        </tr>
        <tr>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        <tr>
            <td>saturate</td>
            <td>sepia</td>
            <td>ref-blur</td>
            <td>ref-morphology</td>
        </tr>
        <tr>
            <td>
                <svg>
                    <rect width="100%" height="100%" fill="green"/>
                </svg>
            </td>
            <td>
                <svg>
                    <rect width="100%" height="100%" fill="green"/>
                </svg>
            </td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        <tr>
            <td>svg-blur</td>
            <td>svg-morphology</td>
            <td>grayscale <br/> ref-blur</td>
            <td>ref-morphology <br/> contrast</td>
        </tr>
    </table>
</body>
