We Keep Coding

Javascript - Motion Blur Image/Canvas

is there a way to do image processing with javascript on an image or a canvas?
I need to apply a motion blur with length/strength and an angle.
I also need to export the image then. Should also work on mobile devices.
Can I do that in real-time with javascript?

You could use an SVG filter. Within an <svg> it looks like this:
svg{
overflow: visible;
}
<svg>
<filter id="verticalMotionBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" filter="url(#verticalMotionBlur)" />
</svg>
but you can also apply it to any other DOM element on your page, including an image:
img {
filter: url(#verticalMotionBlur)
}
<svg>
<filter id="verticalMotionBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 5" />
</filter>
</svg>
<img src="https://picsum.photos/200"/>

How to animate an referential SVG background

Does exists some way to animate referential background svg with vivus.js? I'm trying to use it. I found this code in the oficial documentation but I don't know if this is possible. Look at the code below:
HTML
<section id="svg-bg" class="materiais-topo">
<!-- some elements here -->
</section>
CSS (SASS)
.materiais-topo {
background-color: $green-fluo;
background-image: url('../images/line-fluo.svg');
background-position: center center;
background-repeat: no-repeat;
}
JS
new Vivus-bg('svg-bg', {
file: MAIN_URL+'dist/images/line-fluo.svg'
});
Someone has any solution? If you know to animate referential background svg without vivus.js let me know.
EDIT: This method only inject SVG file in my div element.

So, as far as I know, it's impossible to manipulate a Background SVG with Javascript.
But, you can:
Use SMIL animations in your SVG (It’s will not work with MSIE/Edge), example here.
Generate a data:uri for every frame with Javascript, and use them as a background-image.
Here an example of SVG SMIL animation:
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>

Multiple javascript animation of masks of a svg

I am trying to animate the radius of the circle #mask-hole-2 with javascript. So that it animates the radius from 0 to 175px. But i dont know how to do this in a common way. I cant use css cause there seems to be another specification used on firefox for animating masks with css.
<svg width="400" height="300">
<defs>
<mask id="hole">
<circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" />
<rect id="mask-hole-3" width="100%" height="100%" fill="white"/>
<circle id="mask-hole-2" cx="165" cy="156.5" r="145" />
</mask>
</defs>
<image width="400" height="300"
xlink:href="http://lorempixel.com/400/300/sports/"
mask="url(#hole)"/>
</svg>
I want #mask-hole-1 to change its radius within 2 seconds from 0 to 175. After 2s #mask-hole-2 should change its radius from 0 to 175 also.
Would be nice if the animation works smooth. Any help is appreciated.

SVG: Issue with multiple masks in different svg

I came across a strange problem using svg filter and masks.
Let's say I have an svg file containg these filters and masks:
<filter id="om-outline">
<feMorphology result="offset" in="SourceGraphic" operator="dilate" radius="3"/>
<feComposite in="offset" in2="SourceGraphic" operator="out" result="stroke" />
<feFlood flood-color="#79868d" result="COLOR-red-2" />
<feComposite in="COLOR-red-2" in2="stroke" operator="in" result="BEVEL_41" />
</filter>
<mask id="outline-mask">
<rect cx="0" cy="0" width="341" height="375" fill="black"/>
<!-- some more elements here that create the silhouette of my actual svg graphic -->
</mask>
using this filter and mask, creates a nice outline arround my animating svg graphic
everything is working as expected so far now, but when I add another graphic, using the same technic to create an outline, this happens:
somehow the second graphic uses the mask and outline of the first graphic, even though I used different ids for the reference.
This only happens in Firefox and Internet Explorer, Safari and Chrome seem to work as expected.

jVectorMap styling change fill type

How would I style the "world_mill_en" map like this?
I know how to do the markers, just have to specify the longitude and latitude. How would I get rid of all the dividing lines between the continents, and change the fill such that it's just a bunch of grey dots? As far as I know, the api only lets you change it to a solid fill.
Also, how do I disable region hovering?

Use a pattern fill (with the image you want) for the region (doesn't require masking)
or
Use a pattern fill on a rectangle that uses a mask with the region in it
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1000 360">
<defs>
<pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10"
width="425" height="319">
<image width="425" height="319"
xlink:href="http://designm.ag/images/0709/wood/71.jpg" />
</pattern>
<text id="txt1" y="100" font-weight="bold" font-family="Verdana"
font-size="100">Some Text</text>
</defs>
<use width="1000" height="400" xlink:href="#txt1" fill="url(#pat1)"/>
</svg>
Here's a fiddle showing how to do a simple pattern.