Significant 'banding' issues when exporting gradients and blurs

[mswpearson]

Hi I'm trying to recreate a 'mesh gradient' style image from a Figma design in Skia but am having some issue with exporting the image to the device where I'm seeing significant 'banding' and am looking for some advice.

The design is a simple radial gradient in the background with some random shapes layered on top in differing colours. Each shape / layer is then blurred, creating a sort of mesh gradient effect.

Pre-blur (figma):

Post-blur (figma):

The exported result from drawing in Skia:

Hopefully you can see the significant 'banding' artefacts on the final image (the banding doesn't seem to happen as much when previewing the image on the device, only when exporting the image.

Here is some sample code for drawing the design (note this is wrapped in a 1080x1920 canvas):

import { Group, Path, RadialGradient, vec, Rect, Oval, BlurMask } from '@shopify/react-native-skia'
import { DEFAULT_EXPORT_CARD_HEIGHT, DEFAULT_EXPORT_CARD_WIDTH } from './CardPreview'

const shape1Path = 'M746 382L1109.73 1063H382.269L746 382Z'
const shape2Path =
	'M0.153606 557.741L21.6384 212.332C22.3436 200.995 34.741 194.37 44.5584 200.084L133.11 251.63C142.009 256.81 153.379 251.876 155.675 241.839L208.165 12.3848C211.381 -1.6727 230.496 -3.84749 236.787 9.1284L394.939 335.317C398.403 342.461 395.814 351.067 388.983 355.114L23.1747 571.825C12.6295 578.072 -0.607304 569.974 0.153606 557.741Z'
const shape3Path =
	'M254.21 710.646L611.727 264.126C616.435 258.246 624.728 256.678 631.258 260.434L785.668 349.247C796.592 355.53 809.995 346.621 808.431 334.117L738.818 -222.465C738.628 -223.978 738.214 -225.454 737.587 -226.844L624.71 -477.331C618.679 -490.713 599.082 -488.708 595.887 -474.381L542.682 -235.771C538.595 -217.442 511.447 -221.233 512.537 -239.98L522.603 -413.08C523.186 -423.107 514.096 -430.956 504.262 -428.917L247.995 -375.796C242.881 -374.736 238.664 -371.136 236.815 -366.253L143.475 -119.784C142.991 -118.506 142.338 -117.299 141.533 -116.195L3.17854 73.5449C-2.76211 81.6919 0.685599 93.2581 10.1173 96.823L376.569 235.328C384.355 238.271 388.349 246.908 385.549 254.747L227.913 695.966C222.116 712.192 243.44 724.096 254.21 710.646Z'
const shape4Path =
	'M-540.174 1654.63L-339.707 1316.91C-332.535 1304.83 -334.534 1289.41 -344.551 1279.56L-399.016 1225.97C-416.662 1208.61 -407.403 1178.57 -383.045 1174.16L-59.8816 1115.59C-48.2854 1113.49 -38.9334 1104.91 -35.8521 1093.53L260.146 0.827029L66.5179 1291.47C61.3324 1326.03 108.873 1340.79 124.172 1309.36L249.49 1051.97C258.773 1032.91 284.186 1028.87 298.915 1044.13L604.537 1360.7C619.698 1376.4 613.965 1402.48 593.616 1410.38L-401.448 1796.55C-412.545 1800.85 -425.134 1798.32 -433.7 1790.05L-535.118 1692.2C-545.31 1682.36 -547.403 1666.81 -540.174 1654.63Z'

const tempoColours = {
	radial: {
		start: '#3F3F3F',
		end: '#323232',
	},
	shape1: '#303030',
	shape2: '#171717',
	shape3: '#595959',
	shape4: '#404040',
	shape5: '#646464',
}

const blurAmount = 380

export const NativeGradientTestCard = () => {
	const colors = tempoColours

	return (
		<>
			<Rect x={0} y={0} width={DEFAULT_EXPORT_CARD_WIDTH} height={DEFAULT_EXPORT_CARD_HEIGHT}>
				<RadialGradient
					c={vec(DEFAULT_EXPORT_CARD_WIDTH - 50, DEFAULT_EXPORT_CARD_HEIGHT / 4)}
					r={DEFAULT_EXPORT_CARD_WIDTH}
					colors={[colors.radial.start, colors.radial.end]}
				/>
				<Group transform={[{ rotate: 0.35 }, { translateX: -125 }, { translateY: -900 }]}>
					<Oval height={2404} width={909} color={colors.shape5}>
						<BlurMask blur={blurAmount} />
					</Oval>
				</Group>

				<Group transform={[{ translateX: 700 }, { translateY: 750 }]}>
					<Path path={shape2Path} color={colors.shape2}>
						<BlurMask blur={blurAmount} />
					</Path>
				</Group>
				<Group transform={[{ translateX: 450 }, { translateY: 0 }]}>
					<Path path={shape3Path} color={colors.shape3}>
						<BlurMask blur={blurAmount} />
					</Path>
				</Group>
				<Group transform={[{ rotate: -0.15 }, { scaleX: 0.8 }, { translateX: -50 }, { translateY: 0 }]}>
					<Path path={shape4Path} color={colors.shape4}>
						<BlurMask blur={blurAmount} />
					</Path>
				</Group>
				<Group transform={[{ scale: 0.65 }, { translateX: -250 }, { translateY: 1650 }]}>
					<Path path={shape1Path} color={colors.shape1}>
						<BlurMask blur={blurAmount} />
					</Path>
				</Group>
			</Rect>
		</>
	)
}

And how I am doing the export:

export const exportToTempFile = async ({
	cardToRender,
	filename,
	aspectRatio,
}: ExportToTempFileProps): Promise<string> => {
	const { exportWidth, exportHeight } = getExportCardDimensions(aspectRatio)
	const picture = await drawAsPicture(cardToRender, rect(0, 0, exportWidth, exportHeight))
	const surface = Skia.Surface.Make(exportWidth, exportHeight)
	if (!surface) {
		throw new Error('Failed to create Skia surface')
	}
	const canvas = surface.getCanvas()
	canvas.clear(Skia.Color('black'))
	canvas.drawPicture(picture)
	const image = surface.makeImageSnapshot()
	const base64 = image.encodeToBase64(ImageFormat.PNG)
	const tempFileRef = `${ReactNativeBlobUtil.fs.dirs.CacheDir}/${filename}`
	await ReactNativeBlobUtil.fs.writeFile(tempFileRef, base64, 'base64')

	return isAndroid() ? `file://${tempFileRef}` : tempFileRef
}

Is there anything I'm missing / tricks that I could use to reduce the banding artefacts here? I have tried exporting the entire SVG including blurs from Figma and simply drawing it as an ImageSVG but this produces the same effect.

Appreciate any thoughts!