Created
January 12, 2016 15:46
-
-
Save mgwidmann/4edfbae64a883fb77d3d to your computer and use it in GitHub Desktop.
Basic SVG drawing in Elm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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