Ben's Hobbyhoekje -- Een hart tekenen met SVG

Een hart tekenen met SVG

Het hart hier boven is getekend met SVG. Plaatjes en JavaScript komen er niet aan te pas, wel is er wat CSS gebruikt voor de opmaak.

Op deze bladzijde wordt besproken hoe je dit kunt aanpakken. De code van de voorbeelden kun je downloaden om zelf te gebruiken.

Er worden drie items besproken:
1. De opbouw van de SVG-code, in algemene termen.
2. Gebruiken in je eigen site.
3. Een uitbreiding: het hart laten kloppen.
De opbouw van de SVG-code
De SVG-tag heeft class="hart". Deze class bepaalt de kleur, de afmetingen van het tekenvlak en de plaats van de figuur binnen de SVG-tag.
De SVG-tag zelf wordt in het document gepositioneerd binnen een div-tag. In dit geval wordt het hart gecentreerd in de regel weergegeven.
De SVG-tag bevat de code voor het hart. Dat gaat hier met een enkele path-tag, waarmee het hart wordt getekend als een gesloten kromme.
Gebruiken in eigen site
Neem de code over zoals die onderaan de pagina staat.
De grootte van het hart kun je aanpassen door width en height binnen de class .hart te veranderen. Houd ze wel aan elkaar gelijk, ander veranderen de marges rond het hart, op een moeilijk te doorgronden manier.
De lengte-breedte verhouding van de figuur ligt vast. Die kun je niet veranderen zonder path aan te passen.
Het hart laten kloppen
Hieronder zie je hetzelfde hart, maar nu klopt het.
Dit is bereikt door aan het hart een tweede class toe te kennen hart2. Dit voegt een animatie toe met de naam pulse.
De animatie pulse wordt elke seconde uitgevoerd en loopt oneindig door. Om het een beetje vloeiend te laten verlopen is de eigenschap ease toegevoegd.
Het kloppen van het hart wordt gemaakt met @keyframes. Door het hart in 50% van de looptijd (= 50% van 1 seconde = ½ seconde) op te schalen van 1.0 naar 1.3 en daarna terug naar 1.0, lijkt het of het hart klopt.

Bron: https://css-tricks.com/hearts-in-html-and-css/#more-237640
In de broncode zit helaas een foutje. Dat is op deze bladzijde gecorrigeerd.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het eerste voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
.hart {
fill: teal;
position: relative;
top: 5px;
width: 50px; height:50px
}
</style>

(Zet dit in de <BODY>, op de plaats waar het hart moet verschijnen).

<div style="text-align:center">
<svg class="hart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0
C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</div>

De code van het tweede voorbeeld ziet er als volgt uit:

(Voeg dit toe aan het <style>-block in de <HEAD>).

.hart2 {
animation: pulse 1s ease infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}

(Wijzig dit in de <svg>-tag dit in de <BODY>).

verander: <svg class="hart" viewBox="0 0 32 29.6">
in: <svg class="hart hart2" viewBox="0 0 32 29.6">

Downloaden:

Druk op de knop: File: voorb432.zip, 610 bytes.

Opmerking:

Een vergelijkbaar hart kunt je tekenen met CSS, zij het dat het 'kloppend' maken erg ingewikkeld is. Voor de 'statische' versie kijk je bij het item Een hart tekenen met CSS.