Skip to content

Instantly share code, notes, and snippets.

@mgwidmann
Created January 12, 2016 15:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mgwidmann/4edfbae64a883fb77d3d to your computer and use it in GitHub Desktop.
Save mgwidmann/4edfbae64a883fb77d3d to your computer and use it in GitHub Desktop.
Basic SVG drawing in Elm
module ElmDemo where
import Graphics.Element exposing (..)
import Graphics.Collage exposing (..)
import Color exposing (..)
import Time
import Text
import Window
-- MODEL
type alias Model = Int
-- UPDATE
update: Float -> Model -> Model
update timestamp circleSize =
rem (circleSize + 1) 500
-- VIEW
view: (Int, Int) -> Model -> Element
view (x, y) circleSize =
collage x y [
Graphics.Collage.circle (toFloat circleSize)
|> gradient circleGradient,
scale (toFloat circleSize * 0.08) (text (Text.fromString "Elm"))
]
circleGradient : Gradient
circleGradient =
radial (0,0) 0 (0,0) 500
[ (0, rgb 167 211 12)
, (1, rgb 1 159 98)
]
-- SIGNALS
signals : Signal Time.Time
signals =
Time.every Time.millisecond
-- MAIN
foldp: Signal Model
foldp =
Signal.foldp update 0 signals
main : Signal Element
main =
Signal.map2 view Window.dimensions foldp
@mgwidmann
Copy link
Author

A refactored version to make the circle smaller after it hits its max size instead of starting from 0.
https://gist.github.com/mgwidmann/79eb931c32be7501b491

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment