Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <div id="calculator" style="width: 100%; height: 100vh;"></div>
</body>


              
            
!

CSS

              
                body {
  background-color: black;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
  justify-content: center;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#calculator {
  margin: auto;
}
              
            
!

JS

              
                
  var elt = document.getElementById('calculator');
  var calculator = Desmos.GraphingCalculator(elt, {
    invertedColors: true,
    pasteGraphLink: true,
    // expressions: false,
    settingsMenu: false,
    showGrid: false,
    zoomFit: true
  });

var desmosCycloidState = {
  "version": 9,
  "graph": {
    "viewport": {
    "xmin": -4.1,
    "ymin": -2.2,
    "xmax": 4.1,
    "ymax": 2.2
  },
  "showGrid": false
},
"expressions": {
   "list": [
    {
        "id": "56",
        "type": "expression",
        "latex": "c=0.41",
        "color": "#6042a6",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "sliderBounds": {
            "min": "0",
            "max": "2\\pi"
        },
        "slider": {
          "animationPeriod": 40000,
          "isPlaying": true
        }
    },
    {
        "id": "3",
        "type": "expression",
        "latex": "R=1.8",
        "color": "#388c46",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "sliderBounds": {
            "min": "0",
            "max": "20"
        },
        "playing": false
    },
    {
        "id": "11",
        "type": "expression",
        "latex": "S=0.1",
        "color": "#c74440",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "sliderBounds": {
            "min": "0",
            "max": "6"
        },
        "playing": false
    },
    {
        "id": "7",
        "type": "expression",
        "latex": "N=28",
        "color": "#2d70b3",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "sliderBounds": {
            "min": "0",
            "max": "50",
            "step": "2"
        },
        "playing": false
    },
    {
        "id": "8",
        "type": "expression",
        "latex": "E=\\frac{S}{2}",
        "color": "#388c46",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "sliderBounds": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "73",
        "type": "folder",
        "hidden": false,
        "secret": false
    },
    {
        "id": "13",
        "type": "expression",
        "latex": "f\\left(x\\right)=R\\cos\\left(x\\right)-S\\cos\\left(x-b\\right)-E\\cos\\left(Nx\\right)",
        "color": "#388c46",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "14",
        "type": "expression",
        "latex": "g\\left(x\\right)=-R\\sin\\left(x\\right)+S\\sin\\left(x-b\\right)+E\\sin\\left(Nx\\right)",
        "color": "#6042a6",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "19",
        "type": "expression",
        "latex": "b=-\\arctan\\left(\\frac{\\sin\\left(\\left(1-N\\right)x\\right)}{\\left(\\frac{R}{EN}\\right)-\\cos\\left(\\left(1-N\\right)x\\right)}\\right)",
        "color": "#6042a6",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "20",
        "type": "expression",
        "latex": "\\left(f\\left(t\\right),g\\left(t\\right)\\right)",
        "color": "#2d70b3",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "2\\pi"
        },
        "playing": false
    },
    {
        "id": "53",
        "type": "expression",
        "latex": "a=\\left[1...N\\right]",
        "color": "#c74440",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "51",
        "type": "expression",
        "latex": "\\left(x+R\\cos\\left(\\frac{2\\pi a}{N}\\right)+E\\right)^{2}+\\left(y+R\\sin\\left(\\frac{2\\pi a}{N}\\right)\\right)^{2}=S^{2}",
        "color": "#c74440",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "68",
        "type": "expression",
        "latex": "\\left(0.75E\\cos t-E,0.75E\\sin t\\right)",
        "color": "#000000",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "polarDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "domain": {
            "min": "0",
            "max": "2\\pi"
        },
        "playing": false
    },
    {
        "id": "62",
        "type": "expression",
        "latex": "\\left(\\left(\\frac{1}{10}R+2E\\right)\\cos\\left(t\\right)+2m\\left(c\\right)-E,\\left(\\frac{1}{10}R+2E\\right)\\sin t+2m_{2}\\left(c\\right)\\right)",
        "color": "#000000",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fill": true,
        "fillOpacity": "0.4",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "2\\pi"
        },
        "playing": false
    },
    {
        "id": "69",
        "type": "expression",
        "latex": "\\left(\\left(\\frac{1}{10}R+E\\ +\\ S\\right)\\cos t-E+m\\left(c\\right),\\left(\\frac{1}{10}R+E\\ +\\ S\\right)\\sin t+m_{2}\\left(c\\right)\\right)",
        "color": "#dd704f",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fill": false,
        "fillOpacity": "0.4",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "2\\pi"
        },
        "playing": false
    },
    {
        "id": "61",
        "type": "expression",
        "latex": "(f\\left(t\\right)\\cdot\\cos\\left(c\\right)-g\\left(t\\right)\\sin\\left(c\\right)+m\\left(c\\right)-E\\ ,\\ f\\left(t\\right)\\cdot\\sin\\left(c\\right)+g\\left(t\\right)\\cdot\\cos\\left(c\\right)+m_{2}\\left(c\\right))",
        "color": "#cb3f14",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fill": true,
        "fillOpacity": "",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "2\\pi"
        },
        "playing": false
    },
    {
        "id": "101",
        "type": "expression",
        "latex": "m\\left(x\\right)=\\left(E\\cos\\left(x\\left(N-1\\right)\\right)\\right)",
        "color": "#388c46",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "102",
        "type": "expression",
        "latex": "m_{2}\\left(x\\right)=-\\left(\\ E\\sin\\left(x\\left(N-1\\right)\\right)\\right)",
        "color": "#6042a6",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "129",
        "type": "expression",
        "latex": "\\left(X,Y\\right)",
        "color": "#6042a6",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fill": true,
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": "2\\pi"
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "2\\pi"
        },
        "playing": false
    },
    {
        "id": "130",
        "type": "expression",
        "latex": "X=R*\\cos(t)-S*\\cos(t+\\arctan((\\sin((1-N)*t))/(((R)/(E*N))-\\cos((1-N)*t))))-E*\\cos(N*t)",
        "color": "#000000",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "131",
        "type": "expression",
        "latex": "Y=R*\\sin(t)-S*\\sin(t+\\arctan((\\sin((1-N)*t))/(((R)/(E*N))-\\cos((1-N)*t))))-E*\\sin(N*t)",
        "color": "#c74440",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": true,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    },
    {
        "id": "139",
        "type": "expression",
        "latex": "",
        "color": "#2d70b3",
        "lineStyle": "SOLID",
        "lineWidth": "",
        "lineOpacity": "",
        "pointStyle": "POINT",
        "pointSize": "",
        "pointOpacity": "",
        "fillOpacity": "",
        "hidden": false,
        "secret": false,
        "dragMode": "AUTO",
        "label": "",
        "showLabel": false,
        "labelSize": "",
        "labelOrientation": "default",
        "interactiveLabel": false,
        "readonly": false,
        "parametricDomain": {
            "min": "",
            "max": ""
        },
        "polarDomain": {
            "min": "",
            "max": ""
        },
        "domain": {
            "min": "0",
            "max": "1"
        },
        "playing": false
    }
]
}
};


var currentState = {
  "version": 9,
  "graph": {
    "viewport": {
    "xmin": -10,
    "ymin": -10,
    "xmax": 10,
    "ymax": 10
  },
  "showGrid": false
},
"expressions": {
   "list": [
    {
      "type": "expression",
      "id": "1",
      "color": "#c74440"
    }
   ]
  }
}

calculator.setState(desmosCycloidState);





// function output() {
//   calculator.updateSettings({
//     expressions: false,
//     showGrid: false
//   });
// }

// var currentData = document.getElementById("button");
// currentData.addEventListener("click", output, true);


              
            
!
999px

Console