css with a confidence inspiring comment
background: radial-gradient(423.17% 112.48% at 32.67% 115.21%, #FFD3D3 7.4%, #E7B9B9 24.14%, #596EBB 58.01%, #382A8B 96.1%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
relevant part of an svg when the screen is exported:
Which yielded this abomination of a code with startpoint and endpoint I have picked off the wall:
static func shouldMakeGradientLayer(frame: CGRect? = nil) -> CAGradientLayer {
let gradientLayer = CAGradientLayer()
// Define colors
gradientLayer.colors = [
UIColor(hex: 0xFFD3D3).cgColor,
UIColor(hex: 0xE7B9B9).cgColor,
UIColor(hex: 0x596EBB).cgColor,
UIColor(hex: 0x382A8B).cgColor
].reversed()
// Define locations
//background: radial-gradient(423.17% 112.48% at 32.67% 115.21%, #FFD3D3 7.4%, #E7B9B9 24.14%, #596EBB 58.01%, #382A8B 96.1%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
// gradientLayer.locations = [0.0739577, 0.241399, 0.580144, 0.961]
// make a guess :-[ gradientLayer.locations = [0, 0.8, 0.9, 1
// Apply the gradient transform
gradientLayer.type = .radial
// let transform = CATransform3DMakeRotation(-71.2512 * (.pi / 180), 0, 0, 1)
guard let w = frame?.width, let h = frame?.height else {
return gradientLayer
}
// gradientLayer.transform = CATransform3DConcat(CATransform3DMakeScale(964.534/w, 1675.8/w, 1), transform)
// gradientLayer.position = CGPoint(x: 122.5, y: 935.5)
gradientLayer.transform = CATransform3DMakeScale(964.534/w, 1675.8/h, 1)
let startPoint: CGPoint = CGPoint(x: 1, y: 0)
let endPoint: CGPoint = CGPoint(x: -2.2, y: 1.4)
gradientLayer.startPoint = startPoint
gradientLayer.endPoint = endPoint
if let frame = frame {
gradientLayer.frame = frame
}
return gradientLayer
}
Question #1: Is there an easier way to get radial gradient ?
or
Question #2: Should I have the UI designer isolate the parts of svg that I need as a background and I bite the bullet adding UIImageView as a background in each and every uiviewcontroller that needs it (30+ screens)?
maybe there is some straighforward way to map CSS percentages to locations array?