Circles & Ellipses

import { Canvas, Circle } from "@shopify/react-native-skia";

const CircleDemo = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={r} cy={r} r={r} color="lightblue" />
    </Canvas>
  );
};

import { Canvas, Oval } from "@shopify/react-native-skia";

const OvalDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Oval x={64} y={0} width={128} height={256} color="lightblue" />
    </Canvas>
  );
};

import { Canvas, Circle } from "@shopify/react-native-skia";

const StrokedCircle = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle
        cx={128}
        cy={128}
        r={100}
        color="blue"
        style="stroke"
        strokeWidth={8}
      />
    </Canvas>
  );
};

import { Canvas, Circle, Group } from "@shopify/react-native-skia";

const ConcentricCircles = () => {
  const center = 128;
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Group>
        <Circle cx={center} cy={center} r={100} color="#E8F4F8" />
        <Circle cx={center} cy={center} r={75} color="#B8E1F0" />
        <Circle cx={center} cy={center} r={50} color="#88CEE8" />
        <Circle cx={center} cy={center} r={25} color="#51AFED" />
      </Group>
    </Canvas>
  );
};

import { Canvas, Circle, Group } from "@shopify/react-native-skia";

const BlendModeCircles = () => {
  const r = 64;
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={128} cy={r} r={r} color="magenta" />
        <Circle cx={64} cy={128} r={r} color="yellow" />
      </Group>
    </Canvas>
  );
};