Skip to content

Instantly share code, notes, and snippets.

@wcandillon
Created January 7, 2023 18:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wcandillon/7a0fb5cb8b1f00aeb154a4f8cacb674d to your computer and use it in GitHub Desktop.
Save wcandillon/7a0fb5cb8b1f00aeb154a4f8cacb674d to your computer and use it in GitHub Desktop.
Skia Shader Line SDF Starter
import React from "react";
import { Canvas, Skia, Shader, Fill } from "@shopify/react-native-skia";
const source = Skia.RuntimeEffect.Make(`
uniform float4 colors[4];
vec4 main(vec2 xy) {
return colors[1];
}`)!;
const colors = ["#dafb61", "#61DAFB", "#fb61da", "#61fbcf"].map((c) =>
Skia.Color(c)
);
export const SDF = () => {
return (
<Canvas style={{ flex: 1 }}>
<Fill>
<Shader source={source} uniforms={{ colors }} />
</Fill>
</Canvas>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment