Can you dynamically animate a SVG? - javascript

I am working on coding my site and I had this great idea to animate my navigation bar which is held in a SVG container. Due to the naturally wavy design, I was going for something similar to the Discord intro, where the waves sweep across the screen while waving. So I was wondering if there was a way I can do that, open to any ideas. JQuery, Java, CSS, anything to help.
I have worked slightly with CSS, but had no clue were to start with Java or JQuery. I am looking for a way to get this working onClick with a Hamburger Menu.
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 2;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<!--Fonts from Google Fonts API Directory, all rights reserved to original typographers and the Google Corperation -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--Styling for Font Awesome Icon library, for high quality icons visit Font Awesome online -->
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<!--Script link for JQuery Libraries and Scroll Magic API(s) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<!-- paste locally stored JavaScript file link here -->
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Company Name</h1>
</header>
</section>
<!--SVG Graphic as Navigation holder w/ Hamburger Menu Activation -->
<section class="navigation_svg">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 575" style="enable-background:new 0 0 1920 575;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="287.2289" x2="1920" y2="287.2289">
<stop offset="0" style="stop-color:#8C572B"/>
<stop offset="0.9974" style="stop-color:#593118"/>
</linearGradient>
<path class="st0" d="M57.5,139c52.6,0,272.7-21,509.6,0s515.9,0,556.8,0c19.4,0,37.8,8.3,50.7,22.7 c35.5,39.7,120.6,119.2,245.4,136.3c96.7,13.2,176.4,61.6,226.8,100.2c28.6,22,53.6,48.3,74.5,77.7c28.7,40.3,94.9,112.1,194.9,97.7 c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"/>
</svg>
</section>
</section>
</body>
</html>
The only thing I've gotten it to do is fade, but hat was a mere test of the #keyframes ability to animate SVGs.

You can transition the path's d property with css like this:
path {
transition: d 1s;
d: path('M547 93.0001C496 38.0001 457 29 372 15C276.086 -0.79759 -57 -52 9.99988 240C33.2036 341.127 87.9999 397 157 366C226 335 285 227 325 341C365 455 407 425 598 412C789 399 841 322 839 233C837 144 688 162 642 169C596 176 598 148 547 93.0001Z');
}
path:hover {
d: path('M547 92C471.994 92 482.5 -39.5 372 14C284.509 56.3601 -57 -53 9.99984 239C33.2035 340.127 82.5699 351.503 157 365C253.5 382.5 248.741 246.296 325 340C401.5 434 445.063 526.153 598 411C768 283 874.5 310 839 232C802.123 150.975 671.067 131.667 642 168C616 200.5 613 92 547 92Z');
}
<svg viewBox="0 0 900 500">
<path d=""/>
</svg>
Using keyframes
path {
animation: 10s infinite alternate wave ease-in-out;
}
#keyframes wave {
from {
d: path("M2,5 S2,-2 4,5 S7,8 8,4")
}
to {
d: path("M2,5 S2,14 4,5 S7,8 8,4")
}
}
body {display: flex;}
svg {width: 100%;}
path {fill: none;stroke: #000;}
<svg viewBox="0 0 10 10">
<path d="M2,5 S2,-2 4,5 S7,8 8,4" />
</svg>

Related

How do I pause a css animation on a svg with the click of a button?

I was following this tutorial: https://www.youtube.com/watch?v=y0Ic8QcvyK8 and i decided i wanted to pause the animation with the click of a button. I have tried and tried and tried. Searched through w3schools, searched here, searched wherever google sent me too... maybe im just dumb and cant figure it out alone ....
This is the html im using
<!DOCTYPE html>
<html lang="en" onscroll="scroller()">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript" src="myscripts.js"> </script>
<script type="text/javascript" src="svg.js"> </script>
</head>
<body>
<button id="b1" class="b3" onclick="change()"></button>
<div class="wrapper">
<svg id="tudo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1350 620" style="enable-background:new 0 0 1350 620;" xml:space="preserve">
<style type="text/css">
</style>
<g>
<rect x="14.41" y="12.48" class="st0" width="1414.59" height="596.52"/>
<path id="p1" class="st1" d="M22.61,207.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C67,253.3,38.43,237.19,22.61,207.89z"/>
<path class="st1" d="M220.08,12.48h82.91c45.7,0,83.06,35.89,83.06,79.83c0,43.8-37.35,79.54-83.06,79.54h-35.45v76.76h-47.46
V12.48z M338.58,91.87c0-17.87-15.97-32.37-35.6-32.37h-35.45v65.33l35.45,0.15C322.61,125.13,338.58,110.18,338.58,91.87z"/>
<path class="st1" d="M402.45,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C457.67,253.15,402.45,198.08,402.45,130.84z M600.06,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C566.36,205.11,600.06,171.56,600.06,130.55z"/>
<path class="st1" d="M816.56,59.5h-58.01v189.11h-47.61V59.5h-58.15V12.48h163.77V59.5z"/>
<path class="st1" d="M920.86,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C976.08,253.15,920.86,198.08,920.86,130.84z M1118.46,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C1084.77,205.11,1118.46,171.56,1118.46,130.55z"/>
<path class="st1" d="M1244.73,59.21v47.61h81.45v47.31h-81.45v94.78h-47.46V11.89h142.38v47.31H1244.73z"/>
<path class="st1" d="M197.81,536.98c0,34.86-25.05,71.63-73.68,71.63H34.92V372.48h64.45c41.89,0,68.55,30.76,68.55,62.55
c0,25.05-16.55,40.58-22.27,40.58C168.37,475.6,197.81,499.04,197.81,536.98z M82.23,418.62v46.14h19.19
c11.28,0,22.27-9.67,22.27-23.44c0-13.33-10.4-22.71-21.39-22.71H82.23z M151.52,533.61c0-13.62-9.38-27.25-31.93-27.25H82.23
v55.96h37.5C135.11,562.32,151.52,551.78,151.52,533.61z"/>
<path class="st1" d="M347.22,608.61l-75.15-111.62v111.62h-47.46l-0.15-236.13h77.05c44.09,0,80.27,33.98,80.27,76.46
c0,30.32-18.31,56.84-43.65,65.77l67.09,93.9H347.22z M271.93,478.83l30.47,0.15c16.11,0.15,30.47-12.89,30.47-29.74
s-14.5-29.74-30.47-29.74h-30.47V478.83z"/>
<path class="st1" d="M571.2,575.65h-94.48l-15.09,32.96h-51.27l112.79-241.99h1.46l112.94,241.99h-51.42L571.2,575.65z
M552.74,535.22l-28.71-63.13l-28.86,63.13H552.74z"/>
<path class="st1" d="M850.98,371.89v241.11h-2.2L708.6,476.63v132.28h-47.46V368.08h2.34l139.89,136.08V371.89H850.98z"/>
<path class="st1" d="M1083.6,490.84c0,73.24-46.58,117.77-122.9,117.77H892V372.63l68.7-0.15
C1037.02,372.33,1083.6,417.16,1083.6,490.84z M1035.7,490.69c0-44.24-28.42-71.19-75.15-71.19h-21.24v141.8h21.68
C1007.43,561.3,1035.7,534.64,1035.7,490.69z"/>
<path class="st1" d="M1102.06,567.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C1146.44,613.3,1117.88,597.19,1102.06,567.89z"/>
</g>
</svg>
</div>
</body>
</html>
MY CSS
margin: 0 ;
padding: 0;
width: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
text-align: center ;
height: 100vh;
display: table ;
background-color: black;
}
.wrapper {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
}
.st0{
fill:none;
}
.st1{
fill:none;
stroke:;
stroke-width:3;
stroke-miterlimit:10;
}
path {
stroke: white ;
fill: #fff;
stroke-dasharray: 300;
opacity: 10;
animation: animate 3s cubic-bezier(0,0.23,1,.1) infinite;
}
#keyframes animate {
0% {
opacity: 0;
fill: none;
stroke-dashoffset: 300;
}
30% {
opacity: 10;
fill: none ;
stroke-dashoffset: 300;
}
90% {
opacity: 50;
/*fill: rgba(255,255,255,1);*/
}
100% {
opacity: 10;
/*fill: rgba(255,255,255,1);*/
}
}
and my JS
function change(){
var button = document.getElementById('b1'),
estado = document.getElementsByClassName("st1");
button.onclick = function() {
estado.style.animationPlayState = "paused";
}
}
Much appreciated !
There are a few things that you got wrong with your JS.
By binding the change() function on the button in your HTML, you're executing it every time the user clicks it, but the function itself binds a click event to your button. Since you're already binding the event in the JS (which is the best practice, by the way), you need to remove the change() function from your HTML and just call it directly, so the click event will be bound only once.
getElementsByClassName, as the plural in the name suggests, doesn't return a single element but rather a collection of elements, which means that you have to loop through the collection to access the style attribute of each element.

SVG won't fit browser window, white bar at bottom of window

I am trying to have an SVG fit the browser window in an electron window. I have set the width and height of the window to 600 and 840, respectively.
Right now, unless I double click the grey bar at the top of the window to full-size it, there is a white bar that exists at the bottom of the screen. The peculiar part about this problem is that the white bar kind of skips when it appears, as I decrease the dimensions of the window.
I've set the aspect ratio and initial browser size with electron, evidenced by the relevant part of my main.js code.
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 600,
height: 840
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
mainWindow.setAspectRatio(1.37)
On the HTML Side, I just have a div, and an SMG.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="X/Electron/smoothiebro1/scripts.js" type="text/JavaScript" /></script>
</head>
<body>
<div id="container" class="svg-container">
<img src="X/Electron/smoothiebro1/img/Rectangle 2.svg" id="blenderOutline">
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
Here is the CSS for my container DIV:
html, body { margin:0; padding:0; overflow:hidden; height: 100%;}
svg { position:fixed; top:0; bottom:0; left:0; right:0; border: none; padding: 0; display: block;margin: 0 auto;max-height: 100%; max-width: 100%;}
div{
border: none;
padding: 0px;
margin: 0px;
}
And lastly, here is my "Rectangle" SVG code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560.362 769.971" preserveAspectRatio="xMidYMid meet" >
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #777;
stroke-linejoin: round;
stroke-width: 10px;
}
.cls-2 {
stroke: none;
}
.cls-3 {
fill: none;
}
</style>
</defs>
<g id="Rectangle_2" data-name="Rectangle 2" class="cls-1" transform="translate(10 10)">
<rect class="cls-2" width="540.362" height="749.971" rx="18"/>
<rect class="cls-3" x="-5" y="-5" width="550.362" height="759.971" rx="23"/>
</g>
</svg>
Got it to work! Perhaps somebody can explain why, but when I made the aspect ratio the reciprocal of 1.37, then it worked.
I got that number from dividing the viewbox height and width by each other.

Transparent gradient mask using svg

I need some help about svg's. There is a "background image". Another "image" is laid over it. The "image" has to have a hole cut out of it so that the background image is shining through. I achieved this by using svg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
</style>
</head>
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
</defs>
<path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z "
fill="url(#wood)" fill-rule="evenodd"/>
</svg>
</body>
I could not use mask filters of css cause of browser compatibility. I dont want to use a svg/js framework.
So far so good. Now i want to go a step further.
I want this hole to have a transparent gradient. So that the inner rects borders are not that hard as in current version. I dont know how to do it.
Furthermore i want to animate this hole to get bigger over time. I would do it by using js. Is there another way? Maybe by changing the whole structure of html?
Any help is appreciated.
Firstly, there should be no issue with masks applied to SVG elements. There are some browser compatibility related to SVG masks being applied to HTML elements, but not when they are applied to SVG elements.
In fact a mask is the obvious solution to your issue. To get the soft edges to the hole, we'll apply a blur filter to a rectangle, then use that as a mask to create the hole.
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
<
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/>
</mask>
<filter id="hole-blur">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
<path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/>
</svg>
</body>

Generate Large Upward Pointing Triangle From Existing Code Using SVG

I am using the following code from Tympanus to generate a big downward pointing triangle. What I am trying to do is use the same technique to generate a big upward pointing triangle, basic the inverse. Does any one know how to tweak this code to accomplish that?
Your help is greatly appreciated.
Best Regards...
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>
You can easily do that understanding the line commands in an SVG path.
What we have here:
<path d="M0 0 L50 100 L100 0 Z"></path>
Says:
Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.
So, to invert the triangle, you just need:
<path d="M0 100 L50 0 L100 100 Z"></path>
Which basicaly says:
Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.
Check the demo:
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
You could just draw it upside down using a transform.
translate moves it down (as it's now going to be drawn from the bottom to the top rather than top to bottom.
scale inverts it in the y direction
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>

Unblur part of an image where the mouse hovers over

I've been trying to have an image which appears blurred but when the mouse hovers over, it clears that tiny bit where the cursor points. Much alike the www.canva.com website.
Here is my code so far, it's not working 100%. I'm using HTML, CSS and Javascript. Unfortunately, I'm completely new to javascript!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QuoteWall</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/javascript" href="javascript.js">
</head>
<body>
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="image.png" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="image.png" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.pic {
text-align: center;
position: relative;
height: 250px;
}
.blur {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
Javascript:
$('.pic').mousemove(function (event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
var mask = $('#mask1 circle')[0];
mask.setAttribute("cy", (upY - 5) + 'px');
mask.setAttribute("cx", upX + 'px');
});
Any help would be appreciated.
Thanks,
Joe
This is an experimental solution. You dynamically inject a new circle element in your svg mask each mouseover then you hide each circle with a delay.
var svgNS = "http://www.w3.org/2000/svg";
$('.pic').mousemove(function (event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
var mask = $('#mask1')[0];
var circle = document.createElementNS(svgNS,"circle");
circle.setAttribute("cx", upX);
circle.setAttribute("cy", upY);
circle.setAttribute("r", "30");
circle.setAttribute("fill", "white");
circle.setAttribute("filter", "url(#filter2)");
mask.appendChild(circle);
setTimeout(function(){
circle.style.opacity = '0';
setTimeout(function(){
mask.removeChild(circle);
}, 300);
}, 300);
});
.pic {
text-align: center;
position: relative;
height: 250px;
}
.blur {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
circle {
opacity: 1;
-webkit-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
Your HTML should be like this with jQuery before the script I gave you. You have to respect the hierarchy of your scripts.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QuoteWall</title>
<link rel="stylesheet" type="text/css" href="style.css"> //The css I gave you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> //jQuery here
<script type="text/javascript" src="javascript.js"></script> //The script I gave you
</head>
<body>
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
</body>
</html>
I would recommend that you give id to the div where image is being rendered, So considering id of your image div is divImage like :
HTML:
<div id="divImage">
//Your Image inside this div
</div>
So in your JS you can write :
$("#divImage").hover(function(){
//Your Complete on hover function here.
})
I guess this should work.
I would use this How to blur some portion of Image.
have some blur mask (fully filled with blur)
Handle OnMouseMove event
Just clear the blur in mask area around actual mouse position during mouse movement.
On some periodic event like OnTimer
blur out the mask so any cleared space is diminishing with time. Then apply masked blur (from linked Q/A) on your image and paint it into your viewing area.

Categories