Skip to content

Instantly share code, notes, and snippets.

@haehn

haehn/svg.html

Created February 27, 2024 02:22
Show Gist options
  • Save haehn/b947bd0198b7ea521cd392b9be1250c9 to your computer and use it in GitHub Desktop.
Save haehn/b947bd0198b7ea521cd392b9be1250c9 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Shapes
Raw
svg.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: white;
background-color: black;
width: 100%;
height: 100%;
overflow: hidden;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<svg>
<circle cx="530" cy="80" r="50" fill="cyan" stroke="cyan" stroke-width="3"></circle>
<circle cx="100" cy="50" r="10" fill="#ff0000" stroke="#fff" stroke-width="2"></circle>
<rect x="260" y="25" width="120" height="60" fill="hotpink"></rect>
<g transform="translate(200, 300)">
<rect x="0" y="0" width="60" height="60" fill="transparent" stroke="yellow" />
<text x="0" y="85" fill='white'>hello :)</text>
</g>
<path d="M 0,20 L 150,150 L 300,100 L 450,20 L 600,130" fill="none" stroke="lightgreen" stroke-width="3"></path>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment