A graphical multiplication table written in PureScript/Pux, try at https://dierk.github.io/tryPux/beautifulMath/index.html

Counter.purs

module App.Counter where

import Prelude (($), (+), (-), (*), (/), (>), const, show)
import Data.Array ((..), (:), mapWithIndex)
import Data.Int (toNumber, floor)
import Math (sin, cos, pi )
import Pux.Html (Html, div, span, button, text, canvas, svg, circle, line )
import Pux.Html.Attributes (width, height, viewBox, cx, cy, r, fill, x1, y1, x2, y2, stroke, strokeWidth)
import Pux.Html.Events (onClick)

data Action = SlicePlus | SliceMinus | TablePlus | TableMinus

type State =
    { slices :: Number -- so many points on the circle circumference to make slices
    , table  :: Number -- the base number of the multiplication table
    }

init :: State
init = { slices : 10.0, table : 2.0 }

update :: Action -> State -> State
update SlicePlus  state = state { slices = state.slices + if state.slices > 19.0 then 10.0 else 1.0 }
update SliceMinus state = state { slices = state.slices - if state.slices > 19.0 then 10.0 else 1.0 }
update TablePlus  state = state { table = state.table + 1.0 }
update TableMinus state = state { table = state.table - 1.0 }

view :: State -> Html Action
view state =
    div []
        [ div []
            [ button [ onClick (const SlicePlus) ] [ text "Slices +" ]
            , span   []                            [ text (show state.slices) ]
            , button [ onClick (const SliceMinus) ] [ text "Slices -" ]
            ]
        , div []
            [ button [ onClick (const TablePlus) ] [ text "Table +" ]
            , span   []                            [ text (show state.table) ]
            , button [ onClick (const TableMinus)] [ text "Table -" ]
            ]
        , div []
            [ svg [ viewBox "0 0 100 100", width "500px"] $
                  circle [ cx "50", cy "50", r "49", fill "white", stroke "papayawhip" ] []
                  : allLines state
            ]
        ]

allLines state =
    mapWithIndex
        (\i n -> sliceLine state (toNumber n)) $
        1 .. floor state.slices

sliceLine state n =
    line
        [ x1 $ xpos $ origin n
        , y1 $ ypos $ origin n
        , x2 $ xpos $ target n
        , y2 $ ypos $ target n
        , stroke "#A0A0F080"
        , strokeWidth "0.8"
        ] []
    where
        origin n   = sliceAngle state.slices n
        target n   = sliceAngle state.slices (n * state.table)
        xpos angle = show $ 50.0 + 50.0 * cos angle
        ypos angle = show $ 50.0 + 50.0 * sin angle
        sliceAngle slices n = n * 2.0 * pi / slices