Svg Crayon

svg-crayon.png

turbulanceフィルターを使う方法

クレヨンっぽい線

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" version="1.1">
    <defs>
        <filter id="turbfilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
            <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
            <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="G" scale="30"/>
        </filter>
    </defs>
<line  x1="0" y1="35" x2="200" y2="35" stroke="#A1D3D8" filter="url(#turbfilter)" stroke-width="25.0"></line>
</svg>

クレヨンっぽい文字

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="50" version="1.1">
    <defs>
        <filter id="turbfilter2" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="200">
            <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
            <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="G" scale="9"/>
        </filter>
    </defs>
<text filter="url(#turbfilter2)" x="0" y="35" font-size='34.0' fill="#533E25" >Code Snippets</text>
</svg>


font-familyを変えてもっと手書きっぽく


白い文字 


crayon

サポートサイト Wikidot.com crayon