{"id":21692,"date":"2019-11-06T15:20:32","date_gmt":"2019-11-06T15:20:32","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=21692"},"modified":"2019-11-06T15:20:32","modified_gmt":"2019-11-06T15:20:32","slug":"30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/","title":{"rendered":"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills"},"content":{"rendered":"<p>Creative coding and front-end development playground <a href=\"https:\/\/codepen.io\/\">CodePen<\/a> has established itself as an amazing community for testing and showcasing HTML, CSS and JavaScript code snippets. It\u2019s both an online code editor and learning environment that enables developers to write and experiment with code right in the browser and see the results as they build. Browsing, forking and playing with so-called \u201cpens\u201d is immensely valuable to understand how they were created and how code works.<\/p>\n<p>CodePen now features the work of more than 1.8 million designers and front-end developers, and it can feel overwhelming to discover the pens that are most useful to you. So, in this article, we round up some of the most inspiring CodePen demos from the last few months. We cover CSS selectors, animating with CSS and SVG, cutting edge features like CSS variables and variable fonts, CSS Grid layouts, JavaScript frameworks and more. One of the big benefits of CodePen is that it\u2019s very visual but the focus isn\u2019t just on eye candy. Most of the pens in this post also come with tutorials, so you can really learn how the effects were created and sharpen your front-end development skills. Let\u2019s get stuck in!<\/p>\n<h2>CSS Selectors<\/h2>\n<h3>1. How well do you know CSS selectors?<\/h3>\n<p class=\"codepen\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"600\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"pehaa\" data-slug-hash=\"ROapJZ\" data-pen-title=\"QUIZ: Well aimed? How well do you know CSS selectors?\">See the Pen <a href=\"https:\/\/codepen.io\/pehaa\/pen\/ROapJZ\"><br \/>\nQUIZ: Well aimed? How well do you know CSS selectors?<\/a> by Paulina Hetman (<a href=\"https:\/\/codepen.io\/pehaa\">@pehaa<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Front-end and WordPress developer Paulina Hetman aka <a href=\"https:\/\/twitter.com\/pehaa\">PeHaa<\/a> shares <a href=\"https:\/\/pepsized.com\/on-how-i-approach-teaching-css-codepen-quizzes-and-playing-cards\/\">a series of three quizzes around CSS selectors<\/a> and explains her process of teaching web development. In the example above your task is to decide whether the selector targets exactly the highlighted element. Choosing the right selector and understanding the cascade, inheritance, and specificity is crucial, PeHaa says, as often you need to override existing styles and you don\u2019t have control over the HTML structure.<\/p>\n<h2>SVG<\/h2>\n<h3>2. Animating SVG with CSS<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"html,result\" data-user=\"hopearmstrong\" data-slug-hash=\"qwdBwR\" data-pen-title=\"Melting Popsicle SVG Animated with CSS \/ Sass\">See the Pen <a href=\"https:\/\/codepen.io\/hopearmstrong\/pen\/qwdBwR\"><br \/>\nMelting Popsicle SVG Animated with CSS \/ Sass<\/a> by Hope Armstrong (<a href=\"https:\/\/codepen.io\/hopearmstrong\">@hopearmstrong<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Hope Armstrong, a product designer at Treehouse, has written <a href=\"https:\/\/blog.logrocket.com\/animating-svg-with-css-83e8e27d739c\/\">an article<\/a> demonstrating why the simple combination of SVG and CSS is appealing and how to make these lightweight, scalable animations! There are various CodePens, including the melting popsicle above, which Hope animated by changing the position of the drops using <code>transform: translate<\/code>. To make them disappear, she animated the <code>opacity<\/code>.<\/p>\n<h3>3. Figuring out CSS Animation Properties with a Magic Kittencorn<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"html,result\" data-user=\"huijing\" data-slug-hash=\"YmXBwb\" data-pen-title=\"Magical kittencorn\">See the Pen <a href=\"https:\/\/codepen.io\/huijing\/pen\/YmXBwb\"><br \/>\nMagical kittencorn<\/a> by Chen Hui Jing (<a href=\"https:\/\/codepen.io\/huijing\">@huijing<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Chen Hui Jing <a href=\"https:\/\/www.chenhuijing.com\/blog\/figuring-out-css-animation-with-magic-kittencorn\/\">builds and animates the unofficial mascot of SingaporeCSS<\/a> and explains the basics of CSS and SVG animation.<\/p>\n<h3>4. Animate a Blob of Text with SVG and Text Clipping<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"ZachSaucier\" data-slug-hash=\"gZzPgQ\" data-pen-title=\"Animated blob SVG text clipping effect - Pt. 6\">See the Pen <a href=\"https:\/\/codepen.io\/ZachSaucier\/pen\/gZzPgQ\"><br \/>\nAnimated blob SVG text clipping effect &#8211; Pt. 6<\/a> by Zach Saucier (<a href=\"https:\/\/codepen.io\/ZachSaucier\">@ZachSaucier<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/zachsaucier.com\/\">Zach Saucier<\/a> walks us through <a href=\"https:\/\/css-tricks.com\/animate-blob-text-with-svg-text-clipping\/\">creating a neat blob reveal animation with SVG and clip-path<\/a>. To make the colours change for every new set of words as in the example above, Zach used JavaScript (and moved the CSS animation that was hiding the text lines to the JavaScript).<\/p>\n<h3>5. Color this sofa! \u2013 SVG + Blend Mode trick<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"kylewetton\" data-slug-hash=\"OJLmJoV\" data-pen-title=\"Color this sofa! \u2013 SVG + Blend Mode trick\">See the Pen <a href=\"https:\/\/codepen.io\/kylewetton\/pen\/OJLmJoV\"><br \/>\nColor this sofa! \u2013 SVG + Blend Mode trick<\/a> by Kyle Wetton (<a href=\"https:\/\/codepen.io\/kylewetton\">@kylewetton<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/twitter.com\/kylewetton\">Kyle Wetton<\/a> has created an amazing demo that lets you colour a sofa using some smart SVG and CSS blend mode trickery. Take the PNG of an object, save it as a specific size, draw an SVG vector around the section you want to colour change, photoshop this section of the PNG white, and keep the blank space. Stack these in CSS, and set the blend mode of the SVG to multiply, then simply change out the fill colour.<\/p>\n<h2>CSS Variables<\/h2>\n<h3>6. Using CSS Custom Properties to Wrangle Variations in Keyframe Animations<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"sandrina-p\" data-slug-hash=\"axVeGg\" data-pen-title=\"Dynamic CSS @keyframes w\/ CSS Vanilla\">See the Pen <a href=\"https:\/\/codepen.io\/sandrina-p\/pen\/axVeGg\"><br \/>\nDynamic CSS @keyframes w\/ CSS Vanilla<\/a> by Sandrina Pereira (<a href=\"https:\/\/codepen.io\/sandrina-p\">@sandrina-p<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>In <a href=\"https:\/\/css-tricks.com\/using-custom-properties-to-wrangle-variations-in-keyframe-animations\/\">this article over at CSS Tricks<\/a>, front-end developer <a href=\"http:\/\/www.sandrina-p.net\/\">Sandrina Pereira<\/a> explains how CSS keyframes work and how we can enhance them with CSS and a touch of custom properties aka CSS variables. Also see Mauricio Palma\u2019s article on <a href=\"https:\/\/www.heartinternet.uk\/blog\/getting-started-with-css-variables\/\">Getting Started with CSS Variables<\/a> here on the Heart Internet blog as well as Val Head\u2019s post on <a href=\"https:\/\/valhead.com\/2017\/07\/21\/animating-with-css-variables\/\">Animating with CSS Variables<\/a>, which also includes some ways to combine CSS custom properties and keyframe animations.<\/p>\n<h3>7. Dynamic SVG Animation with CSS Variables<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"lisilinhart\" data-slug-hash=\"NVKOPo\" data-pen-title=\"SVG Animation with Speech Recognition\">See the Pen <a href=\"https:\/\/codepen.io\/lisilinhart\/pen\/NVKOPo\"><br \/>\nSVG Animation with Speech Recognition<\/a> by Lisi (<a href=\"https:\/\/codepen.io\/lisilinhart\">@lisilinhart<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/lisilinhart.info\">Lisi Linhart<\/a> has written <a href=\"https:\/\/lisilinhart.info\/posts\/svg-animation-css-variables\">a terrific tutorial<\/a> on how to make an SVG animation with speech recognition that changes colour based on CSS variables and use it alongside animation library GSAP. Also check out Lisi\u2019s <a href=\"https:\/\/www.heartinternet.uk\/blog\/the-developers-guide-to-native-web-animation\/\">developer\u2019s guide to native web animation<\/a> and watch her Pixel Pioneers talk on <a href=\"https:\/\/www.youtube.com\/watch?v=mwqZ9p2nZbg\">Practical Web Animation<\/a> (and see the <a href=\"https:\/\/noti.st\/lisi\/r0Oeb4\/practical-web-animation\">slides<\/a> and <a href=\"https:\/\/codepen.io\/collection\/DgxkRE\/\">CodePens<\/a> she created for the presentation).<\/p>\n<h3>8. Logical Operations with CSS Variables<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"thebabydino\" data-slug-hash=\"LYPyRQY\" data-pen-title=\"Building compound shape: rotating faces into final position\">See the Pen <a href=\"https:\/\/codepen.io\/thebabydino\/pen\/LYPyRQY\"><br \/>\nBuilding compound shape: rotating faces into final position<\/a> by Ana Tudor (<a href=\"https:\/\/codepen.io\/thebabydino\">@thebabydino<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/twitter.com\/anatudor\">Ana Tudor<\/a> explores <a href=\"https:\/\/css-tricks.com\/logical-operations-with-css-variables\/\">the interesting possibilities of logical operations using CSS custom properties<\/a>. The article came about because Ana often wished to perform logical operations on switch variables (a variable that&#8217;s either 0 or 1, a concept that&#8217;s explained in greater detail <a href=\"https:\/\/css-tricks.com\/dry-switching-with-css-variables-the-difference-of-one-declaration\/\">in this post<\/a>). Her article explains what <code>calc()<\/code> formulas we need to use for each logical operation.<\/p>\n<h3>9. Animating a Hue around the Colour Wheel with Houdini<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"danwilson\" data-slug-hash=\"ZEzjbRe\" data-pen-title=\"HSL Houdini\">See the Pen <a href=\"https:\/\/codepen.io\/danwilson\/pen\/ZEzjbRe\"><br \/>\nHSL Houdini<\/a> by Dan Wilson (<a href=\"https:\/\/codepen.io\/danwilson\">@danwilson<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>In <a href=\"https:\/\/danielcwilson.com\/blog\/2019\/09\/huedini\/\">this post<\/a>, front-end developer <a href=\"https:\/\/twitter.com\/dancwilson\">Dan Wilson<\/a> explores how colour interpolation works on the web, looks at our options to animate a hue around a colour wheel, and explains how Houdini gives us a mechanism to do this and use custom properties to animate the hue. Also don\u2019t miss Dan\u2019s article on <a href=\"https:\/\/www.heartinternet.uk\/blog\/discover-the-power-of-css-transforms\/\">the power of CSS transforms<\/a> here on the Heart Internet blog.<\/p>\n<h2>Variable Fonts<\/h2>\n<h3>10. Variable Font Animation with CSS and Splitting JS<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"michellebarker\" data-slug-hash=\"bPEWGK\" data-pen-title=\"Variable font animation\">See the Pen <a href=\"https:\/\/codepen.io\/michellebarker\/pen\/bPEWGK\"><br \/>\nVariable font animation<\/a> by Michelle Barker (<a href=\"https:\/\/codepen.io\/michellebarker\">@michellebarker<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/twitter.com\/CSSInRealLife\">Michelle Barker<\/a> explains <a href=\"https:\/\/css-irl.info\/variable-font-animation-with-css-and-splitting-js\/\">how she made an animated variable font demo<\/a> with CSS and JavaScript library <a href=\"https:\/\/splitting.js.org\/\">Splitting.js<\/a> and followed it up with <a href=\"https:\/\/css-irl.info\/how-to-accessibly-split-text\/\">another article on how to split text for animations with accessibility in mind<\/a>. For more Splittling.js demos, check out <a href=\"https:\/\/twitter.com\/hexagoncircle\">Ryan Mulligan<\/a>\u2019s series on animated verbs (<a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/MWgbqON\">Part I<\/a>, <a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/OJLxWKq\">Part II<\/a> and <a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/oNvMLRQ\">Part III<\/a>).<\/p>\n<h3>11. Variable font resize on device orientation<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"mandymichael\" data-slug-hash=\"JjPwMNW\" data-pen-title=\"Variable font resize on device orientation\">See the Pen <a href=\"https:\/\/codepen.io\/mandymichael\/pen\/JjPwMNW\"><br \/>\nVariable font resize on device orientation<\/a> by Mandy Michael (<a href=\"https:\/\/codepen.io\/mandymichael\">@mandymichael<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/twitter.com\/Mandy_Kerr\/status\/1176478770686906368\">Mandy Michael<\/a> created this demo which detects the device orientation and updates the variable font weight axis (plus a transform) using the Google Fonts V2 API. Load in <a href=\"https:\/\/tympanus.us10.list-manage.com\/track\/click?u=10ffec652b0f54fe5d8682ac0&amp;id=b39036752e&amp;e=7e458f326f\">debug mode<\/a> to see it in action and make sure to turn on motion and rotation info in iOS Safari\u2019s preferences to try it out for yourself. Also check out <a href=\"https:\/\/codepen.io\/collection\/XqRLMb\/\">Mandy\u2019s many other variable fonts experiments<\/a>.<\/p>\n<h3>12. Compressa<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"JuanFuentes\" data-slug-hash=\"rgXKGQ\" data-pen-title=\"Variable Fonts | Compressa\">See the Pen <a href=\"https:\/\/codepen.io\/JuanFuentes\/pen\/rgXKGQ\"><br \/>\nVariable Fonts | Compressa<\/a> by Juan Fuentes (<a href=\"https:\/\/codepen.io\/JuanFuentes\">@JuanFuentes<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>A little bit of fun animating different axes of a variable font by creative developer <a href=\"https:\/\/twitter.com\/juanfuent_es\">Juan Fuentes<\/a>, using JavaScript, CSS 3D and <code>requestAnimationFrame<\/code>. Learn more about this font at <a href=\"https:\/\/v-fonts.com\/fonts\/compressa-vf\">v-fonts.com<\/a>.<\/p>\n<p><em>For more on variable fonts, check out Jason Pamental\u2019s introductory guide, <\/em><a href=\"https:\/\/www.heartinternet.uk\/blog\/better-web-typography-a-guide-to-variable-fonts\/\"><em>Better Web Typography<\/em><\/a><em>, here on the Heart Internet blog.\u00a0<\/em><\/p>\n<h2>CSS Grid<\/h2>\n<h3>13. Building a Scrapbook Layout with CSS Grid<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"michellebarker\" data-slug-hash=\"gOYqmJQ\" data-preview=\"true\" data-pen-title=\"Recreating my child\u2019s pre-school scrapbook with CSS Grid\">See the Pen <a href=\"https:\/\/codepen.io\/michellebarker\/pen\/gOYqmJQ\"><br \/>\nRecreating my child\u2019s pre-school scrapbook with CSS Grid<\/a> by Michelle Barker (<a href=\"https:\/\/codepen.io\/michellebarker\">@michellebarker<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/css-irl.info\/building-a-scrapbook-layout-with-css-grid\/\">Another tutorial<\/a> by Michelle Barker. This time she writes about her process of recreating her son\u2019s pre-school scrapbook layout with CSS Grid. She even built a <a href=\"https:\/\/codepen.io\/michellebarker\/full\/zYOMYWv\">compound grid generator<\/a>, a little tool that\u2019s also available on CodePen. Also make sure to check out Michelle\u2019s <a href=\"https:\/\/css-irl.info\/debugging-css-grid-part-1-understanding-implicit-tracks\/\">three<\/a>&#8211;<a href=\"https:\/\/css-irl.info\/debugging-css-grid-part-2-what-the-fraction\/\">part<\/a> <a href=\"https:\/\/css-irl.info\/debugging-css-grid-part-3-auto-flow-order-and-item-placement\/\">article<\/a> on debugging CSS Grid.<\/p>\n<h3>14. CSS Grid: Magazine Layouts<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"oliviale\" data-slug-hash=\"GRKQoKM\" data-pen-title=\"CSS Grid: Magazine Layouts\">See the Pen <a href=\"https:\/\/codepen.io\/oliviale\/pen\/GRKQoKM\"><br \/>\nCSS Grid: Magazine Layouts<\/a> by Olivia Ng (<a href=\"https:\/\/codepen.io\/oliviale\">@oliviale<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This CodePen by <a href=\"https:\/\/twitter.com\/meowlivia_\">Olivia Ng<\/a> showcases a range of layouts that are possible with CSS Grid. Just click &#8216;Next&#8217; on the top right to see more layouts and be blown away how complex they get. Also make sure to read Olivia\u2019s post on <a href=\"https:\/\/codepen.io\/oliviale\/post\/get-started-css-grid\">how you can get started with CSS Grid<\/a> and check out <a href=\"https:\/\/codepen.io\/collection\/DQvYpQ\">her other CSS Grid experiments<\/a>.<\/p>\n<h3>15. Grid Experiment No. 7<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"julesforrest\" data-slug-hash=\"VqXvgQ\" data-pen-title=\"Grid Experiment No. 7\">See the Pen <a href=\"https:\/\/codepen.io\/julesforrest\/pen\/VqXvgQ\"><br \/>\nGrid Experiment No. 7<\/a> by Jules Forrest (<a href=\"https:\/\/codepen.io\/julesforrest\">@julesforrest<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Product designer <a href=\"https:\/\/julesforrest.com\/\">Jules Forrest<\/a> has been posting some excellent <a href=\"https:\/\/codepen.io\/collection\/AOWqJq\">CSS Grid experiments<\/a> like this one that mimics the menu of New York City cafe Russ &amp; Daughters. It\u2019s a fantastic example of what\u2019s possible with Grid and how print can inspire new layouts on the web.<\/p>\n<h3>16. Procedurally Generated CSS Numbers<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"cobra_winfrey\" data-slug-hash=\"xvjbYy\" data-pen-title=\"Procedurally Generated CSS Numbers\">See the Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/xvjbYy\"><br \/>\nProcedurally Generated CSS Numbers<\/a> by Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\">@cobra_winfrey<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Web developer <a href=\"https:\/\/twitter.com\/cobra_winfrey\">Adam Kuhn<\/a> created an impressive generative numbers demo with Sarah Drasner\u2019s <a href=\"https:\/\/cssgrid-generator.netlify.com\/\">CSS Grid Generator<\/a> for cell drawing, CSS variables and jQuery. Type in a number and watch it emerge from a sea of cubes.<\/p>\n<h3>17. Find the Rainbow<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"ilithya\" data-slug-hash=\"vodGee\" data-pen-title=\"Find The Rainbow\">See the Pen <a href=\"https:\/\/codepen.io\/ilithya\/pen\/vodGee\"><br \/>\nFind The Rainbow<\/a> by ilithya (<a href=\"https:\/\/codepen.io\/ilithya\">@ilithya<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Creative coder <a href=\"https:\/\/www.ilithya.net\/\">ilithya<\/a> made a little game with some CSS and plain JavaScript. It\u2019s fully responsive via CSS Grid and Flexbox, and you can play as many times as you like because the rainbow is always hidden in a different place.<\/p>\n<h2>State Machines<\/h2>\n<h3>18. CSS Animations with Finite State Machines<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"keyframers\" data-slug-hash=\"NLWYXM\" data-pen-title=\" (\u2310\ud83d\udd34_\ud83d\udd35) Turnable Tables, Part 2 (\ud83d\udd34_\ud83d\udd35\u00ac) | 3D CSS Record Player App | @keyframers 1.18.1\">See the Pen <a href=\"https:\/\/codepen.io\/team\/keyframers\/pen\/NLWYXM\"><br \/>\n(\u2310\ud83d\udd34_\ud83d\udd35) Turnable Tables, Part 2 (\ud83d\udd34_\ud83d\udd35\u00ac) | 3D CSS Record Player App | @keyframers 1.18.1<\/a> by @keyframers (<a href=\"https:\/\/codepen.io\/keyframers\">@keyframers<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/twitter.com\/DavidKPiano\">David Khourshid<\/a> is deeply passionate about state machines, and how they can be used to simplify otherwise complex UI animations and user flows. Check out Turnable Tables, one of the most complex animations David and Steven Shaw have built for <a href=\"https:\/\/keyframe.rs\/\">Keyframers<\/a>, their weekly animated collaborative coding live stream, and <a href=\"https:\/\/www.youtube.com\/watch?v=9q1_H4IcYH4\">watch the video<\/a> to find out how they did it. Finally, also check out David\u2019s introductory <a href=\"https:\/\/medium.com\/@DavidKPiano\/css-animations-with-finite-state-machines-7d596bb2914a\">guide to finite state machines<\/a>.<\/p>\n<h2>JavaScript Frameworks<\/h2>\n<h3>19. How To Make an Animated Interactive Vue.js Slider<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"xdesro\" data-slug-hash=\"dEwMOq\" data-preview=\"true\" data-pen-title=\"Vue Slider UI Interaction\">See the Pen <a href=\"https:\/\/codepen.io\/xdesro\/pen\/dEwMOq\"><br \/>\nVue Slider UI Interaction<\/a> by Henry Desroches (<a href=\"https:\/\/codepen.io\/xdesro\">@xdesro<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This <a href=\"https:\/\/codepen.io\/xdesro\/post\/tutorial-vue-slider\">step-by-step tutorial<\/a> by creative front-end developer <a href=\"https:\/\/henry.codes\/\">Henry Desroches<\/a> walks you through creating a nice swipe loading effect with a staggered timeline. The fluid animation is built with Vue.js and SCSS for style.<\/p>\n<h3>20. Vue.js Fancy Flyout Selector<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"bloqhead\" data-slug-hash=\"PoYjgjq\" data-pen-title=\"Vue.js Bites: Fancy Flyout Selector\">See the Pen <a href=\"https:\/\/codepen.io\/bloqhead\/pen\/PoYjgjq\"><br \/>\nVue.js Bites: Fancy Flyout Selector<\/a> by Daryn St. Pierre (<a href=\"https:\/\/codepen.io\/bloqhead\">@bloqhead<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Front-end engineer <a href=\"https:\/\/daryn.codes\/\">Daryn St. Pierre<\/a> built a fun flyout interface that leverages the Vue.js transition system to create smooth animations that use cartoonish easings.<\/p>\n<h3>21. React Slider with Parallax Hover Effects<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"hexagoncircle\" data-slug-hash=\"jgGxKR\" data-pen-title=\"React Slider w\/ Hover Effect\">See the Pen <a href=\"https:\/\/codepen.io\/hexagoncircle\/pen\/jgGxKR\"><br \/>\nReact Slider w\/ Hover Effect<\/a> by Ryan Mulligan (<a href=\"https:\/\/codepen.io\/hexagoncircle\">@hexagoncircle<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Ryan Mulligan (who created the excellent animated verbs, see above) has written <a href=\"https:\/\/tympanus.net\/codrops\/2019\/08\/20\/react-slider-with-parallax-hover-effects\/\">a tutorial<\/a> to explain how to create a slider\/carousel with React. The post dives into the details of the slider\u2019s components, the dynamic CSS variables used for the parallax hover effect, and some of the other properties that brought this project to life.<\/p>\n<h3>22. HSL Slider<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"jh3y\" data-slug-hash=\"dybjLpa\" data-pen-title=\"HSL Slider w\/ React + CSS vars \ud83e\udd13\ud83c\udfa8\">See the Pen <a href=\"https:\/\/codepen.io\/jh3y\/pen\/dybjLpa\"><br \/>\nHSL Slider w\/ React + CSS vars \ud83e\udd13\ud83c\udfa8<\/a> by Jhey (<a href=\"https:\/\/codepen.io\/jh3y\">@jh3y<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Inspired by a section of <a href=\"https:\/\/refactoringui.com\/book\/\">Refactoring UI<\/a>, which recommends ditching Hex for HSL as a colour format, <a href=\"https:\/\/jhey.dev\">Jhey Tompkins<\/a> created this little colour picker with React Hooks, pointer events and CSS variables. Slide it left to right for hue, and use the dials above and below to adjust the saturation and lightness.<\/p>\n<h2>WebGL<\/h2>\n<h3>23. WebGL-enhanced drag slider tutorial with curtains.js<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"martinlaxenaire\" data-slug-hash=\"QegWQJ\" data-pen-title=\"WebGL enhanced javascript drag slider (performance improved)\">See the Pen <a href=\"https:\/\/codepen.io\/martinlaxenaire\/pen\/QegWQJ\"><br \/>\nWebGL enhanced javascript drag slider (performance improved)<\/a> by Martin Laxenaire (<a href=\"https:\/\/codepen.io\/martinlaxenaire\">@martinlaxenaire<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>In this <a href=\"https:\/\/codepen.io\/martinlaxenaire\/post\/webgl-enhanced-drag-slider-tutorial-with-curtains-js-part-1\">three<\/a>&#8211;<a href=\"https:\/\/codepen.io\/martinlaxenaire\/post\/webgl-enhanced-drag-slider-tutorial-with-curtains-js-part-2\">part<\/a> <a href=\"https:\/\/codepen.io\/martinlaxenaire\/post\/webgl-enhanced-drag-slider-tutorial-with-curtains-js-part-3\">tutorial<\/a>, web designer <a href=\"https:\/\/www.martin-laxenaire.fr\/\">Martin Laxenaire<\/a> explains how to build a responsive drag slider in JavaScript, enhance it with powerful WebGL capabilities and improve the overall performance of the slider by removing any layout repaint calls.<\/p>\n<h3>24. 80\u2019s<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"ClementRoche\" data-slug-hash=\"OJLrOoz\" data-preview=\"true\" data-pen-title=\"80's\">See the Pen <a href=\"https:\/\/codepen.io\/ClementRoche\/pen\/OJLrOoz\"><br \/>\n80&#8217;s<\/a> by Cl\u00e9ment Roche (<a href=\"https:\/\/codepen.io\/ClementRoche\">@ClementRoche<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\nAn impressive WebGL demo by development student Cl\u00e9ment Roche.<\/p>\n<h2>CSS-only<\/h2>\n<h3>25. Hover Effect for Headers<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"oliviale\" data-slug-hash=\"YgzNzK\" data-pen-title=\"Hover Effect for Headers\">See the Pen <a href=\"https:\/\/codepen.io\/oliviale\/pen\/YgzNzK\"><br \/>\nHover Effect for Headers<\/a> by Olivia Ng (<a href=\"https:\/\/codepen.io\/oliviale\">@oliviale<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/twitter.com\/meowlivia_\">Olivia Ng<\/a> created a CSS-only CodePen that demonstrates various subtle hover effects for headers, in particular via animating individual letters. It also makes use of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Scroll_Snap\">CSS Scroll Snap<\/a>, which allows a scroll container to snap to certain positions automatically.<\/p>\n<h3>26. Rebuilding the Solar System with CSS<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"robdimarzo\" data-slug-hash=\"LMOLer\" data-preview=\"true\" data-pen-title=\"Solar CSSystem\">See the Pen <a href=\"https:\/\/codepen.io\/robdimarzo\/pen\/LMOLer\"><br \/>\nSolar CSSystem<\/a> by Rob DiMarzo (<a href=\"https:\/\/codepen.io\/robdimarzo\">@robdimarzo<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>UX designer <a href=\"https:\/\/www.robdimarzo.com\/\">Rob DiMarzo<\/a> has written an article that <a href=\"https:\/\/codepen.io\/robdimarzo\/post\/rebuilding-the-solar-system-with-css\">dissects his Solar CSSystem demo<\/a> and explains how he built the planets complete with their relative rotation speed, tilt, and other photorealistic goodies \u2014 using only CSS!<\/p>\n<h3>27. Clip Clop Clippity Clop<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"ste-vg\" data-slug-hash=\"oKYjKV\" data-preview=\"true\" data-pen-title=\"Clip Clop Clippity Clop [CSS Only] \">See the Pen <a href=\"https:\/\/codepen.io\/ste-vg\/pen\/oKYjKV\"><br \/>\nClip Clop Clippity Clop [CSS Only] <\/a> by Steve Gardner (<a href=\"https:\/\/codepen.io\/ste-vg\">@ste-vg<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>A beautiful CSS-only animated horse (with x-ray view on click!) by <a href=\"https:\/\/twitter.com\/steeevg\">Steve Gardner<\/a>. Click or touch the horse to slow things down and see how things are done.<\/p>\n<h3>28. Zero Divs Pure CSS Pixel Art Animation<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"ivorjetski\" data-slug-hash=\"xxKBWBN\" data-pen-title=\"Zero Divs! Pure CSS pixel art animation!\">See the Pen <a href=\"https:\/\/codepen.io\/ivorjetski\/pen\/xxKBWBN\"><br \/>\nZero Divs! Pure CSS pixel art animation!<\/a> by Ben Evans (<a href=\"https:\/\/codepen.io\/ivorjetski\">@ivorjetski<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>An experiment in CSS art, using box-shadow and parallax scrolling, by front-end developer <a href=\"https:\/\/www.tinydesign.co.uk\/ben-evans-portfolio\/\">Ben Evans<\/a> that is done completely without HTML, JavaScript and images. Ben also took a few thousand screenshots to make <a href=\"https:\/\/www.youtube.com\/watch?v=KACYxrl9Mjw\">a time-lapse video<\/a>, so you can see the \u2018making of\u2019.<\/p>\n<h3>29. CSS Tic-Tac-Toe<\/h3>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"500\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"alvaromontoro\" data-slug-hash=\"BexWOw\" data-pen-title=\"CSS Tic-Tac-Toe... now with AI!\">See the Pen <a href=\"https:\/\/codepen.io\/alvaromontoro\/pen\/BexWOw\"><br \/>\nCSS Tic-Tac-Toe&#8230; now with AI!<\/a> by Alvaro Montoro (<a href=\"https:\/\/codepen.io\/alvaromontoro\">@alvaromontoro<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>A Tic-Tac-Toe game developed using only HTML and CSS, without any JavaScript, by full-stack software engineer<a href=\"https:\/\/twitter.com\/alvaro_montoro\"> Alvaro Montoro<\/a>. Also check out his CSS and HTML <a href=\"https:\/\/codepen.io\/alvaromontoro\/pen\/gjWPNW\">Snake and Ladders<\/a>.<\/p>\n<h3>30. Paper Pirouette<\/h3>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"keyframers\" data-slug-hash=\"YzKjoev\" data-preview=\"true\" data-pen-title=\"\u27b0\ud83d\udcc3 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0\">See the Pen <a href=\"https:\/\/codepen.io\/team\/keyframers\/pen\/YzKjoev\"><br \/>\n\u27b0\ud83d\udcc3 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0<\/a> by @keyframers (<a href=\"https:\/\/codepen.io\/keyframers\">@keyframers<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Another impressive demo by the <a href=\"https:\/\/keyframe.rs\/\">Keyframers<\/a>, David Khourshid and Stephen Shaw. If you want to know how they created this 3D isometric flying paper animation using CSS only, <a href=\"https:\/\/youtu.be\/Fdq95qVG7F4\">watch them code it live<\/a>. Topics covered include CSS variables, segments for creating smooth curves and 3D CSS transforms and 3D transform-origin.<\/p>\n<h2>Even more pens and how to join in yourself<\/h2>\n<p>To find out more about CodePen, <a href=\"https:\/\/www.youtube.com\/watch?v=vb9uYBtqmeM\">watch this video<\/a> and learn from CodePen co-founder <a href=\"https:\/\/twitter.com\/chriscoyier\">Chris Coyier<\/a> how to use the platform. And for more inspiring demos, sign up to <a href=\"https:\/\/codepen.io\/spark\/\">the CodePen Spark newsletter<\/a> and check out <a href=\"https:\/\/codepen.io\/collection\/nMgKxJ\/\">Sarah Drasner\u2019s collection of useful pens for everyday front-end development<\/a>. You can also join the community by taking part in one of the <a href=\"https:\/\/codepen.io\/challenges\/\">weekly challenges<\/a> or attending one of the many CodePen meetups around the world.<\/p>\n<p><em>And if you\u2019ve created a pen yourself or would like to tell us about your favourites, share them with us on social or in the comments below!<\/em><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.<\/p>\n","protected":false},"author":2,"featured_media":21311,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-21692","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills - Heart Internet<\/title>\n<meta name=\"description\" content=\"Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-06T15:20:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills\",\"datePublished\":\"2019-11-06T15:20:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\"},\"wordCount\":2418,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\",\"name\":\"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg\",\"datePublished\":\"2019-11-06T15:20:32+00:00\",\"description\":\"Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg\",\"width\":1100,\"height\":733},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills - Heart Internet","description":"Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/","og_locale":"en_GB","og_type":"article","og_title":"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills - Heart Internet","og_description":"Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.","og_url":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2019-11-06T15:20:32+00:00","og_image":[{"width":1100,"height":733,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills","datePublished":"2019-11-06T15:20:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/"},"wordCount":2418,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/","url":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/","name":"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg","datePublished":"2019-11-06T15:20:32+00:00","description":"Boost your CSS, SVG and JavaScript skills with these 30 CodePen demos covering everything from animated fonts to games.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/07\/people-using-whiteboard.jpg","width":1100,"height":733},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/30-inspiring-codepen-demos-to-boost-your-css-svg-and-javascript-skills\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"30 inspiring CodePen demos to boost your CSS, SVG and JavaScript skills"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=21692"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/21311"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=21692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=21692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=21692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}