forked from PoshWeb/Turtle
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathKeyframes.turtle.ps1
More file actions
58 lines (51 loc) · 1.52 KB
/
Keyframes.turtle.ps1
File metadata and controls
58 lines (51 loc) · 1.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<#
.SYNOPSIS
Turtles can now use keyframes
.DESCRIPTION
Turtles can now use CSS keyframes.
Here are a few examples.
#>
turtle id wiggle-square square 42 fill '#4488ff' stroke '#224488' keyframe ([Ordered]@{
'wiggle3d' = [Ordered]@{
'0%,100%' = [Ordered]@{
transform = "rotateX(-3deg) rotateY(-3deg) rotateZ(-3deg)"
}
'50%' = [Ordered]@{
transform = "rotateX(3deg) rotateY(3deg) rotateZ(3deg)"
}
}
}) pathclass wiggle3d save ./Keyframes-Wiggle-Square.svg
turtle viewbox 84 id moving-square square 42 fill '#4488ff' stroke '#224488' keyframe ([Ordered]@{
'moving-in-3d' = [Ordered]@{
'0%,100%' = [Ordered]@{
transform = "translate3d(0ch, 2ch, 5em) rotateY(-180deg)"
}
'50%' = [Ordered]@{
transform = "translate3d(5ch, 1ch, 5em) rotateY(0deg)"
}
}
}) pathclass moving-in-3d save ./Keyframes-Moving-Square.svg
turtle id "wow-wow-wow-wow-wow" keyframe @{
'bigger-font' = [Ordered]@{
'0%' = @{
'font-size' = '1rem'
}
'16%' = @{
'font-size' = '2rem'
}
'32%' = @{
'font-size' = '5rem'
}
'48%' = @{
'font-size' = '10rem'
}
'64%' = @{
'font-size' = '15rem'
}
'100%' = @{
'font-size' = '20rem'
}
}
} duration '00:00:01.68' TextAttribute @{
class='bigger-font'
} text ["wow"] save ./Keyframes-Wow.svg