Something went wrong. Try again.
Graphics calculator made with elm tedius.tngl.sh/zero
elm math graphics
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193:root { --red: #e63228; --blue: #146eaa; --yellow: #f0c801; --orange: #f08c28; --green: #7fb944; --black: #000000; --white: #f5edd9; --gray:#969696; --light-gray:#CCC8C8;}
body { font-family: "Google Sans Code", monospace; background-color: var(--black); margin: 0; padding: 0; position: relative; height: 100vh; overflow: hidden;}
button { width: 30px; transition: all 0.4s;}
button:hover { width: 40px;}
button:active { width: 50px;}
.texture { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url("./src/assets/texture.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0.08; pointer-events: none; z-index: 9999;}
.app { height: 100vh; border: 5px solid var(--black); display: flex; flex-direction: row; font-weight: bold; background-color: var(--white); box-sizing: border-box;}
.input { display: flex; flex-direction: column; border-right: 5px solid var(--black); width: 15rem; flex-shrink: 0;}
.add { display: flex; flex-direction: row; border-bottom: 5px solid var(--black); background-color: var(--blue); margin: 0;}
.add-input { border: none; margin-left: 5px; height: 30px; flex-grow: 1; border-right: 5px solid var(--black); transition: height 0.4s; background: none;}
.add-input:focus { height: 35px; outline: none; color: var(--white);}
.plus-button { border: 5px solid var(--green); color: #241c15; background-color: var(--green);}
.error { display: flex; align-items: center; padding-left: 5px; min-height: 30px; font-weight: normal; text-wrap: wrap; background-color: var(--orange); color: var(--white); border-bottom: 5px solid var(--black);}
.spacer {flex-grow: 1;}
.socials { display: flex; align-items: center; padding-left: 5px; height: 40px; font-weight: normal; text-wrap: wrap; background-color: var(--white); color: var(--black); border-top: 5px solid var(--black);}
.error:empty { min-height: 0px; border: none;}
.entry { display: flex; flex-direction: row; border-bottom: 5px solid var(--black);}
.entry-text { border: none; border-right: 5px solid var(--black); padding-left: 5px; padding-top: 5px; padding-bottom: 5px; flex-grow: 1;}
.minus-button { border: 5px solid var(--red); background-color: var(--red); color: #241c15;}
#svg { height: 100%; width: 100%; flex-grow: 1; display: flex; flex-direction: column;}
#graph { height: 100%; width: 100%; background-color: var(--white); flex-grow: 1;}
.x-axis { stroke: var(--black);}
.y-axis { stroke: var(--black);}
.axis { stroke-width: 3;}
.main-grid { stroke: var(--gray); stroke-width: 3;}
.secund-grid { stroke: var(--light-gray); stroke-width: 2;}
.points {}