Menu
I'm trying to have the outline-fill trace the gray outline on hover, and the reverse to happen when the mouse moves away. For whatever reason the method I'm using now isn't working on any browser. Anyone have any ideas?
HTML with the inline SVG file
CSS separate file with the classes I'm animating called out
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
.SVG-container {
position: relative;
width: 100%;
max-width: 400px;
margin-right: auto;
margin-left: auto;
}
.left {
display: inline;
fill: #0074BC;
}
.right {
display: inline;
fill: #00C2F3;
}
.outline-fill {
fill: none;
stroke:#25346A;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: dash 2s linear forwards;
stroke-width:1.5;
stroke-linecap: round;
stroke-miterlimit: 0;
animation-play-state: paused;
}
.outline-fill:hover {
animation-play-state: running;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.stroke {
display: inline;
fill: none;
stroke: #9b9a9a;
stroke-width: 1.0;
stroke-linecap:round;
stroke-miterlimit:10;
}
#fill {
z-index: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<title>Animated SVG Icon</title>
</head>
<body>
<header>
<h1>Animated SVG "Contact Us" icon on hover:</h1>
</header>
<div class="SVG-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
<g id="fill" class="fill-group">
<path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1
c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4z M37.8,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
C42.8,39.2,40.6,41.5,37.8,41.5z M52,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
C57.1,39.2,54.9,41.5,52,41.5z M66.4,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
C71.5,39.2,69.2,41.5,66.4,41.5z"/>
<path id="right-bubble" class="right" d="M95.2,63.3c7.3-3,12.2-8.3,12.2-14.5c0-5.4-3.8-10.1-9.6-13.2C97,35.2,96,35.8,96,36.7
c0,0.1,0,0.1,0,0.2c0,12-10.7,22.4-26,26.8c3.6,1.3,7.7,2.1,12.1,2.1c2.4,0,4.7-0.2,7-0.6c0.3-0.1,0.5,0.1,0.7,0.3
c1.2,1.7,3.4,4.2,6.4,5.1c0.5,0.2,0.9-0.5,0.6-0.9c-1-1.3-2.3-3.4-2-5.7C94.7,63.6,94.9,63.4,95.2,63.3z"/>
</g>
<g id="outline-group">
<path id="outline" class="stroke" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
c-2.4-0.3-4.2-0.8-6.3-1.6"/>
<!-- This is the part I'm trying to animate on hover -->
<path class="outline-fill" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
c-2.4-0.3-4.2-0.8-6.3-1.6"/>
</g>
</svg>
</div>
</body>
</html>
847
asked Mar 01 '26 10:03
Hover won't always work on an svg path. A better method might be to add your hover to the svg itself.
svg:hover .outline-fill {
animation-play-state: running;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
