Geek Answers Handbook

SVG melody line malfunctions

for the project, I would like to draw a fine-like border around the SVG rectangle object. I managed to add a template to the line with a width of 4 pixels, and it looks a bit like chalk, but I'm really looking for work on implementing the line.

What I have tried so far is to create a fine texture in Illustrator and export it to SVG, but how can I import this SVG file as a template in an existing SVG without having to manually copy all the path information? And how can I make this texture as effective as possible so that the viewer does not have to download 23 MB of path information?

Hope you guys can help me.

Greetings

Hide

PS This is what I came up with so far:

SVG Chalk as a line as far as I got

+5
source share
1 answer

I would suggest using svg filters , if you just want to quickly experiment, open the Inkscape file , select one of your rectangles, then add the Chalk and Sponge filter and play with the parameters until you get what you like.

This is just the beginning, but you can get some pretty good results from here, here is an example:

    <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3">
        <feTurbulence baseFrequency="0.32065" seed="115" result="result1" numOctaves="1" type="turbulence"/>
        <feOffset result="result2" dx="-5" dy="-5"/>
        <feDisplacementMap scale="10" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
        <feGaussianBlur stdDeviation="1.1169"/>
    </filter>

Then you use it in forms and text if necessary, for example:

    <text filter="url(#chalk)" font-size="26px" fill="white">f(x) = 4x + 7</text>
    <rect filter="url(#chalk)" width="150" stroke="#FFF" stroke-dasharray="16,4" stroke-width="4" fill="none"/>
+7
source

More articles:


All Articles