SVG Hearts
How do I make an svg hearts?
Exploration of some hearts SVGs created by hand. What is a svg hearts? How do you make a svg hearts? This script and codes were developed by Michael Lee on 20 January 2023, Friday.
SVG Hearts - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Hearts</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <svg height="75" width="75" viewBox="0 0 100 75" class="heart"> <path d="M0 25 L25 0 L50 25 L75 0 L100 25 L 50 75 Z" fill="#EC613C" />
</svg>
<svg height="75" width="75" viewBox="0 0 100 75" class="half-heart-right"> <path d="M0 25 L25 0 L50 25 L50 75 Z" fill="#EC613C" /> <path d="M50 25 L75 0 L100 25 L50 75 Z" fill="#6E6160" />
</svg>
<svg height="75" width="75" viewBox="0 0 100 75" class="heart"> <path d="M0 25 L25 0 L50 25 L75 0 L100 25 L 50 75 Z" fill="#6E6160" />
</svg>
<svg width="70" height="60" viewBox="0 0 70 60" class="heart"> <path d="M0 10 L10 10 L10 0 L30 0 L30 10 L40 10 L40 0 L60 0 L60 10 L70 10 L70 30 L60 30 L60 40 L50 40 L50 50 L40 50 L40 60 L30 60 L30 50 L20 50 L20 40 L10 40 L10 30 L0 30 Z" fill="#EC613C" fill-rule="evenodd" />
</svg>
<svg width="70" height="60" viewBox="0 0 70 60" class="heart"> <path d="M0 10 L10 10 L10 0 L30 0 L30 10 L35 10 L35 60 L30 60 L30 50 L20 50 L20 40 L10 40 L10 30 L0 30 Z" fill="#EC613C" fill-rule="evenodd" /> <path d="M35 10 L40 10 L40 0 L60 0 L60 10 L70 10 L70 30 L60 30 L60 40 L50 40 L50 50 L40 50 L40 60 L35 60 Z" fill="#6E6160" fill-rule="evenodd" />
</svg>
<svg width="70" height="60" viewBox="0 0 70 60" class="heart"> <path d="M0 10 L10 10 L10 0 L30 0 L30 10 L40 10 L40 0 L60 0 L60 10 L70 10 L70 30 L60 30 L60 40 L50 40 L50 50 L40 50 L40 60 L30 60 L30 50 L20 50 L20 40 L10 40 L10 30 L0 30 Z" fill="#6E6160" fill-rule="evenodd" />
</svg>
</body>
</html>
| Developer | Michael Lee |
| Username | michaellee |
| Uploaded | January 20, 2023 |
| Rating | 3.5 |
| Size | 1,513 Kb |
| Views | 6,072 |
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!
| Name | Size |
| Ringing bell | 3,287 Kb |
| Current time clock icon | 2,794 Kb |
| Pure CSS Ruby Illustration | 2,673 Kb |
| Hidden Social Media Share Buttons | 3,795 Kb |
| Illustrated CSS Switch | 3,154 Kb |
| Page Animation | 3,202 Kb |
| Mountains Illustration | 2,957 Kb |
| Profile background and color changer prototype for CodeHive | 6,454 Kb |
| Rotating Button | 3,534 Kb |
| Responsive C3.js chart | 2,111 Kb |
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!
| Name | Username | Size |
| Shape Outside - Polygon | Stacy | 3,954 Kb |
| Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
| A Different Type of Gallery | DonPage | 2,950 Kb |
| Weather App | Kw7oe | 3,162 Kb |
| IE11 Test | Boostnewmedia | 4,998 Kb |
| Tab Menus | Zephyr | 3,180 Kb |
| Sassy Buttons | Elyseholladay | 2,299 Kb |
| Filter inputs | Rowinf | 1,721 Kb |
| Ipad Mini Showcase | Hornebom | 10,479 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!