50+ Awesome CSS Drawing Examples for your #100DaysOfCode Inspiration
Tags: css, webdev, beginners, javascript
Published: 2020-06-15 10:04:56

This post was originally published at <a href="https://www.devaradise.com/awesome-css-drawing-examples">https://www.devaradise.com/awesome-css-drawing-examples</a>

<!-- wp:paragraph -->
<p>CSS drawing is an art of designing a creative object or drawing with only using CSS codes. It is a fun challenge that shows us what front-end developers can achieve with pure CSS.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sometime, a css drawing is also added with some animation to make it more interesting.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When I first saw CSS drawings, I didn't believe that CSS can be used to create such drawings. I thought it was designed by some design apps like Adobe Illustrator or CorelDraw until I saw the codes that it was a <a href="https://www.devaradise.com/tag/pure-css3-tutorials">pure CSS</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Most of the styles in the drawing use the combination of gradients, pseudo-classes (:after and :before), and css3 animations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Recently, i saw in Twitter #100DaysOfCode that many developers are showcasing their CSS drawings. There were doing amazing work, but i saw that some of them have lack design inspirations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Since I am a <a href="https://www.devaradise.com/how-to-become-front-end-developer">front-end developer</a> as well, I can understand that sometimes we don't have any idea of what we should make, especially when it is about design or drawing.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I remember that I ever saw many awesome CSS drawings showcased in <a rel="noreferrer noopener" href="https://codepen.io/" target="_blank">Codepen</a>. Then, I come to the idea that picking and collecting the best of them will be helpful to provide some inspirations for other developers, especially newbies.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, in this post, I make a list of the best CSS drawings that you can use as your inspirations. Let's have a look!</p>
<!-- /wp:paragraph -->

<div id="ez-toc-container" class="ez-toc-v2_0_11 counter-hierarchy ez-toc-grey"><div class="ez-toc-title-container">Table of Contents</div><nav><ul class="ez-toc-list ez-toc-list-level-1" style="display: block;"><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-1" href="#Best_CSS_Drawing_Examples" title="Best CSS Drawing Examples">Best CSS Drawing Examples</a></li><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-25" href="#What_You_Can_Do_With_A_Single_Div" title="What You Can Do With A Single Div">What You Can Do With A Single Div</a></li><li class="ez-toc-page-1 ez-toc-heading-level-2"><a class="ez-toc-link ez-toc-heading-40" href="#Beginner_Friendly" title="Beginner Friendly">Beginner Friendly</a></li></ul></nav></div>

<!-- wp:heading -->
<h2 id="Best_CSS_Drawing_Examples">Best CSS Drawing Examples</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>1. At The Wall | Pure CSS Drawing by Atanas Atanasov</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2312,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/scriptex/pen/eLWdKN" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/at-the-wall-pure-css-drawing.jpg" alt="At the wall pure css" class="wp-image-2312"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>2. The king and the fly by Alvaro Montoro</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2310,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/alvaromontoro/pen/dyojLvx" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/the-king-and-the-fly-css-drawing.jpg" alt="The king and the fly" class="wp-image-2310"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>3. Tron Skyline by Jordy Rue</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2311,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a class="" href="https://codepen.io/jordirue/pen/NWGjwzz" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/tron-skyline.jpg" alt="Tron Skyline" class="wp-image-2311"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>4. Street View &amp; Car Animation by Mohammed Alozaibi</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2307,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/malozaibi/pen/JRjEPy" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/street-view-car-animation.jpg" alt="Street view car animation" class="wp-image-2307"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>5. Codevember Day 23: pure CSS drawing, life of a programmer! by Nooray Yemon</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2287,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/yemon/pen/pdKjpo" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/life-of-a-programmer-e1591968519450.jpg" alt="The life of a programmer" class="wp-image-2287"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>6. The Boy and his Drone by Tucker Massad</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2308,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/tuckermassad/pen/vwabdX" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/the-boy-and-his-drone-css-drawing.jpg" alt="The boy and his drone css drawing" class="wp-image-2308"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>7. CSS Lighthouse (Pure CSS Drawing/Animation) by Tucker Massad</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2316,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/tuckermassad/pen/bPEEmL" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/css-lighthouse.jpg" alt="Css lighthouse" class="wp-image-2316"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>8. The Flying Robot (Pure CSS Drawing/Animation) by Tucker Massad</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2309,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/tuckermassad/pen/mYzEBB" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/the-flying-robot.jpg" alt="The flying robot pure css" class="wp-image-2309"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>9. Kitty and The Submarine (Pure CSS Drawing/Animation) by Tucker Massad</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2319,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/tuckermassad/pen/oVzgPa" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/kitty-and-the-submarine.jpg" alt="Kitti and the submarine" class="wp-image-2319"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>10. CodePen Home Night Train CSS drawing + animation by Eina O</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2288,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/thelittleblacksmith/pen/jVLdEz" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/night-train.jpg" alt="Night train" class="wp-image-2288"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>11. Pure CSS Responsive French Press by Dario Corsi</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2345,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/dariocorsi/pen/GqrJEG" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-responsive-frech-press.jpg" alt="Pure CSS responsive French press" class="wp-image-2345"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>12. Tank All The Things by Hugo Giraudel</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2332,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/HugoGiraudel/pen/xoAvk" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/tank-all-the-things.jpg" alt="Tank all the things" class="wp-image-2332"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>13. Pure CSS Mini Thor by Matheus Ferreira</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2349,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/matheuswf95/pen/KmMEXO" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-drawing-mini-thor.jpg" alt="Pure CSS Drawing Mini Thor" class="wp-image-2349"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>14. Electric Piano by Josh Fry</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2328,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/joshfry/pen/utHlL" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/electric-piano.jpg" alt="Electric Piano" class="wp-image-2328"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>15. CSS Illustration - Xbox Controller by Ellie</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2315,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/ellie_html/pen/QWjyPWQ" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/css-illustration-xbox-controller.jpg" alt="" class="wp-image-2315"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3> 16. Pure CSS Watch by Ellie</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2292,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/ellie_html/pen/oNjJXBY" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-watch.jpg" alt="Pure CSS Watch" class="wp-image-2292"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>17. Digital Radio by Ellie</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2317,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/ellie_html/pen/LYpKyva" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/digital-radio.jpg" alt="Digital radio" class="wp-image-2317"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>18. City | Pure CSS Drawing by Serg</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2314,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/Nihaprezz/pen/MBgdvy" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/city-pure-css-drawing.jpg" alt="City pure css drawing" class="wp-image-2314"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>19. Save and Love your Home by Ahmad Shadeed</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2293,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/shadeed/pen/xbXKqL" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/save-and-love-your-home.jpg" alt="Save and love your home" class="wp-image-2293"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>20. For Beatrix by Paolo Duzioni</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2318,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/Paolo-Duzioni/pen/YxYaaW" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/for-beatrix.jpg" alt="For beatrix" class="wp-image-2318"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>21. Coderbits Logo in Pure CSS by Aleks</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2327,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/achudars/pen/cinde" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/coderbits-logo-in-pure-cess.jpg" alt="Coderbits logo pure css" class="wp-image-2327"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>22. Our Happy Place by Paolo Duzioni</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2341,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/Paolo-Duzioni/pen/NvyQQJ" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/our-happy-place.jpg" alt="Our Happy Place" class="wp-image-2341"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>23. SNES Controller by Time Pietrusky</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2331,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/TimPietrusky/pen/oJIcy" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/snes-controller.jpg" alt="SNES Controller" class="wp-image-2331"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 id="What_You_Can_Do_With_A_Single_Div">What You Can Do With A Single Div</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this section, you will see the list of CSS Drawings that not only use a pure CSS but also only use a single div tag. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>24. Single Div CSS Tesla Cybertruck by Lynn Fisher</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2299,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/lynnandtonic/pen/NWWmzjr" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-css-tesla-cybertruck.jpg" alt="Single div css tesla cybertruck" class="wp-image-2299"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>25. Single Div CSS Book Search by Lynn Fisher</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2297,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-css-book-search.jpg" alt="Single div css book search" class="wp-image-2297"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>26. Pure CSS Single Div Up House by Patricia Masigla</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2290,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/pbmasigla/pen/aMRwXV" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-single-div-up-house.jpg" alt="Pure css single div up house" class="wp-image-2290"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>27. Single Div Accordion Animated by Dan Wilson</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2294,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/danwilson/pen/BRdJVZ" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-accordion-animated.jpg" alt="Single div accordion animated" class="wp-image-2294"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>28. Pure CSS Wall-E by Peter Butcher</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2291,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/pbutcher/pen/JMRKpG" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-wall-e.jpg" alt="Pure css wall-e" class="wp-image-2291"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>29. K2SO by Jon Kantner</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2302,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/jkantner/pen/XMLVXa" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-k2s0.jpg" alt="Single div k2s0" class="wp-image-2302"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>30. Single Div CSS - Camera by Laura Louise</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2298,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/lauralouise/pen/geBmjE" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-css-camera.jpg" alt="SIngle div css camera" class="wp-image-2298"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>31. Single Div Challenge by yuanchuan</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2295,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/yuanchuan/pen/OJPdpKv" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-challenge-by-yuanchuan.jpg" alt="Single div challenge" class="wp-image-2295"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>32. The Eye by Melissa Cabral</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2304,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/melissacabral/pen/vGvrNb" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-the-eye.jpg" alt="Single div the eye" class="wp-image-2304"/></a></figure>
<!-- /wp:image -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":3} -->
<h3>33. Single Div Violin by Tricia Katz</h3>
<!-- /wp:heading --></div></div>
<!-- /wp:group -->

<!-- wp:image {"id":2305,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/triciaakatz/pen/xdWPYx" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-violin.jpg" alt="Single div violin" class="wp-image-2305"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>34. Single Div Grace Hopper by Tricia Katz</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2300,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/triciaakatz/pen/eEyYNP" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-grace-hopper.jpg" alt="" class="wp-image-2300"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>35. Single Div Tea Cup by Tricia Katz</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2303,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/triciaakatz/pen/zKgKoN" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-tea-cup.jpg" alt="Single div tea cup" class="wp-image-2303"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>36. Single div icons by Chris Ota</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2301,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-icons.jpg" alt="Single div icons" class="wp-image-2301"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>37. Codevember 2016: Sunset by Smokie Lee</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2296,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/xtoq/pen/rOrzYE" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/single-div-codevember-2016-sunset.jpg" alt="Single div sunset" class="wp-image-2296"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 id="Beginner_Friendly">Beginner Friendly</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>38. Pure CSS Emoji faces by Abou Bakr Magdy</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2289,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/Abobakr/pen/NRRNbk" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-emoji-faces.jpg" alt="Pure CSS Emoji" class="wp-image-2289"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>39. Avocados pure CSS by Julie Park</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2313,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/juliepark/pen/dBXXNZ" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/avocado-pure-css-e1592195376908.jpg" alt="Avocado pure CSS" class="wp-image-2313"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>40. Pure CSS Drawing Dexter by Chi Ho Liu</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2340,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/chichichi/pen/QdvdMB" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-drawing-dexter.jpg" alt="Pure CSS Drawing Dexter" class="wp-image-2340"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>41. Sleeping Cat by Anastasia Goodwin</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2306,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/agoodwin/pen/ypeWYE" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/sleeping-cat-css-drawing.jpg" alt="Sleeping cat css drawing" class="wp-image-2306"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>42. A Slice of cake by Paolo Duzioni</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2348,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/Paolo-Duzioni/pen/brxrwd" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/slice-of-cake.jpg" alt="Slice of cake" class="wp-image-2348"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>43. Hijabi Girl by Norhan_ms</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2347,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/norhanms/pen/pWGRNm" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/css-drawing-hijabi-girl.jpg" alt="CSS Drawing Hijabi Girl" class="wp-image-2347"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>44. Apeach (Kakao Friends) by zinee</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2346,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/zineeworld/pen/ObpbGJ" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/apeach-kakao-friends.jpg" alt="Apeach Kakao Friends" class="wp-image-2346"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>45. Penguin CSS Drawing by Alexander D. Cardossi</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2344,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/adcar/pen/xpwEav" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/penguin-css-drawing.jpg" alt="Penguin CSS Drawing" class="wp-image-2344"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>46. Pure CSS Cactus by Kara Luton</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2343,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/karaluton/pen/gNbrEp" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-cactus.jpg" alt="Pure CSS Cactus" class="wp-image-2343"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>47. Pure CSS Gamerica Logo by Hugo Giraudel</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2330,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/HugoGiraudel/pen/yIKHq" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/pure-css-gamerica-logo.jpg" alt="Pure CSS Gamerica Logo" class="wp-image-2330"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>48. CSS Sagwa by Jasmine Wright</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2342,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/jnwright/pen/GxrLyj" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/css-sagwa.jpg" alt="CSS Sagwa" class="wp-image-2342"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>49. Full CSS Penguin by fanchou</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2329,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/fanchou/pen/vChIj" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/full-css-penguin.jpg" alt="Full CSS Penguin" class="wp-image-2329"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>50. Cheshire by Nicolas Slatiner</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2326,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://codepen.io/slatiner/pen/movzf" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/chehire.jpg" alt="Cheshire" class="wp-image-2326"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>51. Bonus : A Collection of Single Div CSS Drawing Project by Lynn Fisher</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2350,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><a href="https://github.com/lynnandtonic/a-single-div" target="_blank" rel="nofollow noopener"><img src="https://www.devaradise.com/wp-content/uploads/2020/06/a-single-div.jpg" alt="" class="wp-image-2350"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That's all. If you know other examples that are not be included here, feel free to suggest them in the comment below!</p>
<!-- /wp:paragraph -->