Skip to content

Instantly share code, notes, and snippets.

@logicaroma

logicaroma/index.html

Created February 19, 2017 01:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save logicaroma/dd0059355c485c3178f8987b121fc0d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save logicaroma/dd0059355c485c3178f8987b121fc0d8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. logicaroma created this gist Feb 19, 2017.
    84 changes: 84 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
    <script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style id="jsbin-css">
    svg {
    height: 1000px;
    width: 1000px;
    }
    </style>
    </head>
    <body>
    <svg>
    <path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
    </svg>
    <script id="jsbin-javascript">
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

    return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
    };
    }

    function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;
    }

    window.onload = function() {
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 270));
    };
    </script>


    <script id="jsbin-source-css" type="text/css">svg {
    height: 1000px;
    width: 1000px;
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

    return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
    };
    }

    function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;
    }

    window.onload = function() {
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 270));
    };
    </script></body>
    </html>
    4 changes: 4 additions & 0 deletions jsbin.merijex.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    svg {
    height: 1000px;
    width: 1000px;
    }
    27 changes: 27 additions & 0 deletions jsbin.merijex.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

    return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
    };
    }

    function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;
    }

    window.onload = function() {
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 270));
    };