HOME  >   HTML5 CANVAS  >   CSS3 ANIMATION  >   SVG and JavaScript Implementation of the Devil Blink Animation
SVG and JavaScript Implementation of the Devil Blink Animation
BY Joseph7 Jan,2021
Tags:
SVG

Today I want to bring you a very realistic SVG animation effect, which simulates a pair of demon eyes and a non-stop blinking animation. First of all, the demon eyes are drawn by SVG, mostly using SVG elliptical paths. Then JavaScript is used to make the eyes blink, so let's see if the effect is very realistic and interesting.

Advertisement

SVG and JavaScript Implementation of the Devil Blink Animation
HTML Body Code
<svg viewBox="-2000 -1000 4000 2000">
  <style>
    svg { background: #000 }rect, [r], #m { fill: #fff }</style>
  <radialGradient id="r">
    <stop stop-color="#ff0" offset=".32"></stop>
    <stop stop-color="#fa0" offset=".83"></stop>
    <stop stop-color="#fa0" offset=".91"></stop>
    <stop stop-color="#000" offset=".95"></stop>
  </radialGradient>
  <filter id="f">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"></feGaussianBlur>
  </filter>
  <mask id="m">
    <path d="M500 170c200 340 820 340 780 -290c-200 0 -600 -60 -780 290" filter="url(#f)"></path>
  </mask>
  <g id="g" mask="url(#m)" filter="url(#f)">
    <rect width="2000" height="2000"></rect>
    <ellipse cx="930" cy="-70" rx="420" ry="500" fill="url(#r)"></ellipse>
    <ellipse cx="950" cy="-20" rx="200" ry="260" transform="rotate(-9 950 -20)"></ellipse>
    <circle cx="860" cy="-20" r="14"></circle>
  </g>
  <use xlink:href="#g" transform="scale(-1 1)"></use>
</svg>                        
Js Code
function getAbsData(el) {
	var d = el.getAttribute('d').split('M').slice(1)[0].split('c').map(function (c) {
		return c.split(' ').map(function (c) {
			return +c;
		});
	}).map(function (b) {
		return b.reduce(function (a, c, i) {
			return i % 2 ? a.concat([[b[i - 1], c]]) : a;
		}, []);
	});

	var _loop = function _loop(i) {
		var lastPrev = d[i - 1].slice(-1)[0];

		d[i] = d[i].map(function (c) {
			return c.map(function (k, j) {
				return lastPrev[j] + k;
			});
		});
	};

	for (var i = 1; i < d.length; i++) {
		_loop(i);
	}

	return d;
};                        

Advertisement