用SVG filter实现的马赛克图片过滤效果

Glitched SVG filter 用svg滤镜给图片打马赛克，网站小编的利器。使用feColorMatrix颜色矩阵变换实现。

svg，filter

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2664
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fontlibrary.org/face/sansita");
html,
body {
    margin: 0;
    min-height: 100%;
}
html svg,
body svg {
    position: absolute;
    left: -1000em;
}
html .bg,
body .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("http://finda.photo/image/12056/thumbnail/original");
    background-size: cover;
    background-position: center;
    z-index: -1;
    -webkit-filter: url("#imgfilter");
    filter: url("#imgfilter");
}
html section,
body section {
    height: 50vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-shadow: 0px 1px 1px #000;
}
html section h1,
body section h1 {
    color: #ddb517;
    font-size: 3rem;
    margin: 0;
}
html section h2,
body section h2 {
    margin: 0;
    color: #ddb517;
}
html section.s1,
body section.s1 {
    font-family: SansitaBlack;
}

HTML

Glitched SVG filter 用svg滤镜给图片打马赛克，网站小编的利器。使用feColorMatrix颜色矩阵变换实现。

svg，filter

编辑器支持Emmet

快捷键

Glitched SVG filter 用svg滤镜给图片打马赛克，网站小编的利器。使用feColorMatrix颜色矩阵变换实现。

svg，filter

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：