SVG Heart Animation

Developer
Andreas Neeven
Size
2,753 Kb
Views
24,288
  1. SVG Heart Animation Previews
  2. SVG Heart Animation HTML Codes
  3. SVG Heart Animation CSS Codes
  4. SVG Heart Animation JS Codes

How do I make an svg heart animation?

Just playing around with loops and Snap.svg. What is a svg heart animation? How do you make a svg heart animation? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

SVG Heart Animation Previews
IQ Test

SVG Heart Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Heart 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> <div class="wrapper">	<div class="I">I</div>
<svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect id="pxl-1" x="25" y="20" width="10" height="10"/>
<rect id="pxl-2" x="35" y="20" width="10" height="10"/>
<rect id="pxl-3" x="55" y="20" width="10" height="10"/>
<rect id="pxl-4" x="65" y="20" width="10" height="10"/>
<rect id="pxl-5" x="15" y="30" width="10" height="10"/>
<rect id="pxl-6" x="25" y="30" width="10" height="10"/>
<rect id="pxl-7" x="35" y="30" width="10" height="10"/>
<rect id="pxl-8" x="45" y="30" width="10" height="10"/>
<rect id="pxl-9" x="55" y="30" width="10" height="10"/>
<rect id="pxl-10" x="65" y="30" width="10" height="10"/>
<rect id="pxl-11" x="75" y="30" width="10" height="10"/>
<rect id="pxl-12" x="15" y="40" width="10" height="10"/>
<rect id="pxl-13" x="25" y="40" width="10" height="10"/>
<rect id="pxl-14" x="35" y="40" width="10" height="10"/>
<rect id="pxl-15" x="45" y="40" width="10" height="10"/>
<rect id="pxl-16" x="55" y="40" width="10" height="10"/>
<rect id="pxl-17" x="65" y="40" width="10" height="10"/>
<rect id="pxl-18" x="75" y="40" width="10" height="10"/>
<rect id="pxl-19" x="25" y="50" width="10" height="10"/>
<rect id="pxl-20" x="35" y="50" width="10" height="10"/>
<rect id="pxl-21" x="45" y="50" width="10" height="10"/>
<rect id="pxl-22" x="55" y="50" width="10" height="10"/>
<rect id="pxl-23" x="65" y="50" width="10" height="10"/>
<rect id="pxl-24" x="35" y="60" width="10" height="10"/>
<rect id="pxl-25" x="45" y="60" width="10" height="10"/>
<rect id="pxl-26" x="55" y="60" width="10" height="10"/>
<rect id="pxl-27" x="45" y="70" width="10" height="10"/>
</svg>	<div class="CodePen">CODEPEN</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Heart Animation - Script Codes CSS Codes

body { position: absolute; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #333;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.wrapper .I,
.wrapper .CodePen { font-size: 70px; color: black;
}
#heart { -webkit-transform: scale(1.5); transform: scale(1.5); margin: 0 25px 0 25px;
}

SVG Heart Animation - Script Codes JS Codes

var snap = Snap.select('#heart');
var pxls = $('#heart rect').length;
for( var i = 1; i <= pxls; i++ ) {	/* Random Colors */	snap.select('#pxl-' + i).attr({fill: '#000000'}).animate({fill: (function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') + s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)}, 500*i, mina.easeinout);	/* Red */
/*	snap.select('#pxl-' + i).attr({fill: '#000000'}).animate({fill: 'red'}, 500*i, mina.easeinout);*/
}
SVG Heart Animation - Script Codes
SVG Heart Animation - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 18, 2022
Rating 3
Size 2,753 Kb
Views 24,288
Do you need developer help for SVG Heart 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!

Andreas Neeven (aneeven) Script Codes
Name
Flexbox align
Mail Element Concept
Yet another card...
Fun stuff with transforms, transitions and border radius
Menubar blur content
Spinning Loader
Neon Hexagons SVG Image-Fill
Digital Sucks
Yay for blend-modes
Flexbox grow, shrink and basis
Create amazing marketing copy 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!