SVG Chat Bubble Animation

Developer
Gil
Size
3,767 Kb
Views
24,288
  1. SVG Chat Bubble Animation Previews
  2. SVG Chat Bubble Animation HTML Codes
  3. SVG Chat Bubble Animation CSS Codes

How do I make an svg chat bubble animation?

What is a svg chat bubble animation? How do you make a svg chat bubble animation? This script and codes were developed by Gil on 12 December 2022, Monday.

SVG Chat Bubble Animation Previews
IQ Test

SVG Chat Bubble Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Chat Bubble Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <?xml version="1.0" encoding="utf-8"?>
<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 116.6 61.9" style="enable-background:new 0 0 116.6 61.9;" xml:space="preserve" class="icon--chatbubble">
<style type="text/css">	.st0{clip-path:url(#SVGID_2_);}	.st1{clip-path:url(#SVGID_2_);}	.st2{clip-path:url(#SVGID_2_);}	.st3{clip-path:url(#SVGID_2_);}
</style>
<g>	<defs>	<rect id="SVGID_1_" y="0" width="116.6" height="61.9"/>	</defs>	<clipPath id="SVGID_2_">	<use xlink:href="#SVGID_1_" style="overflow:visible;"/>	</clipPath>	<path class="st0" fill="none" stroke="#010101" stroke-width="0.818" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M100.4,1.9h-70c-7.9,0-14.3,6.4-14.3,14.3v27c0,0-4,7-15.3,12.3c0,5.8,12,4.4,12,4.4c2.1,0,8.6-1.2,9.4-3	c2.3,1.6,5.2,2.6,8.2,2.6h70c7.9,0,14.3-6.4,14.3-14.3v-29C114.7,8.4,108.3,1.9,100.4,1.9z"/>	<path class="st1" fill="#B2D2C2" d="M100.4,1.9h-70c-7.9,0-14.3,6.4-14.3,14.3v27c0,0-4,7-15.3,12.3c0,5.8,12,4.4,12,4.4c2.1,0,8.6-1.2,9.4-3	c2.3,1.6,5.2,2.6,8.2,2.6h70c7.9,0,14.3-6.4,14.3-14.3v-29C114.7,8.4,108.3,1.9,100.4,1.9"/>	<path class="st2" fill="#010101" d="M100.4,2.2l-7.5,0c-2.5,0-5,0.1-7.5,0.1c-2.5,0-5,0.2-7.5,0.2l-7.5,0.3L55.6,3.5c-2.5,0.1-5,0.1-7.5,0.2	c-2.5,0.1-5,0.1-7.5,0.1c-2.5,0-5,0-7.5,0l-1.9,0l-0.9,0c-0.3,0-0.7,0-0.9,0c-1,0.1-2.1,0.3-3.1,0.6c-2.1,0.6-3.9,1.9-5.4,3.5	c-1.5,1.6-2.6,3.6-3.1,5.8c-0.1,0.5-0.2,1.1-0.3,1.6c0,0.3,0,0.6-0.1,0.8l0,0.9l-0.1,3.7l-0.2,7.5c-0.1,2.5-0.2,5-0.2,7.5	c0,2.5-0.1,5-0.1,7.5v0c0,0.1,0,0.2-0.1,0.3c-0.2,0.4-0.5,0.7-0.7,1.1c-0.3,0.3-0.5,0.7-0.8,1c-0.5,0.7-1.1,1.3-1.7,1.9	c-0.6,0.6-1.2,1.2-1.8,1.7c-0.6,0.6-1.3,1.1-1.9,1.6c-0.7,0.5-1.3,1-2,1.5c-0.7,0.5-1.4,0.9-2.1,1.4c-0.7,0.5-1.5,0.8-2.2,1.3	c-0.7,0.4-1.5,0.8-2.2,1.2l0.4-0.7c0,0.2,0,0.5,0.1,0.7c0.1,0.2,0.1,0.4,0.3,0.6c0.1,0.2,0.3,0.4,0.4,0.5c0.2,0.2,0.4,0.3,0.6,0.4	c0.8,0.6,1.9,0.8,3,1c1.1,0.2,2.2,0.2,3.4,0.2c0.6,0,1.1,0,1.7-0.1c0.6,0,1.2-0.1,1.7-0.2l0,0l0.1,0c0.7,0,1.5-0.2,2.3-0.3	c0.8-0.2,1.6-0.3,2.4-0.6c0.8-0.2,1.5-0.5,2.2-0.8c0.3-0.2,0.7-0.3,0.9-0.5c0.3-0.2,0.4-0.4,0.4-0.3l2-0.5c1.2,0.8,2.5,1.4,3.9,1.7	c0.7,0.2,1.4,0.3,2.1,0.3c0.7,0.1,1.4,0,2.2,0l9.5-0.2l19.1-0.2l19.1-0.2l9.5,0c3.2,0,6.4,0,9.5,0c1.6,0,3.2,0.1,4.4-0.1	c1.3-0.2,2.6-0.7,3.8-1.3c2.4-1.3,4.4-3.3,5.5-5.8c0.6-1.2,0.9-2.6,1.1-3.9c0-0.4,0.1-0.7,0.1-1.1l0-1.2l0.1-2.4l0.4-9.5l0.4-9.5	l0.2-4.8c0.1-1.6,0.1-3.1-0.2-4.6c-0.6-3-2.3-5.8-4.7-7.8C106.6,3.3,103.5,2.2,100.4,2.2 M100.4,1.7c3.2,0,6.5,1.1,9,3.1	c2.6,1.9,4.5,4.8,5.4,8c0.5,1.6,0.6,3.3,0.6,4.9l0.2,4.8l0.4,9.5l0.4,9.5l0.1,2.4l0,1.2c0,0.4,0,0.9,0,1.3	c-0.1,1.8-0.5,3.6-1.2,5.3c-1.4,3.4-3.9,6.3-7.1,8.1c-1.6,0.9-3.4,1.5-5.2,1.8c-1.9,0.3-3.6,0.2-5.1,0.3c-3.2,0-6.4,0-9.5,0l-9.5,0	l-19.1-0.2l-19.1-0.2l-9.5-0.2c-0.8,0-1.7,0-2.6-0.2c-0.9-0.1-1.7-0.3-2.6-0.6c-1.7-0.5-3.3-1.3-4.6-2.4l2-0.5	c-0.2,0.4-0.5,0.7-0.7,0.9c-0.2,0.2-0.5,0.4-0.7,0.5c-0.5,0.3-0.9,0.5-1.3,0.6c-0.9,0.3-1.7,0.6-2.6,0.8c-0.9,0.2-1.7,0.4-2.6,0.5	c-0.9,0.1-1.7,0.2-2.7,0.2l0.1,0c-0.6,0.1-1.2,0.1-1.8,0.1c-0.6,0-1.2,0-1.8,0c-1.2-0.1-2.4-0.2-3.7-0.4C4.3,60.4,3.1,60,2,59.3	c-0.3-0.2-0.6-0.4-0.8-0.7c-0.2-0.3-0.5-0.6-0.6-0.9c-0.2-0.3-0.3-0.7-0.4-1C0,56.3,0,56,0,55.6c0-0.3,0.2-0.5,0.4-0.7l0,0	c1.5-0.7,2.9-1.4,4.3-2.3c0.7-0.4,1.4-0.8,2.1-1.3c0.7-0.4,1.3-0.9,2-1.4c1.3-1,2.5-2.1,3.6-3.2c0.6-0.6,1.1-1.2,1.6-1.8	c0.3-0.3,0.5-0.6,0.7-1c0.2-0.3,0.5-0.7,0.6-1l-0.1,0.3c0-2.5-0.1-5-0.1-7.5c0-2.5-0.1-5-0.2-7.5l-0.2-7.5l-0.1-3.7l0-0.9	c0-0.3,0-0.7,0-1c0-0.7,0.1-1.4,0.2-2c0.5-2.7,1.7-5.3,3.5-7.5c1.8-2.2,4.2-3.8,6.8-4.7c1.3-0.5,2.7-0.8,4.2-0.9c0.4,0,0.6,0,1,0	l1,0l1.9,0c2.5,0,5,0,7.5,0c2.5,0,5,0,7.5,0.1c2.5,0.1,5,0.1,7.5,0.2L70.5,1L78,1.3c2.5,0.1,5,0.2,7.5,0.2c2.5,0,5,0.1,7.5,0.1	L100.4,1.7z"/>	<path class="st2" fill="#010101" d="M80.8,54.2c0,0,0.7-0.1,2-0.1c1.3-0.1,3.1-0.2,5.3-0.3c1.1,0,2.3-0.1,3.5-0.1c1.2,0,2.6-0.1,3.9-0.1	c0.3,0,0.7,0,1-0.1c0.3,0,0.6-0.1,1-0.2c0.3,0,0.6-0.1,1-0.2c0.3-0.1,0.7-0.2,1-0.3c1.3-0.4,2.5-1.1,3.6-1.9c1.1-0.8,2.1-1.8,3-2.9	c0.4-0.5,0.8-1.1,1.1-1.7c0.3-0.6,0.6-1.2,0.8-1.8c0.5-1.2,0.8-2.5,0.9-3.6c0.1-1.2,0.1-2.4,0.2-3.5c0.1-2.2,0.2-4,0.3-5.3	c0.1-1.3,0.1-2,0.1-2s0.1,0.7,0.1,2c0.1,1.3,0.2,3.1,0.3,5.3c0,1.1,0.1,2.2,0.1,3.6c0,0.7-0.1,1.3-0.2,2c-0.2,0.7-0.3,1.4-0.6,2	c-0.5,1.4-1.1,2.7-2,3.9c-0.9,1.2-2,2.3-3.2,3.2c-1.3,0.9-2.6,1.6-4.1,2.1c-0.7,0.2-1.4,0.4-2.2,0.5c-0.4,0-0.8,0.1-1.1,0.1	c-0.3,0-0.7,0-1,0c-1.4,0-2.7-0.1-4-0.1c-1.3,0-2.4-0.1-3.5-0.1c-2.2-0.1-4-0.2-5.3-0.3C81.6,54.3,80.8,54.2,80.8,54.2"/>	<path class="bubble1 st3" d="M51.7,30.6c0,2.6-2,4.7-4.5,4.7c-2.5,0-4.5-2.1-4.5-4.7c0-2.6,2-5.1,4.5-5.1C49.6,25.5,51.7,28,51.7,30.6"/>	<path class="bubble2 st3" d="M70.9,30.2c0,2.6-1.9,5-4.6,5c-2.7,0-5.2-2.4-5.2-5s2.2-4.7,4.9-4.7C68.7,25.6,70.9,27.7,70.9,30.2"/>	<path class="bubble3 st3" d="M89.8,30.3c0,2.7-2.6,5-5.2,5c-2.6,0-4.7-2.2-4.7-4.9c0-2.7,2.1-4.9,4.7-4.9C87.2,25.5,89.8,27.6,89.8,30.3"/>
</g>
</svg>
</body>
</html>

SVG Chat Bubble Animation - Script Codes CSS Codes

svg { height: 25px; width: 50px;
}
.icon--chatbubble .bubble1 { -webkit-animation: chatBubbles 1s ease-in-out infinite; animation: chatBubbles 1s ease-in-out infinite;
}
.icon--chatbubble .bubble2 { -webkit-animation: chatBubbles 1s ease-in-out infinite; animation: chatBubbles 1s ease-in-out infinite; -webkit-animation-delay: .3s; animation-delay: .3s;
}
.icon--chatbubble .bubble3 { -webkit-animation: chatBubbles 1s ease-in-out infinite; animation: chatBubbles 1s ease-in-out infinite; -webkit-animation-delay: .5s; animation-delay: .5s;
}
@-webkit-keyframes chatBubbles { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes chatBubbles { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
SVG Chat Bubble Animation - Script Codes
SVG Chat Bubble Animation - Script Codes
Home Page Home
Developer Gil
Username gil--
Uploaded December 12, 2022
Rating 3
Size 3,767 Kb
Views 24,288
Do you need developer help for SVG Chat Bubble Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gil (gil--) Script Codes
Name
Cross Hands Animated Emoji
A Pen by Gil
CSS Snackables - Week 2
Bloomberg Style Link Hover
SVG CSS Circular Spinner Animation
Dynamic Link Hover Fill Effect
Parallax Background
HTML5 Video Play on Hover
Animated Like Emoji
Hover circle grow
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!