HOME  >   HTML5 CANVAS  >   SVG/HTML5 Animated Icons can be Used as Icons Menu Navigation
SVG/HTML5 Animated Icons can be Used as Icons Menu Navigation
BY George12 Jan,2021
Tags:

Today we want to share with you a simple and practical SVG animated icon application, which is increasingly used for web menu navigation because it is easy to use and supports most browsers. This SVG/HTML5 animated icon can produce a simple looping animation effect when the mouse slides over the icon.

Advertisement

SVG/HTML5 Animated Icons can be Used as Icons Menu Navigation
HTML Body Code
<li>
	        <div class="image">
				<div class="row">
					<svg version="1.1" id="web-skill" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="160px" height="108px" viewBox="0 0 160 108" enable-background="new 0 0 160 108" xml:space="preserve"><g id="mobile" style="transform: matrix(1, 0, 0, 1, 0, 0);"><path fill="#FFFFFF" d="M49.1,102.4c0,1.2-1,2.1-2.1,2.1H20.6c-1.2,0-2.1-1-2.1-2.1v-56c0-1.2,1-2.1,2.1-2.1h26.3
					        c1.2,0,2.1,1,2.1,2.1v56H49.1z"></path><path fill="#00D9B3" d="M46.9,106H20.6c-2,0-3.6-1.6-3.6-3.6v-56c0-2,1.6-3.6,3.6-3.6h26.3c2,0,3.6,1.6,3.6,3.6v56
					        C50.6,104.4,48.9,106,46.9,106z M20.6,45.7c-0.3,0-0.6,0.3-0.6,0.6v56c0,0.4,0.3,0.6,0.6,0.6h26.3c0.4,0,0.6-0.3,0.6-0.6v-56
					        c0-0.4-0.3-0.6-0.6-0.6H20.6z"></path><path fill="#00D9B3" d="M35.9,97.2c0,1.2-1,2.1-2.1,2.1c-1.2,0-2.1-1-2.1-2.1c0-1.2,1-2.1,2.1-2.1C35,95,35.9,96,35.9,97.2"></path><path fill="#00D9B3" d="M35.4,76.5c2.3-0.8,3.9-2.9,3.9-5.4c0-3.2-2.6-5.7-5.7-5.7c-3.2,0-5.7,2.6-5.7,5.7v10.1
					        c0,0.5,0.4,0.9,0.9,0.9h10.1c0.4,0,0.7-0.2,0.8-0.5c0.1-0.3,0.1-0.7-0.2-1L35.4,76.5z M33.6,67.1c2.2,0,4,1.8,4,4
					        c0,2.1-1.6,3.8-3.6,4l-4.3-4.3C29.8,68.7,31.5,67.1,33.6,67.1 M29.6,80.3v-7.1l7.1,7.1H29.6z"></path></g><g id="desktop" style="transform: matrix(1, 0, 0, 1, 0, 0);"><path fill="#FFFFFF" d="M128.6,77.6c0,1.7-1.3,3-3,3H46.5c-1.7,0-3-1.3-3-3V21.1c0-1.7,1.3-3,3-3h79.1c1.7,0,3,1.3,3,3V77.6z"></path><path fill="#00D9B3" d="M125.6,82.1H46.5c-2.5,0-4.5-2-4.5-4.5V21.1c0-2.5,2-4.5,4.5-4.5h79.1c2.5,0,4.5,2,4.5,4.5v56.5
					        C130.1,80.1,128.1,82.1,125.6,82.1z M46.5,19.6c-0.8,0-1.5,0.7-1.5,1.5v56.5c0,0.8,0.7,1.5,1.5,1.5h79.1c0.8,0,1.5-0.7,1.5-1.5
					        V21.1c0-0.8-0.7-1.5-1.5-1.5H46.5z"></path><path fill="#00D9B3" d="M101.8,106c-7.3,0-13.2-5.9-13.2-13.2V80.6c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5v12.2
					        c0,5.6,4.6,10.2,10.2,10.2c0.8,0,1.5,0.7,1.5,1.5S102.7,106,101.8,106z"></path><path fill="#00D9B3" d="M70.2,106c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5c5.6,0,10.2-4.6,10.2-10.2V80.6c0-0.8,0.7-1.5,1.5-1.5
					        c0.8,0,1.5,0.7,1.5,1.5v12.2C83.4,100.1,77.5,106,70.2,106z"></path><path fill="#00D9B3" d="M88.6,53.8c3.6-1.2,6.2-4.6,6.2-8.6c0-5-4.1-9-9-9c-4.9,0-9,4.1-9,9v15.9c0,0.8,0.6,1.4,1.4,1.4H94
					        c0.6,0,1.1-0.3,1.3-0.8s0.1-1.1-0.3-1.5L88.6,53.8z M85.7,38.9c3.5,0,6.3,2.8,6.3,6.3c0,3.3-2.5,6-5.7,6.3l-6.8-6.8
					        C79.8,41.5,82.5,38.9,85.7,38.9 M79.5,59.7V48.5l11.2,11.2H79.5z"></path></g><g id="mobile2" opacity="0" style="transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;"><path fill="#FFFFFF" d="M49.1,102.4c0,1.2-1,2.1-2.1,2.1H20.6c-1.2,0-2.1-1-2.1-2.1v-56c0-1.2,1-2.1,2.1-2.1h26.3
					        c1.2,0,2.1,1,2.1,2.1L49.1,102.4L49.1,102.4z"></path><path fill="#00D9B3" d="M46.9,106H20.6c-2,0-3.6-1.6-3.6-3.6v-56c0-2,1.6-3.6,3.6-3.6h26.3c2,0,3.6,1.6,3.6,3.6v56
					        C50.6,104.4,48.9,106,46.9,106z M20.6,45.7c-0.3,0-0.6,0.3-0.6,0.6v56c0,0.4,0.3,0.6,0.6,0.6h26.3c0.4,0,0.6-0.3,0.6-0.6v-56
					        c0-0.4-0.3-0.6-0.6-0.6H20.6z"></path><path fill="#00D9B3" d="M35.9,97.2c0,1.2-1,2.1-2.1,2.1c-1.2,0-2.1-1-2.1-2.1c0-1.2,1-2.1,2.1-2.1C35,95,35.9,96,35.9,97.2"></path><path fill="#00D9B3" d="M35.4,76.5c2.3-0.8,3.9-2.9,3.9-5.4c0-3.2-2.6-5.7-5.7-5.7c-3.2,0-5.7,2.6-5.7,5.7v10.1
					        c0,0.5,0.4,0.9,0.9,0.9h10.1c0.4,0,0.7-0.2,0.8-0.5c0.1-0.3,0.1-0.7-0.2-1L35.4,76.5z M33.6,67.1c2.2,0,4,1.8,4,4
					        c0,2.1-1.6,3.8-3.6,4l-4.3-4.3C29.8,68.7,31.5,67.1,33.6,67.1 M29.6,80.3v-7.1l7.1,7.1H29.6z"></path></g></svg>
				</div>
			</div>

			<p>Web, Mobile Web and Apps</p>
        </li>                        
Css Code
.intro-text {
  font-size: 28px;
  font-style: italic;
  line-height: 14px;
}

.intro-text span {
  font-size: 10px;
}

.wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

ul {
  width: 100%;
  list-style: none;
  padding: 0;
  text-align: justify;
}
ul::after {
   width: 100%;
  display: inline-block;
  content: ".";
  visibility: hidden;
}

li {
   text-align: left;
   width: 220px;
   display: inline-block;
   margin-right: 0;
   padding-bottom: 30px;
}

li .image {
  display: table;
  vertical-align: bottom;
  width: 100%;
  min-height: 108px;
  max-height: 108px;
  height: 108px;
  margin-bottom: 25px;
}                        
Js Code
var AnimateEvents = function($main) {
    this.svgContainer = $main.find("#event-skill");

    if (this.svgContainer.length === 0) {
        return;
    }
    this.flag = this.svgContainer.find('#flag');

    this.stick = this.svgContainer.find('#stick');
    this.stickPath = this.stick.find('path');

    this.flag.css({
        'transform-origin': '80px 0 0'
    });

    this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true
    })
        .set(this.flag, {
            rotationY: 90
        })
        .set(this.stick, {
            y: 35
        })
        .set(this.stickPath, {
            'fill-opacity': 0
        })
        .to(this.stick, 0.7, {
            y: 0
        })
        .to(this.stickPath, 0.7, {
            'fill-opacity': 1
        }, 0)
        .to(this.flag, 2.5, {
            rotationY: 360
        })
        .to(this.flag, 2.5, {
            rotationY: 0
        });

    this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.restart();
    }.bind(this));

};                        

Advertisement