adding position

src/components/CodeBlocks/Css.tsx

@@ -15,6 +15,8 @@ export const CssControls = () => {
   );
   const { brightness, contrast } = filterProps;
   const [angle, setAngle] = useState(112);
+  const [posX, setPosX] = useState(50);
+  const [posY, setPosY] = useState(50);
   const [showTransparency, setShowTransparency] = useState(true);
   const [gradientType, setGradientType] = useState('linear');
   const [color1, setColor1] = useState({ r: 0, g: 0, b: 255, a: 1 });
@@ -27,20 +29,34 @@ export const CssControls = () => {
       color2: color2,
       angle,
       showTransparency,
+      posX,
+      posY,
     });
-  }, [setCssProps, showTransparency, contrast, brightness, angle, gradientType, color1, color2]);
+  }, [
+    setCssProps,
+    showTransparency,
+    contrast,
+    brightness,
+    angle,
+    gradientType,
+    color1,
+    color2,
+    posX,
+    posY,
+  ]);
 
-  const angleOrPos =
+  const gradientFirstParam =
     gradientType === 'linear'
       ? `${angle}deg`
       : gradientType === 'radial'
-      ? 'circle at center'
-      : `from ${angle}deg`;
+      ? `circle at ${posX}% ${posY}%`
+      : `from ${angle}deg at ${posX}% ${posY}%`;
+
   const gradientCss = `/* css gradient: second layer */
 {
   width: 250px;
   height: 250px;
-  background: ${gradientType}-gradient(${angleOrPos}, ${rgbToString(color1)}, ${rgbToString(
+  background: ${gradientType}-gradient(${gradientFirstParam}, ${rgbToString(color1)}, ${rgbToString(
     color2
   )})${showTransparency ? ', url(/checkers.png)' : ''};
   /* filter: contrast(${contrast}%) brightness(${brightness}%); */
@@ -96,20 +112,31 @@ export const CssControls = () => {
             name="angle"
             min={0}
             max={360}
+            tipFormatter={(v) => `${v}°`}
             onChange={(val: number) => setAngle(val)}
             value={typeof angle === 'number' ? angle : 0}
           />
         )}
-        {/* {['radial', 'conic'].includes(gradientType) && (
-          <SliderInput
-            label="position"
-            name="position"
-            min={0}
-            max={360}
-            onChange={(val: number) => setPosition(val)}
-            value={typeof position === 'number' ? position : 0}
-          />
-        )} */}
+        {['radial', 'conic'].includes(gradientType) && (
+          <>
+            <SliderInput
+              label="position X"
+              name="position X"
+              min={-50}
+              max={150}
+              onChange={(val: number) => setPosX(val)}
+              value={typeof posX === 'number' ? posX : 0}
+            />
+            <SliderInput
+              label="position Y"
+              name="position Y"
+              min={-50}
+              max={150}
+              onChange={(val: number) => setPosY(val)}
+              value={typeof posY === 'number' ? posY : 0}
+            />
+          </>
+        )}
         <Form.Item label="Show checkered">
           <Switch
             size="small"

src/components/CodeBlocks/Filter.tsx

@@ -26,13 +26,13 @@ export const FilterControls = () => {
     });
   }, [setFilterProps, contrast, brightness, inlineSvg]);
 
-  const { gradientType, angle, color1, color2 } = cssProps;
+  const { gradientType, angle, color1, color2, posX, posY } = cssProps;
   const gradientFirstParam =
     gradientType === 'linear'
       ? `${angle}deg`
       : gradientType === 'radial'
-      ? 'circle at center'
-      : `from ${angle}deg`;
+      ? `circle at ${posX}% ${posY}%`
+      : `from ${angle}deg at ${posX}% ${posY}%`;
   const cleanSvgString = `<svg viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='${baseFrequency}' numOctaves='${numOctaves}' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(#noiseFilter)'/></svg>`;
   const inlineSvgString = `url("data:image/svg+xml,${cleanSvgString.replace(
     symbols,
@@ -58,7 +58,7 @@ export const FilterControls = () => {
           }}
         />
       </pre>
-      <Form labelCol={{ span: 4 }}>
+      <Form>
         <SliderInput
           label="contrast"
           name="contrast"

src/components/CodeBlocks/Output.tsx

@@ -12,14 +12,14 @@ const Output = () => {
     shallow
   );
   const { size, baseFrequency, numOctaves } = svgProps;
-  const { gradientType, color1, color2, angle, showTransparency } = cssProps;
+  const { gradientType, color1, color2, angle, showTransparency, posX, posY } = cssProps;
   const { brightness, contrast } = filterProps;
   const gradientFirstParam =
     gradientType === 'linear'
       ? `${angle}deg`
       : gradientType === 'radial'
-      ? 'circle at center'
-      : `from ${angle}deg`;
+      ? `circle at ${posX}% ${posY}%`
+      : `from ${angle}deg at ${posX}% ${posY}%`;
   const svgString = `<!-- svg: first layer -->
 <svg viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'>
   <filter id='noiseFilter'>

src/components/CodeBlocks/SliderInput.tsx

@@ -22,6 +22,7 @@ const SliderInput = (props) => {
           min={min}
           value={value}
           onChange={onChange}
+          formatter={tipFormatter}
         />
       </SliderAndInput>
     </Form.Item>

src/components/CodeBlocks/Svg.tsx

@@ -38,7 +38,7 @@ export const SvgControls = () => {
           }}
         />
       </pre>
-      <Form labelCol={{ span: 4 }}>
+      <Form>
         <SliderInput
           label="SVG size"
           name="size"

src/components/store.tsx

@@ -6,7 +6,7 @@ export type InputState = {
   svgProps: Record<string, number>;
   setSvgProps: ({ size, baseFrequency, numOctaves }) => void;
   cssProps: Record<string, any>;
-  setCssProps: ({ gradientType, angle, color1, color2, showTransparency }) => void;
+  setCssProps: ({ gradientType, angle, color1, color2, showTransparency, posX, posY }) => void;
   filterProps: Record<string, number | boolean>;
   setFilterProps: ({ contrast, brightness, inlineSvg }) => void;
 };
@@ -28,10 +28,12 @@ export const useInputStore = create<InputState>((set) => ({
     color1: { r: 0, g: 0, b: 255, a: 1 },
     color2: { r: 0, g: 0, b: 0, a: 0 },
     showTransparency: true,
+    posX: 50,
+    posY: 50,
   },
-  setCssProps: ({ gradientType, angle, color1, color2, showTransparency }) =>
+  setCssProps: ({ gradientType, angle, color1, color2, showTransparency, posX, posY }) =>
     set({
-      cssProps: { gradientType, angle, color1, color2, showTransparency },
+      cssProps: { gradientType, angle, color1, color2, showTransparency, posX, posY },
     }),
   filterProps: {
     contrast: 170,