@@ -1509,86 +1509,8 @@ function SVG.animate {
15091509. Example
15101510 svg -Content @(
15111511 svg.polygon -Points "25,50 50,75 75,50 50,25" -Fill '#4488ff' @(
1512- svg.animate -AttributeName points -to "0,0 0,100 100,100, 100,0" -Dur 2s -Id morph1 -Begin '0s;morph2.end' -AttributeType XML
1513- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1514- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1512+ svg.animate -AttributeName points -Values "25,50 50,75 75,50 50,25;0,0 0,100 100,100, 100,0; 25,50 50,75 75,50 50,25" -Dur 2s -Id morph1 -RepeatCount 'indefinite' -AttributeType XML
15151513 )
1516- svg.polygon -Points "0,0 0,100 100,100, 100,0" -Fill '#4488ff' @(
1517- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1518- svg.animate -AttributeName points -to "25,50 50,75 75,50 50,25" -Dur 2s -Id morph2 -Begin 'morph1.end' -AttributeType XML
1519- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph2.end' -AttributeType XML
1520- ) -Opacity 0
1521-
1522- ) -ViewBox 100,100
1523- . Example
1524- svg -Content @(
1525- svg.polygon -Points "25,50 50,75 75,50 50,25" -Fill '#4488ff' @(
1526- svg.animate -AttributeName points -to "0,0 0,100 100,100, 100,0" -Dur 2s -Id morph1 -Begin '0s;morph2.end' -AttributeType XML
1527- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1528- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1529- )
1530- svg.polygon -Points "0,0 0,100 100,100, 100,0" -Fill '#4488ff' @(
1531- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1532- svg.animate -AttributeName points -to "25,50 50,75 75,50 50,25" -Dur 2s -Id morph2 -Begin 'morph1.end' -AttributeType XML
1533- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph2.end' -AttributeType XML
1534- ) -Opacity 0
1535-
1536- ) -ViewBox 100,100
1537- . Example
1538- svg -Content @(
1539- svg.polygon -Points "25,50 50,75 75,50 50,25" -Fill '#4488ff' @(
1540- svg.animate -AttributeName points -to "0,0 0,100 100,100, 100,0" -Dur 2s -Id morph1 -Begin '0s;morph2.end' -AttributeType XML
1541- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1542- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1543- )
1544- svg.polygon -Points "0,0 0,100 100,100, 100,0" -Fill '#4488ff' @(
1545- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1546- svg.animate -AttributeName points -to "25,50 50,75 75,50 50,25" -Dur 2s -Id morph2 -Begin 'morph1.end' -AttributeType XML
1547- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph2.end' -AttributeType XML
1548- ) -Opacity 0
1549-
1550- ) -ViewBox 100,100
1551- . Example
1552- svg -Content @(
1553- svg.polygon -Points "25,50 50,75 75,50 50,25" -Fill '#4488ff' @(
1554- svg.animate -AttributeName points -to "0,0 0,100 100,100, 100,0" -Dur 2s -Id morph1 -Begin '0s;morph2.end' -AttributeType XML
1555- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1556- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1557- )
1558- svg.polygon -Points "0,0 0,100 100,100, 100,0" -Fill '#4488ff' @(
1559- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1560- svg.animate -AttributeName points -to "25,50 50,75 75,50 50,25" -Dur 2s -Id morph2 -Begin 'morph1.end' -AttributeType XML
1561- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph2.end' -AttributeType XML
1562- ) -Opacity 0
1563-
1564- ) -ViewBox 100,100
1565- . Example
1566- svg -Content @(
1567- svg.polygon -Points "25,50 50,75 75,50 50,25" -Fill '#4488ff' @(
1568- svg.animate -AttributeName points -to "0,0 0,100 100,100, 100,0" -Dur 2s -Id morph1 -Begin '0s;morph2.end' -AttributeType XML
1569- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1570- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1571- )
1572- svg.polygon -Points "0,0 0,100 100,100, 100,0" -Fill '#4488ff' @(
1573- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1574- svg.animate -AttributeName points -to "25,50 50,75 75,50 50,25" -Dur 2s -Id morph2 -Begin 'morph1.end' -AttributeType XML
1575- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph2.end' -AttributeType XML
1576- ) -Opacity 0
1577-
1578- ) -ViewBox 100,100
1579- . Example
1580- svg -Content @(
1581- svg.polygon -Points "25,50 50,75 75,50 50,25" -Fill '#4488ff' @(
1582- svg.animate -AttributeName points -to "0,0 0,100 100,100, 100,0" -Dur 2s -Id morph1 -Begin '0s;morph2.end' -AttributeType XML
1583- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1584- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1585- )
1586- svg.polygon -Points "0,0 0,100 100,100, 100,0" -Fill '#4488ff' @(
1587- svg.animate -AttributeName opacity -Values '1' -Dur '0.0s' -Begin 'morph1.end' -AttributeType XML
1588- svg.animate -AttributeName points -to "25,50 50,75 75,50 50,25" -Dur 2s -Id morph2 -Begin 'morph1.end' -AttributeType XML
1589- svg.animate -AttributeName opacity -Values '0' -Dur '0.0s' -Begin 'morph2.end' -AttributeType XML
1590- ) -Opacity 0
1591-
15921514 ) -ViewBox 100,100
15931515. Example
15941516 svg -Content @(
@@ -1692,14 +1614,14 @@ function SVG.animate {
16921614 [float]$CenterY = 100,
16931615 # The radius coordinate of the shape. This will decrease by 1/RepeatCount each time.
16941616 [float]$Radius = 100,
1695- # The number of sides
1696- $SideCount = 3,
1617+ # The number of sides. A file will be generated for each unique value provided.
1618+ [int[]] $SideCount = 3..6 ,
16971619 # The total rotation of the innermost element,
16981620 $TotalRotation = 180,
16991621 # The total duration of any animations.
17001622 [timespan]$duration = '00:00:03.75',
17011623 # A palette of colors to alternate thru
1702- [string[]]$colors = @('#112244','#224488',"#4488ff"),
1624+ [string[]]$Color = @('#112244','#224488',"#4488ff"),
17031625 # The type of the shape. (either Star or ConvexPolygon)
17041626 [ValidateSet("Star", "ConvexPolygon")]
17051627 [string]
@@ -1710,36 +1632,37 @@ function SVG.animate {
17101632 $AnimateOpacity
17111633 )
17121634
1713- $Splat = [Ordered]@{
1714- SideCount = $SideCount
1715- Fill = 'transparent'
1716- CenterX = $CenterX
1717- CenterY = $CenterY
1718- }
17191635
17201636 $shapeCommand = $ExecutionContext.SessionState.InvokeCommand.GetCommand("SVG.$ShapeType", "Function")
1721- SVG -ViewBox (($CenterX * 2), ($CenterY * 2)) @(
1722- SVG.rect -Width 1000% -Height 1000% -X -500% -Y -500% -Fill 'black'
1723-
1724- 0..($RepeatCount -1) |
1725- . $shapeCommand @Splat -Rotate {
1726- $_ * ($totalRotation / $RepeatCount)
1727- } -Radius {
1728- $Radius - (
1729- $_ * ($Radius / $RepeatCount)
1730- )
1731- } -Stroke {
1732- $colors[$_ % $colors.Length]
1733- } -Children {
1734- $toRotation = $(360 * ([Math]::Ceiling(($_ + 1)/10)))
1735- SVG.animateTransform -From "0 $centerX $centerY" -To "$toRotation $centerX $centerY" -Dur $duration -AttributeName transform -Type 'rotate' -RepeatCount 'indefinite'
1736- $lowOpacity = [double]($_)/$RepeatCount
1737- $highOpacity = 1.0 - [double]($_)/$RepeatCount
1738- if ($AnimateOpacity) {
1739- SVG.animate -AttributeName opacity -Values "$highOpacity;$lowOpacity;$highOpacity" -Dur $dur -RepeatCount 'indefinite'
1637+
1638+ foreach ($Sides in $SideCount) {
1639+ $Splat = [Ordered]@{
1640+ SideCount = $Sides
1641+ Fill = 'transparent'
1642+ CenterX = $CenterX
1643+ CenterY = $CenterY
1644+ }
1645+
1646+ SVG -ViewBox (($CenterX * 2), ($CenterY * 2)) @(
1647+ 0..($RepeatCount -1) |
1648+ & $shapeCommand @Splat -Rotate {
1649+ $_ * ($totalRotation / $RepeatCount)
1650+ } -Radius {
1651+ $Radius - (
1652+ $_ * ($Radius / $RepeatCount)
1653+ )
1654+ } -Stroke {
1655+ $Color[$_ % $color.Length]
1656+ } -Children {
1657+ $toRotation = $(360 * ([Math]::Ceiling(($_ + 1)/10)))
1658+ SVG.animateTransform -From "0 $centerX $centerY" -To "$toRotation $centerX $centerY" -Dur $duration -AttributeName transform -Type 'rotate' -RepeatCount 'indefinite'
1659+ $lowOpacity = [double]($_)/$RepeatCount
1660+ $highOpacity = 1.0 - [double]($_)/$RepeatCount
1661+ if ($AnimateOpacity) {
1662+ SVG.animate -AttributeName opacity -Values "$highOpacity;$lowOpacity;$highOpacity" -Dur $dur -RepeatCount 'indefinite'
1663+ }
17401664 }
1741- }
1742- )
1665+ )
17431666. Example
17441667 svg @(
17451668 svg.ConvexPolygon -SideCount 8 -Rotate (360/16) -Fill '#dd0000' -Stroke white -CenterX 100 -CenterY 100 -Radius 100
@@ -1800,6 +1723,11 @@ function SVG.animate {
18001723 svg.animate -Values '28;30;28' -Dur 5s -AttributeName font-size -RepeatDur 'indefinite'
18011724 )
18021725 ) -ViewBox 200,200
1726+ . Example
1727+ svg @(
1728+ svg.ConvexPolygon -SideCount 8 -Rotate (360/16) -Fill '#4488ff' -Stroke '#4488ff' -CenterX 100 -CenterY 100 -Radius 50
1729+ SVG.animate -AttributeName viewBox -Values "0 0 200 200; 50 50 100 100; 0 0 200 200" -RepeatCount 'indefinite' -Dur 3.9
1730+ ) -ViewBox 200,200
18031731. Link
18041732 https://pssvg.start-automating.com/SVG.animate
18051733. Link
0 commit comments