> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/shapes.md).

# shapes

[SwiftUI](/ios/swiftui.md) ⟩ shapes 

{% hint style="success" %} <mark style="color:yellow;">Circles</mark>, <mark style="color:yellow;">rectangles</mark>, and <mark style="color:yellow;">custom</mark> <mark style="color:orange;">paths</mark> etc. that you can <mark style="color:yellow;">trace</mark> and <mark style="color:yellow;">fill</mark> with a [color](/ios/swiftui/shapes/shapestyle/color.md), [gradient](/ios/custom/ext/gradient.md), or other pattern.
{% endhint %}

```swift
Circle()
    .fill(Color.red)                // Shape's method
    .frame(width: 50, height: 50)   // View's method (view modifier)
```

{% tabs %}
{% tab title="🔴 主題" %}

* [system colors](/ios/custom/ext/color+/system.md)
* [Matched Geometry Effect](/ios/swiftui/shapes/matched-geometry-effect.md)
* [Shape](/ios/swiftui/shapes/shape.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] QVIK ⟩ [Basics of SwiftUI Animation](https://qvik.com/news/basics-of-swiftui-animation/) #todo
* [ ] mobile01 ⟩ 雪白西丘斯 ⟩ \[第4單元] [SwiftUI 動畫與繪圖](https://www.mobile01.com/topicdetail.php?f=482\&t=6555364\&p=4)
* [ ] SwiftUI Lab ⟩ Advanced SwiftUI Animations ⟩
  * [x] [Part 1: Paths](https://swiftui-lab.com/swiftui-animations-part1/)
  * [ ] [Part 2: GeometryEffect](https://swiftui-lab.com/swiftui-animations-part2/)
  * [ ] [Part 3: AnimatableModifier](https://swiftui-lab.com/swiftui-animations-part3/)
  * [ ] Part 4: [TimelineView](https://swiftui-lab.com/swiftui-animations-part4/)
    {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Shapes](https://developer.apple.com/documentation/swiftui/shapes) ⟩ [Shape](https://developer.apple.com/documentation/swiftui/shape) ⟩ &#x20;

  * [.fill(\_:style:)](https://developer.apple.com/documentation/swiftui/shape/fill\(_:style:\))

  &#x20;
* SwiftUI ⟩ View ⟩ [Graphics and Rendering Modifiers](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering) ⟩&#x20;
  * [.drawingGroup()](https://developer.apple.com/documentation/swiftui/view/drawinggroup\(opaque:colormode:\)) - enabling Metal.
    {% endtab %}

{% tab title="👥 相關" %}

* [Animatable](/ios/swiftui/anim/animatable.md)
  {% endtab %}
  {% endtabs %}