holey-shapes 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,49 @@
|
|
|
1
1
|
# holey-shapes
|
|
2
2
|
|
|
3
|
-
Solid, perforated
|
|
3
|
+
Solid, perforated shapes for the web and SwiftUI, with a connected extrusion and a built-in hover spin. Pick from 15 shapes, set the face and shadow colors, and control the hole layout.
|
|
4
4
|
|
|
5
5
|
[live playground](https://holey-shapes.aakashreddy.com) · [npm package](https://www.npmjs.com/package/holey-shapes) · [source](https://github.com/skyaara/holey-shapes)
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
9
|
+
### JavaScript
|
|
10
|
+
|
|
9
11
|
```sh
|
|
10
12
|
npm install holey-shapes
|
|
11
13
|
```
|
|
12
14
|
|
|
15
|
+
### Swift Package Manager
|
|
16
|
+
|
|
17
|
+
In Xcode, add `https://github.com/skyaara/holey-shapes` as a package dependency, or add it to `Package.swift`:
|
|
18
|
+
|
|
19
|
+
```swift
|
|
20
|
+
dependencies: [
|
|
21
|
+
.package(url: "https://github.com/skyaara/holey-shapes.git", from: "0.1.2")
|
|
22
|
+
]
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Then render any catalog shape directly in SwiftUI:
|
|
26
|
+
|
|
27
|
+
```swift
|
|
28
|
+
import HoleyShapes
|
|
29
|
+
import SwiftUI
|
|
30
|
+
|
|
31
|
+
struct Logo: View {
|
|
32
|
+
var body: some View {
|
|
33
|
+
HoleyShapeView(
|
|
34
|
+
.flower,
|
|
35
|
+
faceColor: HoleyColor(hex: "#FF4FA3"),
|
|
36
|
+
shadowColor: HoleyColor(hex: "#7A1748"),
|
|
37
|
+
holes: 6,
|
|
38
|
+
seed: 2
|
|
39
|
+
)
|
|
40
|
+
.frame(width: 240, height: 240)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The Swift SDK supports iOS 16+, macOS 13+, tvOS 16+, and visionOS 1+. It uses asynchronous SwiftUI `Canvas` rendering and caches the immutable shape paths, packing candidates, and finished hole layouts. The pointer hover animation follows Reduce Motion automatically.
|
|
46
|
+
|
|
13
47
|
## Render an SVG string
|
|
14
48
|
|
|
15
49
|
```js
|