User:Lilyuserin/SVG/herzkurven/old

Zeichnen von herzförmigen Kurven

Bezierpfad umkehren, sodass der Endpunkt zum neuen Anfangspunkt wird: die ersten beiden Punkte miteinander vertauschen und die Koordinaten des ursprünglichen Endpunktes von allem abziehen. So erhält man einen neuen Bezierpfad, der gleich ausschaut, aber rückwärts läuft.

Beispiel:

<path d="M0 0 c0,50 75,100 200,100" /> ergibt umgekehrt <path d="m0 0 c-125,0 -200,-50 -200,-100"/>

Anschließend muss man noch evtl. an der Y-Achse spiegeln, indem man alle X-Koordinaten mit -1 multipliziert.

• Herzkurven in den mathematischen Basteleien

Parameterdarstellung

${\text{x}}=12*\sin {t}-4*\sin 3t$

${\text{y}}=13*\cos {t}-5*\cos 2t-2*\cos 3t-\cos 4t$

Eine explizite Funktion

${\text{y}}={\sqrt {(}}1-(\left\vert x\right\vert -1)^{2}){\text{; }}-2\leqq x\leqq 2$

$\implies (x-1)^{2}+y^{2}=1{\text{; }}0\leqq x\leqq 2\land (x+1)^{2}+y^{2}=1{\text{; }}-2\leqq x\leqq 0$

${\text{y}}=-3*{\sqrt {(}}1-{\frac {\sqrt {2}}{2}}*{\sqrt {\left\vert x\right\vert }}){\text{; }}-2\leqq x\leqq 2$

Herz aus zwei Halbkreisen plus Bezierspitze

flacher Einschnitt

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   height="270"
   width="250"
   
   version="1.1">
  <defs >
   <g id="heart" >
        <path 
    d="M0 0 
    c-25,-80 -50,-80 -100,-130
    a70,70 -45 0,1 100,-100
    a70,70 45 0,1 100,100
    c-50,50 -75,50 -100,130
    " />
    </g>
  </defs>
  <g
     transform="translate(124,265)"
     id="redheart">
         <use
         xlink:href="#heart" 
         style="fill:yellow;stroke:purple;stroke-width:5"/>
     <circle r="3" cy="-130" cx="-100" fill="blue" />
     <circle r="7" cy="0" cx="0" fill="red" />
     <circle r="3" cy="-230" cx="0" fill="maroon" />
     <circle r="3" cy="-130" cx="100" fill="darkgreen" />
  </g>
</svg>

Bezierherzen mit Koordinatensystem

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="280" width="250" >
<defs>

<path id="ticks" d="M10 -3 v6 m10 -6 v6 m10 -6 v6 m10 -6 v6 m10 -8 v10"/>
<path id="pack1" d="M50 -100 v200 M100 -100 v200 "/>
<g id="hticks" >
 <use xlink:href="#ticks" /> <use xlink:href="#ticks" transform="translate(50,0)"/>
  <use xlink:href="#ticks" transform="rotate(180)"/>
  <use xlink:href="#ticks" transform="rotate(180 -25 0)"/>
</g>
<g id="haxis" stroke="black" stroke-width="1">
 <path id="axis" d="M-110 0 h220"/>
 <use xlink:href="#hticks" />
</g>
<g id="achsenkreuz">
 <use xlink:href="#haxis" />
 <use xlink:href="#haxis" transform="rotate(90)" />
</g>

<g id="pack2" >
  <use xlink:href="#pack1" />
  <use xlink:href="#pack1" transform="rotate(180)" />
  <use xlink:href="#pack1" transform="rotate(90)" />
  <use xlink:href="#pack1" transform="rotate(-90)" />
</g>
<path id="arc" d="M0 0 a50,50 90 0,1 100,0"/>
<style type="text/css">
  text {font-size:10px;}
  .it {font-style:italic; font-size:12px;}
  .curve {stroke:#3b3; stroke-opacity:0.8; stroke-width:0.05; }
</style>
 <path id="lowhh" d="M100,0 c0,50 -90,80 -100,140" />
 <path id="bheart1" d="M0,0 c100,0 100,100 -100,100" transform="rotate(-45)"/>
 <path id="bheart2" d="M0,0 c100,0 100,150 -100,100" transform="rotate(-45)" />
 <path id="bheart3" d="M0,0 c100,0 100,180 -100,100" transform="rotate(-45)" />
</defs>


 <g id="cosys" transform="translate(125,125)">
  <use xlink:href="#achsenkreuz" />
  <g style="text-anchor:middle" transform="translate(0 15)">
  <text x="-100">&#8722;2</text>
  <text x="-50">&#8722;1</text>
  <text x="50" >1</text>
  <text x="100" >2</text>
  <text stroke="white" stroke-opacity="0.6" stroke-width="5" x="120" y="-12">
  <tspan class="it">x</tspan></text>
  <text x="120" y="-12"><tspan class="it">x</tspan></text>
 </g>
 <g style="text-anchor:end" transform="translate(-6 3)">
  <text y="-100">2</text>
  <text y="-50">1</text>
  <text y="50" >&#8722;1</text>
  <text y="100" >&#8722;2</text>
  <text y="150" >&#8722;3</text>
  <text stroke="white" stroke-opacity="0.6" stroke-width="5" x="8" y="-120">
  <tspan class="it">y</tspan></text>
  <text x="8" y="-120"><tspan class="it">y</tspan></text>
 </g>
 <use xlink:href="#pack2" stroke-width="0.2" stroke="grey" />
 <use xlink:href="#ticks" transform="rotate(90 -50 50)"  stroke="black" stroke-width="1"/>
 <path d="M0 100 v50" stroke="black" stroke-width="1" />
 </g>
  <g id="heartgroup" transform="translate(125,125)">
 <g id="bez-heart1">
 <use xlink:href="#bheart1" stroke-width="2" stroke="red" fill="none"/>
 <use xlink:href="#bheart1" transform="scale(-1,1)" stroke-width="2" stroke="red" fill="none"/>
 </g>
 <g id="bez-heart2">
 <use xlink:href="#bheart2" stroke-width="2" stroke="purple" fill="none"/>
 <use xlink:href="#bheart2" transform="scale(-1,1)" stroke-width="2" stroke="purple" fill="none"/>
 </g>
 <g id="bez-heart3">
 <use xlink:href="#bheart3" stroke-width="2" stroke="green" fill="none"/>
 <use xlink:href="#bheart3" transform="scale(-1,1)" stroke-width="2" stroke="green" fill="none"/>
 </g>
</g></svg>

Halbkreisherz mit Koordinatemsystem

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="350" width="250" >
<defs>

<path id="ticks" d="M10 -3 v6 m10 -6 v6 m10 -6 v6 m10 -6 v6 m10 -8 v10"/>
<path id="pack1" d="M50 -100 v200 M100 -100 v200 "/>
<g id="hticks" >
 <use xlink:href="#ticks" /> <use xlink:href="#ticks" transform="translate(50,0)"/>
  <use xlink:href="#ticks" transform="rotate(180)"/>
  <use xlink:href="#ticks" transform="rotate(180 -25 0)"/>
</g>
<g id="haxis" stroke="black" stroke-width="1">
 <path id="axis" d="M-110 0 h220"/>
 <use xlink:href="#hticks" />
</g>
<g id="achsenkreuz">
 <use xlink:href="#haxis" />
 <use xlink:href="#haxis" transform="rotate(90)" />
</g>

<g id="pack2" >
  <use xlink:href="#pack1" />
  <use xlink:href="#pack1" transform="rotate(180)" />
  <use xlink:href="#pack1" transform="rotate(90)" />
  <use xlink:href="#pack1" transform="rotate(-90)" />
</g>
<path id="arc" d="M0 0 a50,50 90 0,1 100,0"/>
<style type="text/css">
  text {font-size:10px;}
  .it {font-style:italic; font-size:12px;}
  .curve {stroke:#3b3; stroke-opacity:0.8; stroke-width:0.05; }
</style>
 <path id="lowhh" d="M100,0 c0,50 -90,80 -100,140" />
 <path id="zufallsherz" d="M100,0 c100,0 100,100 -100,100" />
</defs>


 <g id="cosys" transform="translate(125,125)">
  <use xlink:href="#achsenkreuz" />
  <g style="text-anchor:middle" transform="translate(0 15)">
  <text x="-100">&#8722;2</text>
  <text x="-50">&#8722;1</text>
  <text x="50" >1</text>
  <text x="100" >2</text>
  <text stroke="white" stroke-opacity="0.6" stroke-width="5" x="120" y="-12">
  <tspan class="it">x</tspan></text>
  <text x="120" y="-12"><tspan class="it">x</tspan></text>
 </g>
 <g style="text-anchor:end" transform="translate(-6 3)">
  <text y="-100">2</text>
  <text y="-50">1</text>
  <text y="50" >&#8722;1</text>
  <text y="100" >&#8722;2</text>
  <text y="150" >&#8722;3</text>
  <text stroke="white" stroke-opacity="0.6" stroke-width="5" x="8" y="-120">
  <tspan class="it">y</tspan></text>
  <text x="8" y="-120"><tspan class="it">y</tspan></text>
 </g>
 <use xlink:href="#pack2" stroke-width="0.2" stroke="grey" />
 <use xlink:href="#ticks" transform="rotate(90 -50 50)"  stroke="black" stroke-width="1"/>
 <path d="M0 100 v50" stroke="black" stroke-width="1" />
 <use xlink:href="#arc" stroke-width="2" stroke="red" fill="none"/>
 <use xlink:href="#arc" stroke-width="2" stroke="red" fill="none" transform="translate(-100 0)"/>
 <use xlink:href="#lowhh" stroke-width="2" stroke="purple" fill="none" />
 <use xlink:href="#lowhh" transform="scale(-1,1)" stroke-width="2" stroke="purple" fill="none" />
</g>
</svg>