Sideway
output.to from Sideway
Draft for Information Only

Content

SVG Heart Examples:
 SVG Heart Example:
  Geometry of Heart
  Heart
  Small Heart
  Small Heart
  Small Heart
 Sources and References

SVG Heart Examples:

SVG Heart Example:

SVG Heart with blue center bounded by a blue r112.5 circle, and red center bounded by a red 200*200 square with center offset 12.5 upward.

Geometry of Heart

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='380' height='350' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='326' height='326' viewBox='-25, -25, 326, 326' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <rect x='50' y='50' width='200' height='200' stroke='red' stroke-width='1' fill='None' />
   <circle cx='150' cy='150' r='1' stroke='black' stroke-width='1' fill='black' />
   <circle cx='150' cy='150' r='144' stroke='black' stroke-width='3' fill='None' />
   <circle cx='150' cy='150' r='112.5' stroke='blue' stroke-width='1' fill='None' />
   <path stroke='blue' stroke-width='1' opacity='.6' fill='None' 
       d='m150,162.5m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
   <circle cx='150' cy='137.5' r='1' stroke='red' stroke-width='1' fill='black' />
   <circle cx='150' cy='137.5' r='112.5' stroke='red' stroke-width='1' fill='None' />
   <path stroke='red' stroke-width='1' opacity='.6' fill='None' 
       d='m150,150m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='295' y='17' font-size='20'>(300,0)</text>
<text x='5' y='345' font-size='20'>(0,300)</text>
<text x='295' y='345' font-size='20'>(300,300)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='325' cy='25' r='2' fill='black'/>
<circle cx='25' cy='325' r='2' fill='black'/>
<circle cx='325' cy='325' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Heart

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='280' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='226' height='226' viewBox='-25, -25, 226, 226' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='red' stroke-width='0' opacity='.6' fill='red' 
       d='m100,100m0,-50a50,50 0,0,1 100,0q0,100 -100,150q-100,-50 -100,-150a50,50 0,0,1 100,0' />
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='195' y='17' font-size='20'>(200,0)</text>
<text x='5' y='245' font-size='20'>(0,200)</text>
<text x='195' y='245' font-size='20'>(200,200)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='225' cy='25' r='2' fill='black'/>
<circle cx='25' cy='225' r='2' fill='black'/>
<circle cx='225' cy='225' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Small Heart

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='180' height='150' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='126' height='126' viewBox='-25, -25, 126, 126' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='red' stroke-width='0' opacity='.6' fill='red' 
       d='m50,50m0,-25a25,25 0,0,1 50,0q0,50 -50,75q-50,-25 -50,-75a25,25 0,0,1 50,0' />
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='95' y='17' font-size='20'>(100,0)</text>
<text x='5' y='145' font-size='20'>(0,100)</text>
<text x='95' y='145' font-size='20'>(100,100)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='125' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='125' cy='125' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Small Heart

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='130' height='100' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='76' height='76' viewBox='-25, -25, 76, 76' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='red' stroke-width='0' opacity='.6' fill='red' 
       d='m25,25m0,-12.5a12.5,12.5 0,0,1 25,0q0,25 -25,37.5q-25,-12.5 -25,-37.5a12.5,12.5 0,0,1 25,0' />
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='45' y='17' font-size='20'>(50,0)</text>
<text x='5' y='95' font-size='20'>(0,50)</text>
<text x='45' y='95' font-size='20'>(50,50)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='75' cy='25' r='2' fill='black'/>
<circle cx='25' cy='75' r='2' fill='black'/>
<circle cx='75' cy='75' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Small Heart

SVG Heart Examples
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='140' height='60' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='86' height='36' viewBox='-25, -25, 86, 36' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='red' stroke-width='0' opacity='.6' fill='red' 
       d='m5,5m0,-2.5a2.5,2.5 0,0,1 5,0q0,5 -5,7.5q-5,-2.5 -5,-7.5a2.5,2.5 0,0,1 5,0' />
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='55' y='17' font-size='20'>(60,0)</text>
<text x='5' y='55' font-size='20'>(0,10)</text>
<text x='55' y='55' font-size='20'>(60,10)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='85' cy='25' r='2' fill='black'/>
<circle cx='25' cy='35' r='2' fill='black'/>
<circle cx='85' cy='35' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Sources and References

©sideway

ID: 211200008 Last Updated: 12/8/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
 IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Travel 18

Reference 79

Computer

Hardware 251

Software

Application 213

Digitization 35

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 431

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Set 1

Logic 1

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2025 Sideway . All rights reserved Disclaimers last modified on 06 September 2019