Created
August 14, 2014 05:47
-
-
Save jayrgee/05493690cbd3a7bb5cf4 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/yeciri/9
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| svg { | |
| background: #4169E1 url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff"><pattern id="a" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M10 0v9h9v1h-9v9h-1v-9h-9v-1h9v-9" opacity=".15"/><path d="M0 19h19v-19h1v20h-20" opacity=".25"/></pattern><rect width="100%" height="100%" fill="%234169E1"/><rect width="100%" height="100%" fill="url(%23a)"/></svg>'); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| function newSVG(options) { | |
| var xmlns = "http://www.w3.org/2000/svg", | |
| s = document.createElementNS(xmlns, "svg"), | |
| o = options || {}, | |
| h = o.height || 200, | |
| w = o.width || 200; | |
| s.setAttributeNS(null, 'width', w); | |
| s.setAttributeNS(null, 'height', h); | |
| return s; | |
| } | |
| function getCircle(options) { | |
| var xmlns = "http://www.w3.org/2000/svg", | |
| c = document.createElementNS(xmlns, "circle"), | |
| o = options || {}, | |
| cx = o.cx || 20, | |
| cy = o.cy || 20, | |
| r = o.r || 10, | |
| stroke = o.stroke || 'black'; | |
| c.setAttributeNS(null, 'cx', cx); | |
| c.setAttributeNS(null, 'cy', cy); | |
| c.setAttributeNS(null, 'r', r); | |
| c.setAttributeNS(null, 'stroke', stroke); | |
| return c; | |
| } | |
| function getDashedCircle(options) { | |
| var c = getCircle(options); | |
| c.setAttributeNS(null, 'fill', 'transparent'); | |
| c.setAttributeNS(null, 'stroke-dasharray', '5,10'); | |
| c.setAttributeNS(null, 'stroke-width', 1); | |
| return c; | |
| } | |
| function getPoint(options){ | |
| var p = getCircle(options), | |
| o = options || {}, | |
| r = o.r || 3; | |
| p.setAttributeNS(null, 'r', r); | |
| return p; | |
| } | |
| function getPointsOnCircle(n, cx, cy, radius) { | |
| var i, | |
| coord = {}, | |
| coords = [], | |
| extAngle = 2 * Math.PI / n; | |
| for (i = 0; i < n; i++) { | |
| coord = { | |
| x: cx + radius * Math.sin(extAngle * i), | |
| y: cy - radius * Math.cos(extAngle * i) | |
| }; | |
| coords.push(coord); | |
| } | |
| return coords; | |
| } | |
| function newDemo(n, cx, cy, r) { | |
| var e = newSVG({height: 2 * cy, width: 2 * cx}); | |
| e.appendChild(getDashedCircle({cx: cx, cy: cy, r: r})); | |
| getPointsOnCircle(n, cx, cy, r).forEach(function(c){ | |
| e.appendChild(getPoint({cx: c.x, cy: c.y})); | |
| }); | |
| document.body.appendChild(e); | |
| } | |
| (function(){ | |
| var i, n = 16; | |
| for (i = 0; i < n; i++) { | |
| newDemo(i + 1, 100, 100, 80); | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| svg { | |
| background: #4169E1 url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff"><pattern id="a" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M10 0v9h9v1h-9v9h-1v-9h-9v-1h9v-9" opacity=".15"/><path d="M0 19h19v-19h1v20h-20" opacity=".25"/></pattern><rect width="100%" height="100%" fill="%234169E1"/><rect width="100%" height="100%" fill="url(%23a)"/></svg>'); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function newSVG(options) { | |
| var xmlns = "http://www.w3.org/2000/svg", | |
| s = document.createElementNS(xmlns, "svg"), | |
| o = options || {}, | |
| h = o.height || 200, | |
| w = o.width || 200; | |
| s.setAttributeNS(null, 'width', w); | |
| s.setAttributeNS(null, 'height', h); | |
| return s; | |
| } | |
| function getCircle(options) { | |
| var xmlns = "http://www.w3.org/2000/svg", | |
| c = document.createElementNS(xmlns, "circle"), | |
| o = options || {}, | |
| cx = o.cx || 20, | |
| cy = o.cy || 20, | |
| r = o.r || 10, | |
| stroke = o.stroke || 'black'; | |
| c.setAttributeNS(null, 'cx', cx); | |
| c.setAttributeNS(null, 'cy', cy); | |
| c.setAttributeNS(null, 'r', r); | |
| c.setAttributeNS(null, 'stroke', stroke); | |
| return c; | |
| } | |
| function getDashedCircle(options) { | |
| var c = getCircle(options); | |
| c.setAttributeNS(null, 'fill', 'transparent'); | |
| c.setAttributeNS(null, 'stroke-dasharray', '5,10'); | |
| c.setAttributeNS(null, 'stroke-width', 1); | |
| return c; | |
| } | |
| function getPoint(options){ | |
| var p = getCircle(options), | |
| o = options || {}, | |
| r = o.r || 3; | |
| p.setAttributeNS(null, 'r', r); | |
| return p; | |
| } | |
| function getPointsOnCircle(n, cx, cy, radius) { | |
| var i, | |
| coord = {}, | |
| coords = [], | |
| extAngle = 2 * Math.PI / n; | |
| for (i = 0; i < n; i++) { | |
| coord = { | |
| x: cx + radius * Math.sin(extAngle * i), | |
| y: cy - radius * Math.cos(extAngle * i) | |
| }; | |
| coords.push(coord); | |
| } | |
| return coords; | |
| } | |
| function newDemo(n, cx, cy, r) { | |
| var e = newSVG({height: 2 * cy, width: 2 * cx}); | |
| e.appendChild(getDashedCircle({cx: cx, cy: cy, r: r})); | |
| getPointsOnCircle(n, cx, cy, r).forEach(function(c){ | |
| e.appendChild(getPoint({cx: c.x, cy: c.y})); | |
| }); | |
| document.body.appendChild(e); | |
| } | |
| (function(){ | |
| var i, n = 16; | |
| for (i = 0; i < n; i++) { | |
| newDemo(i + 1, 100, 100, 80); | |
| } | |
| }()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment