Skip to content

Instantly share code, notes, and snippets.

@chilijung

chilijung/README.md

Last active August 29, 2015 14:00
Show Gist options
  • Save chilijung/11054217 to your computer and use it in GitHub Desktop.
Save chilijung/11054217 to your computer and use it in GitHub Desktop.
Download ZIP
Shapes in svg
Raw
README.md

Shapes in svg

Raw
index.html
<html>
<head>
<style>
svg {
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<h1>Rect:</h1>
<svg>
<rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600; fill: #00cc00"/>
<rect x="70" y="10" height="50" width="50" rx="10" ry="10" style="stroke:#006600; fill: #00cc00"/>
<rect x="130" y="10" height="50" width="50" rx="15" ry="15" style="stroke:#006600; fill: #00cc00"/>
</svg>
<h1>Circle</h1>
<svg>
<circle cx="40" cy="40" r="24" style="stroke: red; fill:#CCC"/>
<circle cx="20" cy="50" r="30" style="fill: #333"/>
</svg>
<h1>Ellipse</h1>
<svg>
<ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#00cc00"/>
</svg>
<h1>Line<h1>
<svg>
<line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/>
<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
<line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/>
<line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/>
</svg>
<h1>Polyline</h1>
<svg>
<polyline points="10,2 60,2 35,52" style="stroke:#006600; stroke-width: 2; fill: #33cc33;"/>
<polyline points="10,52 60,52 35,102 10,52" style="stroke:#006600; stroke-width: 2; fill: #33cc33;"/>
</svg>
<h1>Polygon</h1>
<svg>
<polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment