squircle graph icon


squircle sounds kinda funny, but that is the latest shape apple has decided on.

an interesting mix of square and a circle, squircle utilises the .continuous property from rounded rectangle settings to make sure it gets the best from both worlds: squares area coverage, and circles soft and friendly look!

feel free to modify it further, there are no rules here πŸ‘Œ

/* For easy of copy/pastability, all code is in one bug chunk.
Be a dear and refactor this out any way you see fit 🀘 */

/* Idealy, you would NOT be using pre-defined constants or first view at all, only the code below the refactor line.
I am leaving the initial view here just for easier usage example or possible extraction. Hope that works πŸ‘Œ */

import SwiftUI

fileprivate let defaultFont = Font.system(size: 32, weight: .bold, design: .rounded)
fileprivate var defaultRadius: CGFloat = 24
fileprivate let lineWidth: CGFloat = 12

fileprivate let lightShadowColor = Color(.displayP3, red: 0.80, green: 0.80, blue: 1, opacity: 1.0)
fileprivate let darkShadowColor = Color(.displayP3, red: 0.1803, green: 0.0470, blue: 0.4627, opacity: 1.0)

fileprivate let yellowAccent = Color(.displayP3, red: 0.9647, green: 0.7607, blue: 0.3294, opacity: 1.0)
fileprivate let orangeAccent = Color(.displayP3, red: 0.9882, green: 0.4470, blue: 0.1764, opacity: 1.0)

struct SquircleGraphIconView: View {

var body: some View {
ZStack {
//------------------- REFACTOR ABOVE THIS LINE ---------------------------------------

struct SquircleGraphIcon: View {

Please please don't use the colors this way πŸ˜… I am only adding it here so you can have a preview
for both light and dark views. You should create a new semantic color in the assets and use it that way πŸ‘Œ
@Environment(\.colorScheme) var colorScheme

var body: some View {

let shadowColor = colorScheme == .dark ? darkShadowColor : lightShadowColor

VStack {
ZStack {
RoundedRectangle(cornerRadius: defaultRadius * 2, style: .continuous)
.shadow(color: shadowColor, radius: defaultRadius)
RoundedRectangle(cornerRadius: defaultRadius * 2, style: .continuous)
.trim(from: 0, to: 0.5)
.stroke(orangeAccent, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
Image(systemName: "photo.on.rectangle.angled")
.aspectRatio(1, contentMode: .fit)

Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it πŸ‘Œ
Consider helping this train rollin πŸš‚ on my Patreon ->

If you have any suggestions for improvements,
feel free to reach me at