SVG混合模式测试

SVG blend modes

svg, 基础知识

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1621
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    max-width: 1270px;
    margin: 0 auto;
}
img,
svg {
    width: 100%;
}
h1 {
    text-align: center;
}
#color-burn-hack .rood-top,
#color-burn-hack .geel-top {
    opacity: .3;
}
#color-burn-hack .grijs,
#color-burn-hack .rood,
#color-burn-hack .geel {
    mix-blend-mode: color-burn;
}
#color-burn .geel {
    mix-blend-mode: color-burn;
}
#multiply path {
    mix-blend-mode: multiply;
}
#overlay .st2 {
    mix-blend-mode: overlay;
}
path {
    /*   mix-blend-mode: normal; */
    /*   mix-blend-mode: multiply; */
    /*   mix-blend-mode: screen; */
    /*   mix-blend-mode: overlay; */
    /*   mix-blend-mode: darken; */
    /*   mix-blend-mode: lighten; */
    /*   mix-blend-mode: color-dodge; */
    /*   mix-blend-mode: color-burn; */
    /*   mix-blend-mode: hard-light; */
    /*   mix-blend-mode: soft-light; */
    /*   mix-blend-mode: difference; */
    /*   mix-blend-mode: exclusion; */
    /*   mix-blend-mode: hue; */
    /*   mix-blend-mode: saturation; */
    /*   mix-blend-mode: color; */
    /*   mix-blend-mode: luminosity; */
}

HTML

<h1>Multiply</h1>
<svg id="multiply" version="1.1" id="Laag_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2559.4 570" style="enable-background:new 0 0 2559.4 570;" xml:space="preserve">
    <style type="text/css">
        .st0 {
            fill: #F0EBEB;
        }
        .st1 {
            fill: #FF5D5D;
        }
        .st2 {
            fill: #FFC222;
        }
    </style>
    <g>
        <path class="st0" d="M0,428.6c85.1-30.4,422.5-59.6,765.4,21.7c366.2,86.9,540.9-21.2,670.4-32.3
		c262.6-22.4,523.2,109.3,783.6,70.3c120.1-18,231-71.3,339.6-124v-45.2c-24.9-3.1-49.1-6.9-72.2-11.1
		c-81-14.7-155.2-33.9-241.4-44.7c-141.8-17.8-299.9-10.8-446.8,1.4c-146.9,12.2-292.1,29.3-443.2,31.3
		c-216.4,2.9-425.6-25.5-641.3-31.9C475.3,257,237.4,276.8,0,292.4V428.6z" />
    </g>
    <g>
        <path class="st1" d="M542.7,294.4c462.3,17.3,881.5,68.9,1353.5,71.7c231.7,1.4,464.4-9.9,663.3-31.3V189.5
		c-89.2,78.3-223.1,123.4-356.2,119.9c-179.3-4.8-338.5-90.9-514.1-119.9c-96.4-15.9-197.4-14.2-292.9,5
		c-59.3,11.9-118.9,30.7-179.6,24.5c-73.7-7.5-132.6-49.9-189.8-87.5c-57.2-37.5-126-73.9-199.6-65.8
		c-127.5,14.1-193,151.5-321.5,157.5c-107.4,5-194.2-87.4-301.3-79.4c-42.7,3.2-80.6,22.2-116.5,40.8c-28.5,14.7-59.4,29.3-87.9,44
		V324C179.9,320.4,365.5,287.8,542.7,294.4z" />
    </g>
    <g>
        <path class="st2" d="M1203.6,383.1c216.4-2.9,425.6,25.5,641.3,31.9c238.9,7.2,476.8-12.6,714.2-28.2v-82.1
		c-12.2,9.6-30.6,2.1-43.3-7c-60-43-98.1-116.5-169.4-138.2c-52.6-16-110.1,1.4-158.7,26.5c-48.6,25.1-93.2,58-144.9,76.5
		c-85.1,30.4-180.1,18.4-268.3-2.4c-88.2-20.8-175.4-50.1-266.1-53.6c-129.9-4.9-255.6,43.5-385.1,54.6
		C860.6,283.5,600,151.8,339.6,190.8c-120.1,18-231,71.3-339.6,124V360C436.5,399.1,1052.4,385.1,1203.6,383.1z" />
    </g>
</svg>
<h1>Overlay</h1>
<svg id="overlay" version="1.1" id="Laag_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2559.4 570" style="enable-background:new 0 0 2559.4 570;" xml:space="preserve">
    <style type="text/css">
        .st0 {
            fill: #F0EBEB;
        }
        .st1 {
            fill: #FF5D5D;
        }
        .st2 {
            fill: #FFC222;
        }
    </style>
    <g>
        <path class="st0" d="M0,428.6c85.1-30.4,422.5-59.6,765.4,21.7c366.2,86.9,540.9-21.2,670.4-32.3
		c262.6-22.4,523.2,109.3,783.6,70.3c120.1-18,231-71.3,339.6-124v-45.2c-24.9-3.1-49.1-6.9-72.2-11.1
		c-81-14.7-155.2-33.9-241.4-44.7c-141.8-17.8-299.9-10.8-446.8,1.4c-146.9,12.2-292.1,29.3-443.2,31.3
		c-216.4,2.9-425.6-25.5-641.3-31.9C475.3,257,237.4,276.8,0,292.4V428.6z" />
    </g>
    <g>
        <path class="st1" d="M542.7,294.4c462.3,17.3,881.5,68.9,1353.5,71.7c231.7,1.4,464.4-9.9,663.3-31.3V189.5
		c-89.2,78.3-223.1,123.4-356.2,119.9c-179.3-4.8-338.5-90.9-514.1-119.9c-96.4-15.9-197.4-14.2-292.9,5
		c-59.3,11.9-118.9,30.7-179.6,24.5c-73.7-7.5-132.6-49.9-189.8-87.5c-57.2-37.5-126-73.9-199.6-65.8
		c-127.5,14.1-193,151.5-321.5,157.5c-107.4,5-194.2-87.4-301.3-79.4c-42.7,3.2-80.6,22.2-116.5,40.8c-28.5,14.7-59.4,29.3-87.9,44
		V324C179.9,320.4,365.5,287.8,542.7,294.4z" />
    </g>
    <g>
        <path class="st2" d="M1203.6,383.1c216.4-2.9,425.6,25.5,641.3,31.9c238.9,7.2,476.8-12.6,714.2-28.2v-82.1
		c-12.2,9.6-30.6,2.1-43.3-7c-60-43-98.1-116.5-169.4-138.2c-52.6-16-110.1,1.4-158.7,26.5c-48.6,25.1-93.2,58-144.9,76.5
		c-85.1,30.4-180.1,18.4-268.3-2.4c-88.2-20.8-175.4-50.1-266.1-53.6c-129.9-4.9-255.6,43.5-385.1,54.6
		C860.6,283.5,600,151.8,339.6,190.8c-120.1,18-231,71.3-339.6,124V360C436.5,399.1,1052.4,385.1,1203.6,383.1z" />
    </g>
</svg>

<h1>Not supported browsers <a href="https://caniuse.com/#feat=css-mixblendmode">See browser support</a></h1>
<svg version="1.1" id="Laag_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2559.4 570" style="enable-background:new 0 0 2559.4 570;" xml:space="preserve">
    <style type="text/css">
        .st0 {
            fill: #F0EBEB;
        }
        .st1 {
            fill: #FF5D5D;
        }
        .st2 {
            fill: #FFC222;
        }
    </style>
    <g>
        <path class="st0" d="M0,428.6c85.1-30.4,422.5-59.6,765.4,21.7c366.2,86.9,540.9-21.2,670.4-32.3
		c262.6-22.4,523.2,109.3,783.6,70.3c120.1-18,231-71.3,339.6-124v-45.2c-24.9-3.1-49.1-6.9-72.2-11.1
		c-81-14.7-155.2-33.9-241.4-44.7c-141.8-17.8-299.9-10.8-446.8,1.4c-146.9,12.2-292.1,29.3-443.2,31.3
		c-216.4,2.9-425.6-25.5-641.3-31.9C475.3,257,237.4,276.8,0,292.4V428.6z" />
    </g>
    <g>
        <path class="st1" d="M542.7,294.4c462.3,17.3,881.5,68.9,1353.5,71.7c231.7,1.4,464.4-9.9,663.3-31.3V189.5
		c-89.2,78.3-223.1,123.4-356.2,119.9c-179.3-4.8-338.5-90.9-514.1-119.9c-96.4-15.9-197.4-14.2-292.9,5
		c-59.3,11.9-118.9,30.7-179.6,24.5c-73.7-7.5-132.6-49.9-189.8-87.5c-57.2-37.5-126-73.9-199.6-65.8
		c-127.5,14.1-193,151.5-321.5,157.5c-107.4,5-194.2-87.4-301.3-79.4c-42.7,3.2-80.6,22.2-116.5,40.8c-28.5,14.7-59.4,29.3-87.9,44
		V324C179.9,320.4,365.5,287.8,542.7,294.4z" />
    </g>
    <g>
        <path class="st2" d="M1203.6,383.1c216.4-2.9,425.6,25.5,641.3,31.9c238.9,7.2,476.8-12.6,714.2-28.2v-82.1
		c-12.2,9.6-30.6,2.1-43.3-7c-60-43-98.1-116.5-169.4-138.2c-52.6-16-110.1,1.4-158.7,26.5c-48.6,25.1-93.2,58-144.9,76.5
		c-85.1,30.4-180.1,18.4-268.3-2.4c-88.2-20.8-175.4-50.1-266.1-53.6c-129.9-4.9-255.6,43.5-385.1,54.6
		C860.6,283.5,600,151.8,339.6,190.8c-120.1,18-231,71.3-339.6,124V360C436.5,399.1,1052.4,385.1,1203.6,383.1z" />
    </g>
</svg>

<h1>目标效果图片</h1>
<img src="/uploads/161101/wave-stripes.jpg" alt="" />

SVG blend modes

svg, 基础知识

编辑器支持Emmet

快捷键

SVG blend modes

svg, 基础知识

使用Anime.js和SVG实现的Mozilla混合图标变形动画

HTML5/SVG AB对比测试动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：