Creating a tile art

src/App.js

@@ -40,7 +40,13 @@ import {
   HarshitSnowman,
   ApoorvaHat,
   CharuWhatsApp,
-  SreehariTarget
+  SreehariTarget,
+  RaveenaSachiniPeaceSymbol,
+  RaveenaSachiniPowerSymbol,
+  RaveenaSachiniSwastika,
+  SrishtiGuleriaRound,
+  AparnaGoyalReddit,
+  KratiMitraSignal,
 } from "./art/index";
 
 // An array of Art Components
@@ -81,7 +87,13 @@ let componentArr = [
   <SharvariBirajdarLoader />,
   <CharuWhatsApp />,
   <ApoorvaHat />,
-  <AryanJainGlobe />
+  <AryanJainGlobe />,
+  <RaveenaSachiniPowerSymbol />,
+  <RaveenaSachiniPeaceSymbol />,
+  <RaveenaSachiniSwastika />,
+  <SrishtiGuleriaRound />,
+  <AparnaGoyalReddit />,
+  <KratiMitraSignal />,
 ];
 
 function App() {

src/art/AparnaGoyalReddit/AparnaGoyalReddit.jsx

@@ -0,0 +1,36 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function AparnaGoyalReddit() {
+    let data = {
+        name: "Aparna Goyal",
+        "gh-link": "https://github.com/GeekyGoyal",
+        "art-name": "Reddit Logo",
+    };
+    return (
+      <div className={`${style.container} container`}>
+      {/* DO NOT edit the className above*/}
+
+      {/* your art blocks will come here */}
+       <div className={style.logo}>
+         <div className={style.face}>
+         <div className={style.lefteye}></div>
+         <div className={style.righteye}></div>
+         <div className={style.smile}>
+             <div className={style.round1}></div>
+             <div className={style.round2}></div>
+         </div>
+         </div>
+         <div className={style.leftear}></div>
+         <div className={style.rightear}></div>
+         <div className={style.head1}></div>
+         <div className={style.head2}></div>
+       </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default AparnaGoyalReddit;

src/art/AparnaGoyalReddit/style.module.css

@@ -0,0 +1,125 @@
+.container {
+  background-color: #222230;
+}
+
+.logo {
+  width: 150px;
+  height: 150px;
+  background-color: #ff4500;
+  border-radius: 50%;
+  outline:none;
+  position: relative; 
+}
+
+.face {
+  width: 85px;
+  height: 60px;
+  background-color: #fff;
+  position: absolute;
+  border-radius: 50%;
+  margin-top: 60px;
+  margin-left: 30px;
+}
+
+.lefteye {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background-color: #ff4500;
+  position: absolute;
+  margin-top: 16px;
+  margin-left: 15px;
+}
+
+.righteye {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background-color: #ff4500;
+  position: absolute;
+  margin-top: 16px;
+  margin-left: 55px;
+}
+
+.smile {
+  width: 53px;
+  height: 45px;
+  position: absolute;
+  border: 4px solid transparent;
+  border-bottom: 5px solid #ff4500;
+  border-radius: 50%;
+  top: 5px;
+  left: 18px;
+}
+
+.round1{
+  width: 3.5px;
+  height: 3.5px;
+  background-color: #ff4500;
+  position: absolute;
+  border-radius: 50%;
+  top: 29.75px;
+  left: 40px;
+}
+
+.round2{
+  width: 3.5px;
+  height: 3.5px;
+  background-color: #ff4500;
+  position: absolute;
+  border-radius: 50%;
+  top: 29.5px;
+  left: 1.77px;
+ }
+
+.leftear {
+  width: 21px;
+  height: 25px;
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: 65px;
+  left: 22px;
+}
+
+.rightear {
+  width: 21px;
+  height: 25px;
+  background-color: #fff;
+  position: absolute;
+  border-radius: 50%;
+  top: 65px;
+  right: 27px;
+}
+
+.head1{
+  width: 28px;
+  height: 4px;
+  background-color: #fff;
+  position: absolute;
+  top: 47px;
+  left: 63.5px;
+  transform: rotate(105deg);
+
+}
+.head2{
+width: 28px;
+  height: 4px;
+  background-color:#fff;
+  position: absolute;
+  top: 35px;
+  left: 79px;
+  transform: rotate(195deg);
+  border-bottom-right-radius:0.3rem ;
+}
+
+.head2::after{
+  content: "";
+  width: 15px;
+  height: 15px;
+  background-color:#fff;
+  border-radius: 50%;
+  position: absolute;
+  left: -6px;
+  top: -6px;
+}

src/art/KratiMitraSignal/KratiMitraSignal.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function KratiMitraSignal() {
+    let data = {
+        name: "Krati Mitra",
+        "gh-link": "https://github.com/kratimitra",
+        "art-name": "Signal Logo",
+      };
+    return (
+        <div className={`${style.container} container`}>
+            <div className={style.wrapper}>
+                <div className={style.outer}>
+                    <div className={style.inner}>
+                      <div className={style.uppertriangle}></div>
+                    	<div className={style.triangle}></div>
+                    	<div className={style.outertriangle}>
+                    	</div>
+                     </div>
+
+
+                </div>
+            </div>
+            <Credit data={data}/>
+        </div>
+    )
+}
+
+export default KratiMitraSignal

src/art/KratiMitraSignal/style.module.css

@@ -0,0 +1,60 @@
+.container {
+  background-color: rgb(52, 70, 235);
+}
+.outer {
+  display: inline-flex;
+  border-radius: 60% 60% 60% 60%;
+  height: 120px;
+  background-color: rgb(52, 70, 235);
+  align-items: center;
+  border: 4px dashed white;
+  width: 120px;
+  justify-content: center;
+}
+
+.inner {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  justify-content: center;
+  display: inline-flex;
+  background-color: white;
+  align-items: center;
+  border-radius: 60% 60% 60% 60%;
+}
+
+.uppertriangle {
+  position: absolute;
+  transform: rotate(223deg);
+  top: 87px;
+  height: 40px;
+  width: 40px;
+  right: 82px;
+  border-right: dotted 20px transparent;
+  border-bottom: solid 30px white;
+  border-left: dashed 20px transparent;
+}
+
+.triangle {
+  position: absolute;
+  transform: rotate(225deg);
+  top: 79px;
+  left: -17px;
+  width: 10px;
+  height: 50px;
+  border-right: dotted 17px transparent;
+  border-bottom: solid 35px rgb(52, 70, 235);
+  border-left: dashed 17px transparent;
+}
+
+.outertriangle {
+  position: absolute;
+  transform: rotate(345deg);
+  top: 45.5px;
+  width: 1px;
+  left: -5px;
+  height: 1px;
+  border-right: dotted 30px transparent;
+  border-bottom: dashed 50px white;
+  border-left: dotted 30px transparent;
+}

src/art/MrunaliniTile/MrunaliniTile.jsx

@@ -0,0 +1,31 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+// Replace ComponentName with YourName followed by ArtName.
+// For example, SalilReactLogo or SalilNaikReactLogo
+// component name, file name and folder name should be same. 
+
+function ComponentName() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "",
+    "gh-link": "",
+    "art-name": "",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+
+
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default ComponentName;

src/art/MrunaliniTile/style.module.css

@@ -0,0 +1,3 @@
+.container {
+  background-color: pink;
+}

src/art/RaveenaSachiniPeaceSymbol/RaveenaSachiniPeaceSymbol.jsx

@@ -0,0 +1,36 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+// Replace ComponentName with YourName followed by ArtName.
+// For example, SalilReactLogo or SalilNaikReactLogo
+// component name, file name and folder name should be same. 
+
+function RaveenaSachiniPeaceSymbol() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Raveena Sachini",
+    "gh-link": "https://github.com/raveena69",
+    "art-name": "Symbol of Peace",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.outCircle}>
+          <div className={style.innerCircle}>
+            <div className={style.innerLongVertical}></div>
+            <div className={style.innerShortLeft}></div>
+            <div className={style.innerShortRight}></div>
+          </div>
+        </div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default RaveenaSachiniPeaceSymbol;