Commits: 1
Write down steps to reproduce the tree, implement or improve some examples
index c58cd80..47685ff 100644
--- a/index.md
+++ b/index.md
@@ -4,6 +4,29 @@ presentation:
= theme: solarized.css
=---
=
+Steps to reproduce the tree:
+
+Make a dot
+
+ Centered (Elm UI, viewBox, cartesian coordinates)
+
+Make a line
+
+ Play with transformations (union types)
+
+Gradients
+
+Multiple lines
+
+ Rosettes (different kinds)
+
+Groups and transformations
+
+ Spiral (recursion)
+
+Tree
+
+
=<!-- slide -->
=
=## Before the course beginsindex 0382141..cbd5f2e 100644
--- a/src/CenteredDot.elm
+++ b/src/CenteredDot.elm
@@ -1,4 +1,4 @@
-module Simplest exposing (main)
+module CenteredDot exposing (main)
=
=import Element
=import Svgnew file mode 100644
index 0000000..81e07be
--- /dev/null
+++ b/src/Gradient.elm
@@ -0,0 +1,45 @@
+module Gradient exposing (main)
+
+import Element
+import Svg
+import Svg.Attributes
+
+
+main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200" ]
+ [ Svg.defs []
+ [ Svg.linearGradient
+ [ Svg.Attributes.id "blue-pink-gradient"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ]
+ [ Svg.stop
+ [ Svg.Attributes.stopColor "blue"
+ , Svg.Attributes.offset "0"
+ ]
+ []
+ , Svg.stop
+ [ Svg.Attributes.stopColor "pink"
+ , Svg.Attributes.offset "1"
+ ]
+ []
+ ]
+ ]
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(30) scale(100, 1)"
+ ]
+ []
+ ]
+ )
+ )new file mode 100644
index 0000000..0eee932
--- /dev/null
+++ b/src/Line.elm
@@ -0,0 +1,24 @@
+module Line exposing (main)
+
+import Element
+import Svg
+import Svg.Attributes
+
+
+main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200" ]
+ [ Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "black"
+ , Svg.Attributes.transform "rotate(30) scale(100, 1)"
+ ]
+ []
+ ]
+ )
+ )new file mode 100644
index 0000000..f39d91f
--- /dev/null
+++ b/src/LineTypedTransformations.elm
@@ -0,0 +1,71 @@
+module LineTypedTransformations exposing (main)
+
+import Element
+import Svg
+import Svg.Attributes
+
+
+main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200" ]
+ [ Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "black"
+ , transform
+ [ Rotate 30
+ , Scale 100 1
+ ]
+ ]
+ []
+ ]
+ )
+ )
+
+
+type Transformation
+ = Identity
+ | Scale Float Float
+ | Translate Float Float
+ | Rotate Float
+
+
+
+-- transform : List Transformation -> Svg.Attribute msg
+
+
+transform transformations =
+ let
+ toString : Transformation -> String
+ toString transformation =
+ case transformation of
+ Identity ->
+ ""
+
+ Scale x y ->
+ "scale("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
+
+ Translate x y ->
+ "translate("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
+
+ Rotate angle ->
+ "rotate("
+ ++ String.fromFloat angle
+ ++ ")"
+ in
+ transformations
+ |> List.map toString
+ |> String.join " "
+ |> Svg.Attributes.transformnew file mode 100644
index 0000000..d9d2060
--- /dev/null
+++ b/src/Rosette.elm
@@ -0,0 +1,69 @@
+module Rosette exposing (main)
+
+import Element
+import Svg
+import Svg.Attributes
+
+
+main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200" ]
+ [ Svg.defs []
+ [ Svg.linearGradient
+ [ Svg.Attributes.id "blue-pink-gradient"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ]
+ [ Svg.stop
+ [ Svg.Attributes.stopColor "blue"
+ , Svg.Attributes.offset "0"
+ ]
+ []
+ , Svg.stop
+ [ Svg.Attributes.stopColor "pink"
+ , Svg.Attributes.offset "1"
+ ]
+ []
+ ]
+ ]
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(0) scale(100, 1)"
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(72) scale(100, 1)"
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(144) scale(100, 1)"
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(216) scale(100, 1)"
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , Svg.Attributes.transform "rotate(288) scale(100, 1)"
+ ]
+ []
+ ]
+ )
+ )new file mode 100644
index 0000000..dcd20c1
--- /dev/null
+++ b/src/RosetteTypedTransformations.elm
@@ -0,0 +1,125 @@
+module RosetteTypedTransformations exposing (main)
+
+import Element
+import Svg
+import Svg.Attributes
+
+
+main =
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200" ]
+ [ Svg.defs []
+ [ Svg.linearGradient
+ [ Svg.Attributes.id "blue-pink-gradient"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ]
+ [ Svg.stop
+ [ Svg.Attributes.stopColor "blue"
+ , Svg.Attributes.offset "0"
+ ]
+ []
+ , Svg.stop
+ [ Svg.Attributes.stopColor "pink"
+ , Svg.Attributes.offset "1"
+ ]
+ []
+ ]
+ ]
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 0
+ , Scale 100 1
+ ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 72
+ , Scale 100 1
+ ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 144
+ , Scale 100 1
+ ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 216
+ , Scale 100 1
+ ]
+ ]
+ []
+ , Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform
+ [ Rotate 288
+ , Scale 100 1
+ ]
+ ]
+ []
+ ]
+ )
+ )
+
+
+type Transformation
+ = Identity
+ | Scale Float Float
+ | Translate Float Float
+ | Rotate Float
+
+
+transform : List Transformation -> Svg.Attribute msg
+transform transformations =
+ let
+ toString : Transformation -> String
+ toString transformation =
+ case transformation of
+ Identity ->
+ ""
+
+ Scale x y ->
+ "scale("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
+
+ Translate x y ->
+ "translate("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
+
+ Rotate angle ->
+ "rotate("
+ ++ String.fromFloat angle
+ ++ ")"
+ in
+ transformations
+ |> List.map toString
+ |> String.join " "
+ |> Svg.Attributes.transformindex 8710e3c..9686d17 100644
--- a/src/Simplest.elm
+++ b/src/Simplest.elm
@@ -6,10 +6,12 @@ import Svg.Attributes
=
=main =
= Svg.svg [ Svg.Attributes.style "background: pink" ]
- [ Svg.circle
- [ Svg.Attributes.r "10"
- , Svg.Attributes.cx "30"
- , Svg.Attributes.cy "30"
+ [ Svg.line
+ [ Svg.Attributes.x1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.stroke "black"
= ]
= []
= ]new file mode 100644
index 0000000..f2e2aa0
--- /dev/null
+++ b/src/Spiral.elm
@@ -0,0 +1,110 @@
+module Spiral exposing (main)
+
+import Element
+import Svg
+import Svg.Attributes
+
+
+main =
+ let
+ defs =
+ Svg.defs []
+ [ Svg.linearGradient
+ [ Svg.Attributes.id "blue-pink-gradient"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x2 "1"
+ , Svg.Attributes.y2 "0"
+ , Svg.Attributes.gradientUnits "userSpaceOnUse"
+ ]
+ [ Svg.stop
+ [ Svg.Attributes.stopColor "blue"
+ , Svg.Attributes.offset "0"
+ ]
+ []
+ , Svg.stop
+ [ Svg.Attributes.stopColor "pink"
+ , Svg.Attributes.offset "1"
+ ]
+ []
+ ]
+ ]
+ in
+ Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+ (Element.html
+ (Svg.svg
+ [ Svg.Attributes.viewBox "-100 -100 200 200" ]
+ (defs :: spiral 500)
+ )
+ )
+
+
+spiral : Int -> List (Svg.Svg msg)
+spiral age =
+ if age > 0 then
+ let
+ length =
+ 500 / toFloat age
+ in
+ [ Svg.line
+ [ Svg.Attributes.x2 "1"
+ , Svg.Attributes.stroke "url(#blue-pink-gradient)"
+ , transform [ Scale length 1 ]
+ ]
+ []
+ , Svg.g
+ [ transform
+ [ Identity
+ , Translate length 0
+ , Rotate 15
+ ]
+ ]
+ (spiral (age - 1))
+ ]
+
+ else
+ []
+
+
+type Transformation
+ = Identity
+ | Scale Float Float
+ | Translate Float Float
+ | Rotate Float
+
+
+transform : List Transformation -> Svg.Attribute msg
+transform transformations =
+ let
+ toString : Transformation -> String
+ toString transformation =
+ case transformation of
+ Identity ->
+ ""
+
+ Scale x y ->
+ "scale("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
+
+ Translate x y ->
+ "translate("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
+
+ Rotate angle ->
+ "rotate("
+ ++ String.fromFloat angle
+ ++ ")"
+ in
+ transformations
+ |> List.map toString
+ |> String.join " "
+ |> Svg.Attributes.transform