Cheat Sheets

SVG

Positions

The grid

For all elements, SVG uses a coordinate system or grid system similar to the one used by canvas. That is, the top left corner of the document is considered to be the point (0,0), or point of origin. Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom.


  0
0 |------- X
  |
  |
  |
  Y

NOTE: that this is slightly different than the way you're taught to graph as a kid (y axis is flipped). However, this is the same way elements in HTML are positioned (By default, LTR documents are considered not the RTL documents which position X from right-to-left).

Example: the follwing defines a rectangle from the upper left corner that spans 100px to the right and 100px to the bottom.

      
<rect x="0" y="0" width="100" height="100" />

Defining the SVG canvas

The width and height properties define how much space the image takes up in the browser

The viewBox property defines a coordinate system for the image elements.

  • The first two values in viewBox define the top-left coordinate in the image

  • the last two define the size from the perspective of the image elements ,how the image elements think of the image when they position themself.

In case the size defined by viewBox does not match the width and the height properties, then the image scales up or scales down.

      
<!-- a simple SVG canvas with 100x100px. One user unit equals one screen unit. -->
<svg width="100" height="100">…</svg>

    
      
<!-- The whole SVG canvas here is 200px by 200px in size.
 However, the viewBox attribute defines the portion of that canvas to display. 
These 200x200 pixels display an area that starts at user unit (0,0) and spans 100x100 user units to the right and to the bottom. 
This effectively zooms in on the 100x100 unit area and enlarges the image to double size. -->
<svg width="200" height="200" viewBox="0 0 100 100">…</svg>

Basic shapes

Rectangle

The <rect> element draws a rectangle on the screen. There are six basic attributes that control the position and shape of the rectangles on screen. The one on the right has its rx and ry parameters set, giving it rounded corners. If they're not set, they default to 0.

  • x The x position of the top left corner of the rectangle.

  • y The y position of the top left corner of the rectangle.

  • width The width of the rectangle.

  • height The height of the rectangle.

  • rx The x radius of the corners of the rectangle.

  • ry The y radius of the corners of the rectangle.

      
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

Circle

The element draws a circle on the screen. It takes three basic parameters to determine the shape and size of the element.

  • r The radius of the circle.

  • cx The x position of the center of the circle.

  • cy The y position of the center of the circle.

      
<circle cx="25" cy="75" r="20"/>

Ellipse

An <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius of the circle separately.

  • rx The x radius of the ellipse.

  • ry The y radius of the ellipse.

  • cx The x position of the center of the ellipse.

  • cy The y position of the center of the ellipse.

      
<ellipse cx="75" cy="75" rx="20" ry="5"/>

Line

The <line> element takes the positions of two points as parameters and draws a straight line between them.

  • x1 The x position of point 1.

  • y1 The y position of point 1.

  • x2 The x position of point 2.

  • y2 The y position of point 2.

      
<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

Polyline

A <polyline> is a group of connected straight lines. Since the list of points can get quite long, all the points are included in one attribute:

points

A list of points. Each number must be separated by a space, comma, EOL, or a line feed character with additional whitespace permitted. Each point must contain two numbers: an x coordinate and a y coordinate. So, the list (0,0), (1,1), and (2,2) could be written as 0, 0 1, 1 2, 2.

      
<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>

Polygon

A <polygon> is similar to a <polyline>, in that it is composed of straight line segments connecting a list of points. For polygons though, the path automatically connects the last point with the first, creating a closed shape.

points

A list of points, each number separated by a space, comma, EOL, or a line feed character with additional whitespace permitted. Each point must contain two numbers: an x coordinate and a y coordinate. So, the list (0,0), (1,1), and (2,2) could be written as 0, 0 1, 1 2, 2. The drawing then closes the path, so a final straight line would be drawn from (2,2) to (0,0).

      
<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>

Path

A <path> is the most general shape that can be used in SVG. Using a path element, you can draw rectangles (with or without rounded corners), circles, ellipses, polylines, and polygons. Basically any of the other types of shapes, bezier curves, quadratic curves, and many more.

      
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
  • d A list of points and other information about how to draw the path.

Examples

rect

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

circle

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

ellipse

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

line

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

polyline

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

polygon

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

path

      
<div class="index__1 ">
<svg width="200" height="250" fill="var(--hot-pink)">
  
    <rect x="10" y="10" width="30" height="30"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
</svg>
</div>
<div class="index__2 " >
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <circle cx="25" cy="75" r="20"/>
</svg>
</div>
<div class="index__3 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <ellipse cx="75" cy="75" rx="20" ry="5"/>
</svg>
</div>
<div class="index__4 ">
    <svg width="200" height="250" >
  
    <line x1="10" x2="50" y1="110" y2="150" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>
<div class="index__5 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145" />
</svg>
</div>
<div class="index__6 ">
    <svg width="200" height="250" fill="var(--hot-pink)" >
  
    <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
</svg>
</div>
<div class="index__7 ">
    <svg width="200" height="250"  >
  
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="var(--hot-pink)" stroke-width="5"/>
</svg>
</div>

Build a House with SVG

Taken from Hunor Márton Borbély's svg tutorial

We use circles, rectangles, lines, polylines, and polygons here.

polyline :The difference between a polyline and a polygon is that a polygon will always close itself, and the polyline will stay open.

wall

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

roof

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

door

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

door-knob

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

stair

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

stair-2

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

window

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

window-line-1

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

window-line-2

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

window-sill

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

circle-window

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

window-line-1

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

window-line-2

      
import { Component } from '@angular/core';
@Component({
    standalone: true,
    selector: 'house',
    styleUrl: './house.scss',
    // templateUrl: './house.html',
    template:`
    
<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon  class="wall index" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
    <polyline class="roof index" points="-75,-8 0,-78 75,-8" />
    <rect class="door index" x="-45" y="10" width="30" height="60" rx="2" />
    <circle class="door-knob index " cx="-35" cy="40" r="2" />
    <rect class="stair index"  x="-47" y="70" width="34" height="5" />
    <rect class="stair index" x="-49" y="75" width="38" height="5" />
    <rect class="window index" x="5" y="15" width="40" height="35" rx="5" />
    <line class=" index" x1="5" y1="32.5" x2="45" y2="32.5" />
    <line class=" index" x1="25" y1="15" x2="25" y2="50" />
    <rect class="window-sill index" x="2" y="48" width="46" height="5" rx="5" />
    <circle class="window index" cx="0" cy="-25" r="15" />
    <line class=" index" x1="-15" y1="-25" x2="15" y2="-25" />
    <line class=" index" x1="0" y1="-40" x2="0" y2="-10" />
</svg>
    `
})
export class House { }

Comming Soon