🛶 New arts. (#192)

* made the header responsive, updated the readme * update: readme * Blossom Art by Shwetal Soni * 🐛 Add Instagram logo (#16) Co-authored-by: Salil Naik <salil.naik27@gmail.com> * Update App.js * Delete package-lock.json * 🍀 Blossom Art by Shwetal Soni (#22) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Blossom Art by Shwetal Soni * Update App.js * Delete package-lock.json Co-authored-by: Salil Naik <salil.naik27@gmail.com> * Rotating Cube using CSS (#23) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Rotating Cube Added Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🍇 Facebook logo (#28) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Add Facebook Logo Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ⭐ Captain America shield (#30) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * added captain america shield Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ❤ YouTube Logo (#31) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added YouTube logo * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * minor css fixes * 🔵 Circle component (#50) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * adding Circle Component Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ⚽ Created a figure with circles and different figures * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * circle design added * Update PepsiLogo.jsx * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🧵 Added a Git Logo (#60) * Added a Git Logo * Delete package-lock.json * Update style.module.css * Update TarunGitLogo.jsx Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 👌 RitikaAgrawalMoneyHeistMask (#69) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Money Heist Mask CSS Art Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🥏 A simple pre-loader. (#70) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added Pre-loader logo * Delete package-lock.json * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🎨 Made an Abstract Art. (#73) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added Abstract Art Co-authored-by: Salil Naik <salil.naik27@gmail.com> * add: new arts * add: index folder in art folder to export all the files * 🧧 Added Adobe Logo (#81) * 🎟 Xiaomi logo (#92) * 🏥 Made Aarogya Setu logo (#96) * Shridhar Git logo * Shridhar Aarogya Setu logo * Shridhar Aarogya Setu logo * Git logo(my logo) files deleted * Updated color scheme of circle and sphere (#102) * Added Globe By Aryan * updated colors * 🍚 Added Chrome Logo (#104) * 🥟 LinkedIn * add: more arts * 💝 Added like feature * trial * Added Tile Art * Added WDG Logo * Fixed: Credits Style Rules * Added like button * Fix: creditsRef current * Added env, firebase and like-unlike feature * Updated env example * Removed firebase analytics to prevent credentials leak * Deploy add-like-feature branch to vercel * Lazy load IP * Added double-tap to like * fix: like and caption UI * fix: like popup UI and UX * minor chanes * Cancel render of like buttons and pulsing heart in case env is missing * minor change Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * added like feature * ⏰ Clock Using Css (#107) * 📴 Add LG logo (#120) * 👨‍🦳 Made an Old Man Illustration (#144) * Shridhar Git logo * Shridhar Old Man Illustration * Shridhar Old Man Illustration * Shridhar Old Man Illustration * add: new arts * add: new arts * updated readme * 🥚 Myntra Logo and Spiral Animation on Updates Branch (#148) * Create SrishtiGuleriaMyntra.jsx * Create style.module.css * Create SrishtiGuleriaSprial.jsx * Create style.module.css * ⛄ Snowman (#154) * 🎩 Made a hat (#83) * added hat * Added a Hat * 🍧 WhatsApp Logo (#149) * 🎯 Added Target Logo (issue-127)(Changes made) (#151) * 🍰 Adding new arts. * made the header responsive, updated the readme * update: readme * Blossom Art by Shwetal Soni * 🐛 Add Instagram logo (#16) Co-authored-by: Salil Naik <salil.naik27@gmail.com> * Update App.js * Delete package-lock.json * 🍀 Blossom Art by Shwetal Soni (#22) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Blossom Art by Shwetal Soni * Update App.js * Delete package-lock.json Co-authored-by: Salil Naik <salil.naik27@gmail.com> * Rotating Cube using CSS (#23) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Rotating Cube Added Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🍇 Facebook logo (#28) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Add Facebook Logo Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ⭐ Captain America shield (#30) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * added captain america shield Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ❤ YouTube Logo (#31) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added YouTube logo * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * minor css fixes * 🔵 Circle component (#50) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * adding Circle Component Co-authored-by: Salil Naik <salil.naik27@gmail.com> * ⚽ Created a figure with circles and different figures * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * circle design added * Update PepsiLogo.jsx * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🧵 Added a Git Logo (#60) * Added a Git Logo * Delete package-lock.json * Update style.module.css * Update TarunGitLogo.jsx Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 👌 RitikaAgrawalMoneyHeistMask (#69) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Money Heist Mask CSS Art Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🥏 A simple pre-loader. (#70) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added Pre-loader logo * Delete package-lock.json * Update style.module.css Co-authored-by: Salil Naik <salil.naik27@gmail.com> * 🎨 Made an Abstract Art. (#73) * 🖼 Updates (#21) * made the header responsive, updated the readme * update: readme * Added Abstract Art Co-authored-by: Salil Naik <salil.naik27@gmail.com> * add: new arts * add: index folder in art folder to export all the files * 🧧 Added Adobe Logo (#81) * 🎟 Xiaomi logo (#92) * 🏥 Made Aarogya Setu logo (#96) * Shridhar Git logo * Shridhar Aarogya Setu logo * Shridhar Aarogya Setu logo * Git logo(my logo) files deleted * Updated color scheme of circle and sphere (#102) * Added Globe By Aryan * updated colors * 🍚 Added Chrome Logo (#104) * 🥟 LinkedIn * add: more arts * 💝 Added like feature * trial * Added Tile Art * Added WDG Logo * Fixed: Credits Style Rules * Added like button * Fix: creditsRef current * Added env, firebase and like-unlike feature * Updated env example * Removed firebase analytics to prevent credentials leak * Deploy add-like-feature branch to vercel * Lazy load IP * Added double-tap to like * fix: like and caption UI * fix: like popup UI and UX * minor chanes * Cancel render of like buttons and pulsing heart in case env is missing * minor change Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * added like feature * ⏰ Clock Using Css (#107) * 📴 Add LG logo (#120) * 👨‍🦳 Made an Old Man Illustration (#144) * Shridhar Git logo * Shridhar Old Man Illustration * Shridhar Old Man Illustration * Shridhar Old Man Illustration * add: new arts * add: new arts * updated readme Co-authored-by: shwetalsoni <sonishwetal704@gmail.com> Co-authored-by: Harshit Pandey <69616901+HarshitPandey251@users.noreply.github.com> Co-authored-by: Shwetal Soni <57187745+shwetalsoni@users.noreply.github.com> Co-authored-by: Subhashree <47693419+micky2001@users.noreply.github.com> Co-authored-by: Antra Verma <51118723+mis-coder@users.noreply.github.com> Co-authored-by: Fpj-11 <76908206+Fpj-11@users.noreply.github.com> Co-authored-by: Suraj Jha <surajsjjha@gmail.com> Co-authored-by: Sheetal Jain <64475191+sheetalj2205@users.noreply.github.com> Co-authored-by: tarunsingh7379 <72147696+tarunsingh7379@users.noreply.github.com> Co-authored-by: Ritika Agrawal <65513097+Ritika-Agrawal811@users.noreply.github.com> Co-authored-by: Sharvari Birajdar <78595265+sharvariiii@users.noreply.github.com> Co-authored-by: Ayush Yadav <72045437+Retroid-007@users.noreply.github.com> Co-authored-by: Vidipta <42835714+Vidipta@users.noreply.github.com> Co-authored-by: Shridhar-dev <52820662+Shridhar-dev@users.noreply.github.com> Co-authored-by: coolAryan <42404394+coolAryan@users.noreply.github.com> Co-authored-by: pankaj892 <31444506+pankaj892@users.noreply.github.com> Co-authored-by: Shreya Shahi <shreyashahi1398@gmail.com> Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * Added Target Logo (issue-127)(Changes made) Co-authored-by: Salil Naik <salil.naik27@gmail.com> Co-authored-by: shwetalsoni <sonishwetal704@gmail.com> Co-authored-by: Harshit Pandey <69616901+HarshitPandey251@users.noreply.github.com> Co-authored-by: Shwetal Soni <57187745+shwetalsoni@users.noreply.github.com> Co-authored-by: Subhashree <47693419+micky2001@users.noreply.github.com> Co-authored-by: Antra Verma <51118723+mis-coder@users.noreply.github.com> Co-authored-by: Fpj-11 <76908206+Fpj-11@users.noreply.github.com> Co-authored-by: Suraj Jha <surajsjjha@gmail.com> Co-authored-by: Sheetal Jain <64475191+sheetalj2205@users.noreply.github.com> Co-authored-by: tarunsingh7379 <72147696+tarunsingh7379@users.noreply.github.com> Co-authored-by: Ritika Agrawal <65513097+Ritika-Agrawal811@users.noreply.github.com> Co-authored-by: Sharvari Birajdar <78595265+sharvariiii@users.noreply.github.com> Co-authored-by: Ayush Yadav <72045437+Retroid-007@users.noreply.github.com> Co-authored-by: Vidipta <42835714+Vidipta@users.noreply.github.com> Co-authored-by: Shridhar-dev <52820662+Shridhar-dev@users.noreply.github.com> Co-authored-by: coolAryan <42404394+coolAryan@users.noreply.github.com> Co-authored-by: pankaj892 <31444506+pankaj892@users.noreply.github.com> Co-authored-by: Shreya Shahi <shreyashahi1398@gmail.com> Co-authored-by: Jaagrav <jaagravseal03@gmail.com> * add: new arts * 🍎 Made Reddit Logo (#156) * Made Reddit Logo using CSS Fixes #138 * Create style.module.css * 🟩 Square Animation (#160) * ☮Add Peace Symbol (#163) * Added Swastika Logo * Update the RaveenaSachiniSwastika.css file * Added the Power Symbol * Delete the RaveenaSachiniPowerSymbol Directory * Add the RaveenaSachiniPowerSymbol Directory * Updated the RaveenaSachiniPowerSymbol Directory * Updated the RaveenaSachiniPowerSymbol Directory * Update the RaveenaSachiniSwastika Directory * Add RaveenaSachiniPowerSymbol Directory * Add RaveenaSachiniPeaceSymbol Directory * Made Power Symbol (#162) * Added Swastika Logo * Update the RaveenaSachiniSwastika.css file * Added the Power Symbol * Delete the RaveenaSachiniPowerSymbol Directory * Add the RaveenaSachiniPowerSymbol Directory * Updated the RaveenaSachiniPowerSymbol Directory * Updated the RaveenaSachiniPowerSymbol Directory * Update the RaveenaSachiniSwastika Directory * Add RaveenaSachiniPowerSymbol Directory * ⏹ Made Swastika Symbol (#164) * Added Swastika Logo * Update the RaveenaSachiniSwastika.css file * Added the Power Symbol * Delete the RaveenaSachiniPowerSymbol Directory * Add the RaveenaSachiniPowerSymbol Directory * Updated the RaveenaSachiniPowerSymbol Directory * Updated the RaveenaSachiniPowerSymbol Directory * Update the RaveenaSachiniSwastika Directory * Add RaveenaSachiniPowerSymbol Directory * Add RaveenaSachiniPeaceSymbol Directory * Add RaveenaSachiniSwastika Directory * issue-137:Adding Signal Logo (#171) * add: new arts * added beats audio logo * added beats audio logo * Adding Smoking Cup ClipArt * DarkXamper added Pokeball It's a pokeball, made in pure css. Pokeball can also store pokemons. * � New Arts. * Solved bugs in new arts Co-authored-by: Salil Naik <salil.naik27@gmail.com> Co-authored-by: DarkXamper <krishguptano12@gmail.com> Co-authored-by: Jaagrav <jaagravseal03@gmail.com> Co-authored-by: shwetalsoni <sonishwetal704@gmail.com> Co-authored-by: Harshit Pandey <69616901+HarshitPandey251@users.noreply.github.com> Co-authored-by: Shwetal Soni <57187745+shwetalsoni@users.noreply.github.com> Co-authored-by: Subhashree <47693419+micky2001@users.noreply.github.com> Co-authored-by: Antra Verma <51118723+mis-coder@users.noreply.github.com> Co-authored-by: Fpj-11 <76908206+Fpj-11@users.noreply.github.com> Co-authored-by: Suraj Jha <surajsjjha@gmail.com> Co-authored-by: Sheetal Jain <64475191+sheetalj2205@users.noreply.github.com> Co-authored-by: tarunsingh7379 <72147696+tarunsingh7379@users.noreply.github.com> Co-authored-by: Ritika Agrawal <65513097+Ritika-Agrawal811@users.noreply.github.com> Co-authored-by: Sharvari Birajdar <78595265+sharvariiii@users.noreply.github.com> Co-authored-by: Ayush Yadav <72045437+Retroid-007@users.noreply.github.com> Co-authored-by: Vidipta <42835714+Vidipta@users.noreply.github.com> Co-authored-by: Shridhar-dev <52820662+Shridhar-dev@users.noreply.github.com> Co-authored-by: coolAryan <42404394+coolAryan@users.noreply.github.com> Co-authored-by: pankaj892 <31444506+pankaj892@users.noreply.github.com> Co-authored-by: Shreya Shahi <shreyashahi1398@gmail.com> Co-authored-by: Srishti Guleria <61888364+sg7801@users.noreply.github.com> Co-authored-by: Apoorva <63863726+apoorva567@users.noreply.github.com> Co-authored-by: CHARU SACHDEVA <60181628+Charu271@users.noreply.github.com> Co-authored-by: Sreehari A <sreeharianilkumar1@gmail.com> Co-authored-by: Aparna Goyal <75560383+GeekyGoyal@users.noreply.github.com> Co-authored-by: Raveena Sachini Amarasiriwardena <58651579+raveena69@users.noreply.github.com> Co-authored-by: kratimitra <65777327+kratimitra@users.noreply.github.com> Co-authored-by: swapnilr17 <swapnilr1700@gmail.com> Co-authored-by: anuj-kumary <anujf0510@gmail.com>
salil-naik · Jul 11, 2021 · 1afe361 · 1afe361
1 parent 1d21aa7
commit 1afe361
Show file tree

Hide file tree

Showing 8 changed files with 321 additions and 1 deletion.
diff --git a/src/App.js b/src/App.js
@@ -47,6 +47,9 @@ import {
   SrishtiGuleriaRound,
   AparnaGoyalReddit,
   KratiMitraSignal,
+  DarkXamperPokeball,
+  SwapnilRawatBeats,
+  AnujkumarYadavSmokingCup,
 } from "./art/index";
 
 // An array of Art Components
@@ -94,6 +97,9 @@ let componentArr = [
   <SrishtiGuleriaRound />,
   <AparnaGoyalReddit />,
   <KratiMitraSignal />,
+  <DarkXamperPokeball />,
+  <SwapnilRawatBeats />,
+  <AnujkumarYadavSmokingCup />,
 ];
 
 function App() {

diff --git a/src/art/AnujkumarYadavSmokingCup/AnujkumarYadavSmokingCup.jsx b/src/art/AnujkumarYadavSmokingCup/AnujkumarYadavSmokingCup.jsx
@@ -0,0 +1,39 @@
+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 AnujkumarYadavSmokingCup() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Anujkumar Yadav",
+    "gh-link": "https://github.com/anuj-kumary",
+    "art-name": "Smoking Cup",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+      <div className="wrapper">
+            <div className={style.cup}>
+              <span className={style.handle}></span>
+              <span className={style.smoke}></span>
+              <h3>Eat <br />
+              Sleep <br />
+              <span className={style.code}>Code</span> <br />
+              Repeat</h3>
+            </div>
+          </div>
+        </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default AnujkumarYadavSmokingCup;
diff --git a/src/art/AnujkumarYadavSmokingCup/style.module.css b/src/art/AnujkumarYadavSmokingCup/style.module.css
@@ -0,0 +1,118 @@
+.container{
+  background: #00bfb6;
+}
+
+.wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.cup {
+  width: 150px;
+  height: 150px;
+  background: #111;
+  border-radius: 5px;
+  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.3),
+              inset -2px -2px 3px 1px rgba(0, 0, 0, .2);
+  position: relative;
+}
+
+.handle {
+  position: absolute;
+  width: 30px;
+  height: 75px;
+  right: -19px;
+  top: 55px;
+  border: 10px solid #111;
+  border-left: 0px;
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
+  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.3),
+    inset -2px -2px 3px 1px rgba(0, 0, 0, .2);
+}
+h3{
+  color: #fff;
+  text-align: center;
+  padding-top: 1rem;
+}
+.code {
+  color: #fdd47a;;
+}
+.smoke:before {
+  position: absolute;
+  content: "";
+  background: transparent;
+  width: 145px;
+  height: 30px;
+  top: -35px;
+  box-shadow: 0px 25px 20px -9px #e5e5e5;
+  opacity: 0;
+  animation: smoke 4s linear infinite;
+  transition: 0.5s linear;
+}
+
+.smoke:after {
+  position: absolute;
+  content: "";
+  background: transparent;
+  width: 145px;
+  height: 30px;
+  top: -35px;
+  box-shadow: 0px 25px 20px -9px #e5e5e5;
+  opacity: 0;
+  animation: smoke1 4s linear 2s infinite;
+  transition: 0.5s linear;
+}
+
+@keyframes smoke {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-35px);
+    opacity: 1;
+  }
+  70% {
+    transform: translateY(-55px);
+    opacity: 1;
+    width: 75%;
+    margin-left: 20px;
+  }
+
+  100% {
+    transform: translateY(-115px);
+    opacity: 0.2;
+    width: 20%;
+    margin-left: 40px;
+  }
+}
+
+@keyframes smoke1 {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-45px);
+    opacity: 1;
+  }
+  70% {
+    transform: translateY(-65px);
+    opacity: 1;
+    width: 50%;
+    margin-left: 30px;
+  }
+
+  100% {
+    transform: translateY(-145px);
+    opacity: 0.2;
+    width: 0%;
+    margin-left: 60px;
+  }
+}
+
+
+
+
+
diff --git a/src/art/DarkXamperPokeball/DarkXamperPokeball.jsx b/src/art/DarkXamperPokeball/DarkXamperPokeball.jsx
@@ -0,0 +1,33 @@
+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 DarkXamperPokeball() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "DarkXamper",
+    "gh-link": "https://github.com/DarkXamper",
+    "art-name": "Pokeball"
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+      <div className={style.c1}>
+        <div className={style.rect1}></div>
+        <div className={style.Scircle}>
+          <div className={style.SScircle}></div>
+        </div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default DarkXamperPokeball;
diff --git a/src/art/DarkXamperPokeball/style.module.css b/src/art/DarkXamperPokeball/style.module.css
@@ -0,0 +1,53 @@
+.container {
+  background-color: #e4e4e4;
+}
+
+.c1 * {
+  box-sizing: unset;
+}
+
+.c1 {
+  width: 140px;
+  height: 140px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  bottom: 0;
+  border-radius: 50%;
+  border: 6px solid #1b1b1b;
+  overflow: hidden;
+  box-shadow: 0 0 10px grey;
+  background-color: #fff;
+}
+.c1 .rect1 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 48%;
+  width: 140px;
+  background: red;
+  border-bottom: 6px solid #1b1b1b;
+}
+.c1 .Scircle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 6px solid #1b1b1b;
+  background: white;
+}
+.Scircle .SScircle {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 1px solid #1b1b1b;
+  background: white;
+}
diff --git a/src/art/SwapnilRawatBeats/SwapnilRawatBeats.jsx b/src/art/SwapnilRawatBeats/SwapnilRawatBeats.jsx
@@ -0,0 +1,29 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+
+function SwapnilRawatBeats() {
+  // Enter your name, github url and art-name below
+  let data = {
+    name: "Swapnil Rawat",
+    "gh-link": "https://www.github.com/swapnilr17",
+    "art-name": "Beats Logo",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the line above*/}
+
+      {/* your art blocks will come here */}
+    <div className={style.containerouter}>
+        <div class={style.circlered}>
+        <div class={style.circlewhite}></div>
+        <div class={style.rect}></div>
+        </div>
+    </div>
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default SwapnilRawatBeats;
diff --git a/src/art/SwapnilRawatBeats/style.module.css b/src/art/SwapnilRawatBeats/style.module.css
@@ -0,0 +1,39 @@
+.container {
+  background-color:#E01F3D;
+}
+
+.containerouter{
+  width:200px;
+  height:200px;
+  background-color:#fff;
+  border-radius:50%;
+  position:relative;
+  display:flex;
+  align-items: center;
+  justify-content: center;  
+}
+.rect{
+  width: 14px;
+  height: 100px;
+  background: #fff;
+  position: absolute;
+  top: -6px;
+  left: 40px;
+}
+.circlered{
+  overflow:hidden;
+  width:180px;
+  height:180px;
+  border-radius: 100%;
+  background:#E01F3D;
+  position:relative;
+}
+.circlewhite{
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: #E01F3D;
+  border: 15px solid #fff;
+  margin:0 auto;
+  margin-top: 40px;
+}
diff --git a/src/art/index.js b/src/art/index.js
@@ -40,4 +40,7 @@ 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 DarkXamperPokeball } from "./DarkXamperPokeball/DarkXamperPokeball";
+export { default as SwapnilRawatBeats } from "./SwapnilRawatBeats/SwapnilRawatBeats";
+export { default as AnujkumarYadavSmokingCup } from "./AnujkumarYadavSmokingCup/AnujkumarYadavSmokingCup";