Skip to content

Instantly share code, notes, and snippets.

@albertodelax

albertodelax/.DS_Store

Last active March 8, 2016 16:31
Show Gist options
  • Save albertodelax/e888a8c2ec4c289aeb23 to your computer and use it in GitHub Desktop.
Save albertodelax/e888a8c2ec4c289aeb23 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Blink
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Eye Blink</title>
<style type="text/css">
h1 {
cursor: pointer;
background-color: gray;
color: white;
text-align: center;
font-family: sans-serif;
width: 250px;
}
</style>
</head>
<body>
<h1 onclick="blink()">BLINK!</h1>
<svg height="500" width="500">
<defs>
<clipPath id="svgPath">
<!-- d="M toparc(xpos ypos q stroke-anchor stroke-height stroke-end-point) M bottomarc(xpos ypos q stroke-anchor stroke-height stroke-end-point)" -->
<path id="eye" d="M 10 200 q 150 -150 300 0 M 10 200 q 150 150 300 0"/>
</clipPath>
</defs>
<g transform="translate(50,50)">
<image
xlink:href="https://images.blogthings.com/thecolorfulpatterntest/pattern-4.png" id="eyeimage" clip-path="url(#svgPath)" height="500" width="500">
</image>
</g>
</svg>
<script type="text/javascript">
var eyeImg = document.getElementById('eyeimage');
var closeEye = document.getElementById('eye');
var i=150;
var stop = 0;
var picIndex=1;
var images=["https://images.blogthings.com/thecolorfulpatterntest/pattern-4.png","https://scontent-lga3-1.xx.fbcdn.net/hphotos-xpf1/t31.0-8/q82/s960x960/12764769_10153963411187065_3540614222982904009_o.jpg", "https://scontent-lga3-1.xx.fbcdn.net/hphotos-xtf1/v/t1.0-9/12799362_10207371449357888_4093510818224330607_n.jpg?oh=565a80b89a195be37a32a79b4773db82&oe=574D81A5"];
function blink(){
var close = setInterval(function(){
closeEye.setAttribute('d', 'M 10 200 q 150 -' + i + ' 300 0 M 10 200 q 150 ' + i + ' 300 0');
eyeImg.setAttribute('clip-path', 'url(#svgPath)');
i=i-2;
if(i<0) clearInterval(close);
}, 5);
setTimeout(function(){
eyeImg.setAttribute('xlink:href', images[picIndex]);
picIndex++;
if(picIndex>=images.length) picIndex=0;
var open = setInterval(function(){
closeEye.setAttribute('d', 'M 10 200 q 150 -' + i + ' 300 0 M 10 200 q 150 ' + i + ' 300 0');
eyeimage.setAttribute('clip-path', 'url(#svgPath)');
i=i+2;
if(i>150) clearInterval(open);
}, 5);
}, 1000);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment