Depiction of Bat

src/App.js

@@ -47,6 +47,7 @@ import {
   SrishtiGuleriaRound,
   AparnaGoyalReddit,
   KratiMitraSignal,
+  MobasherahFalakBat,
 } from "./art/index";
 
 // An array of Art Components
@@ -94,6 +95,7 @@ let componentArr = [
   <SrishtiGuleriaRound />,
   <AparnaGoyalReddit />,
   <KratiMitraSignal />,
+  <MobasherahFalakBat />,
 ];
 
 function App() {

src/art/MobasherahFalakBat/MobasherahFalakBat.jsx

@@ -0,0 +1,34 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function MobasherahFalakBat() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Mobasherah Falak",
+    "gh-link": "https://github.com/Mobasherah12",
+    "art-name": "Bat",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.blocks}></div>
+        <div  className={style.blocks1}></div>
+        <div  className={style.blocks2}></div>
+        <div  className={style.blocks3}></div>
+        <div  className={style.blocks4}></div>
+        <div  className={style.blocks5}></div>
+        <div  className={style.blocks6}></div>
+        <div  className={style.blocks7}></div>
+        <div  className={style.blocks8}></div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default MobasherahFalakBat;

src/art/MobasherahFalakBat/style.module.css

@@ -0,0 +1,107 @@
+.container {
+  background-color: black;
+}
+
+.blocks {
+
+  height: 90px;
+  width: 90px;
+  background-color: gray, gray;
+  box-shadow: 30px 0 gray;
+  border-radius: 60%;
+
+}
+
+.blocks1 {
+  position: absolute;
+  bottom: 45px;
+  height: 90px;
+  width: 90px;
+  background-color: gray, gray;
+  box-shadow: 30px 0 gray;
+  border-radius: 60%;
+
+}
+
+.blocks2 {
+  position: relative;
+  bottom: 65px;
+  height: 5px;
+  width: 5px;
+  background-color: gray, gray;
+  box-shadow: 5px 0 white;
+  border-radius: 45%;
+
+}
+
+
+
+.blocks3 {
+  position: relative;
+  bottom: 44px;
+  height: 5px;
+  width: 5px;
+  background-color: rgb(238, 119, 23), rgb(238, 122, 14);
+  box-shadow: 5px 0 rgb(230, 121, 48);
+  border-radius: 45%;
+
+}
+
+.blocks4 {
+  position: relative;
+  top: 53px;
+  height: 5px;
+  width: 5px;
+  background-color: rgb(228, 188, 188), rgb(224, 172, 172);
+  box-shadow: 5px 0 rgb(230, 161, 161);
+  border-radius: 45%;
+
+}
+
+.blocks5 {
+  position: relative;
+  bottom: 27px;
+  height: 5px;
+  width: 5px;
+  background-color: rgb(245, 167, 238), rgb(241, 176, 241);
+  box-shadow: 5px 0 rgb(240, 170, 211);
+  border-radius: 45%;
+
+}
+
+.blocks6 {
+  position: relative;
+  top: 23px;
+  height: 5px;
+  width: 5px;
+  background-color: rgb(184, 12, 141), rgb(226, 27, 166);
+  box-shadow: 5px 0 rgb(180, 13, 130);
+  border-radius: 45%;
+
+}
+
+
+.blocks7 {
+  position: relative;
+  top: 111;
+  height: 5px;
+  width: 5px;
+  background-color: rgb(19, 182, 194), rgb(56, 140, 209);
+  box-shadow: 5px 0 rgb(18, 135, 170);
+  border-radius: 45%;
+
+}
+
+.blocks8 {
+  position: absolute;
+  top: 85px;
+  height: 5px;
+  width: 5px;
+  background-color: rgb(27, 19, 139), rgb(37, 15, 160);
+  box-shadow: 5px 0 rgb(61, 52, 187);
+  border-radius: 45%;
+
+}
+
+
+

src/art/index.js

@@ -40,4 +40,5 @@ export { default as RaveenaSachiniPowerSymbol } from "./RaveenaSachiniPowerSymbo
 export { default as RaveenaSachiniSwastika } from "./RaveenaSachiniSwastika/RaveenaSachiniSwastika";
 export { default as SrishtiGuleriaRound } from "./SrishtiGuleriaRound/SrishtiGuleriaRound";
 export { default as AparnaGoyalReddit } from "./AparnaGoyalReddit/AparnaGoyalReddit";
-export { default as KratiMitraSignal } from "./KratiMitraSignal/KratiMitraSignal";
+export { default as KratiMitraSignal } from "./KratiMitraSignal/KratiMitraSignal";
+export { default as MobasherahFalakBat } from "./MobasherahFalakBat/MobasherahFalakBat";