Skip to content

Instantly share code, notes, and snippets.

@hnarayanan

hnarayanan/gist:df4148a9caacd2ad01fb

Created October 28, 2014 10:25
Show Gist options
  • Save hnarayanan/df4148a9caacd2ad01fb to your computer and use it in GitHub Desktop.
Save hnarayanan/df4148a9caacd2ad01fb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>SVG Tests!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #ef625b;
font-family: sans-serif;
}
.element-container {
display: inline-block;
position: relative;
width: 50%;
}
.element {
display: block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h1>S<sub>2</sub></h1>
<div class="element-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full" class="element" preserveAspectRatio="xMinYMin meet" viewBox="0 0 400 400">
<rect x="25" y="25" width="350" height="350" fill="white" fill-opacity="0.6" stroke="black" stroke-width="2.5" />
<circle cx="25" cy="25" r="16" fill="black" />
<circle cx="25" cy="375" r="16" fill="black" />
<circle cx="375" cy="25" r="16" fill="black" />
<circle cx="375" cy="375" r="16" fill="black" />
<circle cx="200" cy="25" r="16" fill="grey" />
<circle cx="25" cy="200" r="16" fill="grey" />
<circle cx="375" cy="200" r="16" fill="grey" />
<circle cx="200" cy="375" r="16" fill="grey" />
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment