A graphical multiplication table written in elm (see Counter.purs for the same in purescript). Live: https://dierk.github.io/tryPux/beautifulMathInElm/index.html

Counter.elm

import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)
import Svg exposing (svg, circle, line)
import Svg.Attributes exposing (..)
import List exposing (map, (::))


main =
  App.beginnerProgram { model = state, view = view, update = update }


-- MODEL

type alias State =
    { slices : Int
    , table  : Int
    }

state : State
state = { slices = 10, table = 2 }


-- UPDATE

type Action = SlicePlus | SliceMinus | TablePlus | TableMinus

update : Action -> State -> State
update msg state =
  case msg of
    SlicePlus  ->  { state | slices = state.slices + 1 }
    SliceMinus ->  { state | slices = state.slices - 1 }
    TablePlus  ->  { state | table  = state.table  + 1 }
    TableMinus ->  { state | table  = state.table  - 1 }


-- VIEW

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

allLines state =
    map
        (\slice -> sliceLine state slice)
        [1 .. state.slices]

sliceLine state slice =
    let
        xpos angle   = toString <| 50.0 + 50.0 * cos angle
        ypos angle   = toString <| 50.0 + 50.0 * sin angle
        origin       = sliceAngle  slice
        target       = sliceAngle (slice * state.table)
        sliceAngle x = (toFloat x) * 2.0 * pi / (toFloat state.slices)
    in line
        [ x1 <| xpos origin
        , y1 <| ypos origin
        , x2 <| xpos target
        , y2 <| ypos target
        , stroke "#A0A0F080"
        , strokeWidth "0.8"
        ] []