A graphical multiplication table in Typescript/React. See live at https://dierk.github.io/tryPux/beautifulMathInTS/index.html

Counter.tsx

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }
export interface HelloState { slices: number; table: number }

export class Hello extends React.Component<HelloProps, HelloState> {

    constructor(props: HelloProps) {
        super(props);
        this.state = { slices:10, table:2 }

        this.modifyState = this.modifyState.bind(this); // oh, this is so silly
    }
    render() {
        return <div>
            <h1>Beautiful Math with {this.props.compiler} and {this.props.framework}</h1>

            <p>See also implementations in
                <a href="https://gist.github.com/Dierk/221e2991955578f196b5ae81ab0b9956">Elm</a>
                and
                <a href="https://gist.github.com/Dierk/c820c4a9dd6f60ecb4e78fe90709bd6c">Purescript/Pux</a>
            </p>

            <div>
            <button onClick={ () => this.modifyState(1, 0) }> Slices + </button>
            { this.state.slices }
            <button onClick={ () => this.modifyState(-1, 0)}> Slices - </button>
            </div>

            <div>
            <button onClick={ () => this.modifyState(0, 1) }> Table + </button>
            { this.state.table }
            <button onClick={ () => this.modifyState(0, -1)}> Table - </button>
            </div>

            <div>
            <svg viewBox="0 0 100 100" width="400px">
                <circle cx="50"  cy="50" r="49" fill="transparent"  stroke="papayawhip"></circle>
                { this.lines(this.state) }
            </svg>
            </div>

        </div>;
    }

    lines(state : HelloState) {
        const xpos       = (angle: number) => 50.0 + 50.0 * Math.cos(angle);
        const ypos       = (angle: number) => 50.0 + 50.0 * Math.sin(angle);
        const sliceAngle = (slice: number) => slice * 2.0 * Math.PI / state.slices;
        const origin     = (slice: number) => sliceAngle (slice);
        const target     = (slice: number) => sliceAngle (slice * state.table);

        const numbers = new Array(state.slices);
        for (let i = 1; i <= state.slices; i++) {
            numbers.push(
                <line key={"line"+i}
                   x1={xpos(origin(i))}
                   y1={ypos(origin(i))}
                   x2={xpos(target(i))}
                   y2={ypos(target(i))}
                   stroke="#A0A0F080">
                </line>
            );
        }
        return numbers;
    }

    modifyState(sliceDelta : number, tableDelta : number) {
        this.setState( {
            slices: this.state.slices + sliceDelta,
            table : this.state.table  + tableDelta
        } )
    }
}