Skip to content

Instantly share code, notes, and snippets.

@jayrgee

jayrgee/index.html

Created August 13, 2014 21:32
Show Gist options
  • Save jayrgee/68cb42fc0d6de87cb29a to your computer and use it in GitHub Desktop.
Save jayrgee/68cb42fc0d6de87cb29a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
svg {
border: 1px black solid;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
var xmlns = "http://www.w3.org/2000/svg",
s = document.createElementNS(xmlns, "svg"),
p1 = document.createElementNS(xmlns, "path"),
p2 = document.createElementNS(xmlns, "path"),
p3 = document.createElementNS(xmlns, "path"),
p4 = document.createElementNS(xmlns, "path");
s.setAttributeNS(null,'width',325);
s.setAttributeNS(null,'height',325);
p1.setAttributeNS(null, 'fill', 'green');
p1.setAttributeNS(null, 'd', 'M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z');
s.appendChild(p1);
p2.setAttributeNS(null, 'fill', 'red');
p2.setAttributeNS(null, 'd', 'M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z');
s.appendChild(p2);
p3.setAttributeNS(null, 'fill', 'purple');
p3.setAttributeNS(null, 'd', 'M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z');
s.appendChild(p3);
p4.setAttributeNS(null, 'fill', 'blue');
p4.setAttributeNS(null, 'd', 'M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z');
s.appendChild(p4);
document.body.appendChild(s);
</script>
</body>
</html>
Raw
jsbin.joyol.css
svg {
border: 1px black solid;
}
Raw
jsbin.joyol.js
var xmlns = "http://www.w3.org/2000/svg",
s = document.createElementNS(xmlns, "svg"),
p1 = document.createElementNS(xmlns, "path"),
p2 = document.createElementNS(xmlns, "path"),
p3 = document.createElementNS(xmlns, "path"),
p4 = document.createElementNS(xmlns, "path");
s.setAttributeNS(null,'width',325);
s.setAttributeNS(null,'height',325);
p1.setAttributeNS(null, 'fill', 'green');
p1.setAttributeNS(null, 'd', 'M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z');
s.appendChild(p1);
p2.setAttributeNS(null, 'fill', 'red');
p2.setAttributeNS(null, 'd', 'M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z');
s.appendChild(p2);
p3.setAttributeNS(null, 'fill', 'purple');
p3.setAttributeNS(null, 'd', 'M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z');
s.appendChild(p3);
p4.setAttributeNS(null, 'fill', 'blue');
p4.setAttributeNS(null, 'd', 'M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z');
s.appendChild(p4);
document.body.appendChild(s);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment