updated createElements to support all kinds of elements including math and svg

Author: codeAdityagithub

src/components/App.tsx

@@ -14,10 +14,13 @@ const App = (props: any) => {
     // return <Test />;
     return (
         <>
-            <button onClick={() => visible.update((prev) => !prev)}>
+            <button
+                style={{ margin: 10 }}
+                onClick={() => visible.update((prev) => !prev)}
+            >
                 Show/Hide
             </button>
-            {() => (visible.value ? <Users /> : "Hidden")}
+            {() => (visible.value ? <Test /> : "Hidden")}
         </>
     );
     // return <StylesTest />;

src/components/Test.tsx

@@ -21,7 +21,7 @@ const Test = () => {
         };
     });
 
-    const h1ref = createRef<HTMLHeadingElement>();
+    const h1ref = createRef();
     // console.log("hello");
     return (
         <div>
@@ -30,6 +30,20 @@ const Test = () => {
                 <>{() => textSignal.value}</>
             </h1>
 
+            <svg
+                width="100"
+                height="100"
+            >
+                <circle
+                    cx="50"
+                    cy="50"
+                    r="40"
+                    stroke="green"
+                    stroke-width="4"
+                    fill="yellow"
+                />
+            </svg>
+
             {/* {() =>
                 showTextSignal.value ? (
                     <LazyFC2