https://elm-lang.org/try
https://ellie-app.com

Minimal Elm setup

Canvas squares

Cat pictures

WebGL Triangle

Render a list

P5.js random walk

SVG clock

module Main exposing (main)

import Browser
import Html exposing (Html)
import Html.Attributes as Attributes
import Svg
import Svg.Attributes as SvgAttributes
import Time

main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

type alias Model =
    { time : Time.Posix }

init : () -> ( Model, Cmd Msg )
init _ =
    ( { time = Time.millisToPosix 0 }
    , Cmd.none
    )

type Msg
    = GotNewTime Time.Posix

subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every 1000 GotNewTime

update msg model =
    case msg of
        GotNewTime time ->
            ( { model | time = time }, Cmd.none )

view model =
    Html.div [ Attributes.style "text-align" "center" ]
        [ clock model.time
        ]

clock : Time.Posix -> Svg.Svg msg
clock time =
    let
        seconds =
            toFloat (Time.toSecond Time.utc time) / 60

minutes =
            toFloat (Time.toMinute Time.utc time) / 60

hours =
            toFloat (modBy 12 (Time.toHour Time.utc time)) / 12
    in
    Svg.svg [ SvgAttributes.width "200", SvgAttributes.height "200" ]
        ([ Svg.circle
            [ SvgAttributes.cx "100"
            , SvgAttributes.cy "100"
            , SvgAttributes.r "100"
            , SvgAttributes.fill "#ddd"
            ]
            []
         ]
            ++ hoursTicks
            ++ [ hourHand hours
               , minutesHand minutes
               , secondHand seconds
               ]
        )

hoursTicks : List (Svg.Svg msg)
hoursTicks =
    List.map hour <| List.range 0 11

hour : Int -> Svg.Svg msg
hour tick =
    let
        angle =
            toFloat tick / 12

length1 =
            if modBy 3 tick == 0 then
                75

else
                85

length2 =
            100

c =
            100

x1_ =
            c + length1 * cos ((angle - 0.25) * 2 * pi)

y1_ =
            c + length1 * sin ((angle - 0.25) * 2 * pi)

x2_ =
            c + length2 * cos ((angle - 0.25) * 2 * pi)

y2_ =
            c + length2 * sin ((angle - 0.25) * 2 * pi)
    in
    Svg.line
        [ SvgAttributes.x1 <| String.fromFloat x1_
        , SvgAttributes.y1 <| String.fromFloat y1_
        , SvgAttributes.x2 <| String.fromFloat x2_
        , SvgAttributes.y2 <| String.fromFloat y2_
        , SvgAttributes.stroke "#ccc"
        , SvgAttributes.strokeWidth "5"
        ]
        []

hourHand : Float -> Svg.Svg msg
hourHand =
    hand
        [ SvgAttributes.stroke "black"
        , SvgAttributes.strokeWidth "4"
        ]
        75

minutesHand : Float -> Svg.Svg msg
minutesHand =
    hand
        [ SvgAttributes.stroke "black"
        , SvgAttributes.strokeWidth "3"
        ]
        85

secondHand : Float -> Svg.Svg msg
secondHand =
    hand
        [ SvgAttributes.stroke "red"
        , SvgAttributes.strokeWidth "1"
        ]
        95

hand : List (Svg.Attribute msg) -> Float -> Float -> Svg.Svg msg
hand attributes length angle =
    let
        c =
            100

x =
            c + length * cos ((angle - 0.25) * 2 * pi)

y =
            c + length * sin ((angle - 0.25) * 2 * pi)
    in
    Svg.line
        ([ SvgAttributes.x1 "100"
         , SvgAttributes.y1 "100"
         , SvgAttributes.x2 <| String.fromFloat x
         , SvgAttributes.y2 <| String.fromFloat y
         ]
            ++ attributes
        )
        []

P5 bouncing ball

SVG basic setup

SVG - shapes, lines, text

-- Scalable Vector Graphics (SVG) can be a nice way to draw things in 2D.
-- Here are some common SVG shapes.
--
-- Dependencies:
--   elm install elm/svg
--

import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)

main : Html msg
main =
  svg
    [ viewBox "0 0 400 400"
    , width "400"
    , height "400"
    ]
    [ circle
        [ cx "50"
        , cy "50"
        , r "40"
        , fill "red"
        , stroke "black"
        , strokeWidth "3"
        ]
        []
    , rect
        [ x "100"
        , y "10"
        , width "40"
        , height "40"
        , fill "green"
        , stroke "black"
        , strokeWidth "2"
        ]
        []
    , line
        [ x1 "20"
        , y1 "200"
        , x2 "200"
        , y2 "20"
        , stroke "blue"
        , strokeWidth "10"
        , strokeLinecap "round"
        ]
        []
    , polyline
        [ points "200,40 240,40 240,80 280,80 280,120 320,120 320,160"
        , fill "none"
        , stroke "red"
        , strokeWidth "4"
        , strokeDasharray "20,2"
        ]
        []
    , text_
        [ x "130"
        , y "130"
        , fill "black"
        , textAnchor "middle"
        , dominantBaseline "central"
        , transform "rotate(-45 130,130)"
        ]
        [ text "Welcome to Shapes Club"
        ]
    ]

-- There are a lot of odd things about SVG, so always try to find examples
-- to help you understand the weird stuff. Like these:
--
--   https://www.w3schools.com/graphics/svg_examples.asp
--   https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
--
-- If you cannot find relevant examples, make an experiment. If you push
-- through the weirdness, you can do a lot with SVG.

Racket Processing - rotating shapes

Elm - logging lists and objects

Basic Elm Architecture

Basic elm-ui