{"id":30035152,"url":"https://github.com/awesomelistsio/awesome-codepen","last_synced_at":"2025-08-07T01:02:42.430Z","repository":{"id":307908187,"uuid":"1031049923","full_name":"awesomelistsio/awesome-codepen","owner":"awesomelistsio","description":"A curated list of awesome CodePen demos, collections, resources, and inspiration for front-end developers and designers.","archived":false,"fork":false,"pushed_at":"2025-08-02T22:46:29.000Z","size":8,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-03T00:19:44.198Z","etag":null,"topics":["awesome","awesome-list","awesome-lists","codepen","css","web-design","web-development","webdesign"],"latest_commit_sha":null,"homepage":"https://awesome.himpfen.com/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/awesomelistsio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"ko_fi":"awesomelists","custom":["https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ"]}},"created_at":"2025-08-02T22:36:04.000Z","updated_at":"2025-08-02T22:47:25.000Z","dependencies_parsed_at":"2025-08-03T00:19:45.874Z","dependency_job_id":"77493823-63ac-4b33-8a14-c5ea98fdfd0e","html_url":"https://github.com/awesomelistsio/awesome-codepen","commit_stats":null,"previous_names":["awesomelistsio/awesome-codepen"],"tags_count":null,"template":false,"template_full_name":"awesomelistsio/awesome-list","purl":"pkg:github/awesomelistsio/awesome-codepen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesomelistsio%2Fawesome-codepen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesomelistsio%2Fawesome-codepen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesomelistsio%2Fawesome-codepen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesomelistsio%2Fawesome-codepen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awesomelistsio","download_url":"https://codeload.github.com/awesomelistsio/awesome-codepen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesomelistsio%2Fawesome-codepen/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269181055,"owners_count":24373853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-06T02:00:09.910Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","awesome-lists","codepen","css","web-design","web-development","webdesign"],"created_at":"2025-08-07T01:01:28.508Z","updated_at":"2025-08-07T01:02:42.403Z","avatar_url":"https://github.com/awesomelistsio.png","language":"Python","funding_links":["https://ko-fi.com/awesomelists","https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ"],"categories":["Other Lists"],"sub_categories":["TeX Lists"],"readme":"# Awesome CodePen [![Awesome Lists](https://srv-cdn.himpfen.io/badges/awesome-lists/awesomelists-flat.svg)](https://github.com/awesomelistsio/awesome)\n\n[![Ko-Fi](https://srv-cdn.himpfen.io/badges/kofi/kofi-flat.svg)](https://ko-fi.com/awesomelists) \u0026nbsp; [![PayPal](https://srv-cdn.himpfen.io/badges/paypal/paypal-flat.svg)](https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ) \u0026nbsp; [![Stripe](https://srv-cdn.himpfen.io/badges/stripe/stripe-flat.svg)](https://tinyurl.com/e8ymxdw3) \u0026nbsp; [![X](https://srv-cdn.himpfen.io/badges/twitter/twitter-flat.svg)](https://x.com/ListsAwesome) \u0026nbsp; [![Facebook](https://srv-cdn.himpfen.io/badges/facebook-pages/facebook-pages-flat.svg)](https://www.facebook.com/awesomelists)\n\n\u003e A curated list of awesome CodePen demos, collections, resources, and inspiration for front-end developers and designers.\n\nCodePen is a popular online code editor and social development platform for front-end designers and developers to showcase user-created HTML, CSS, and JavaScript code snippets, known as \"Pens\".\n\n## Contents\n\n- [Official Resources](#official-resources)\n- [Popular Pens](#popular-pens)\n- [Collections](#collections)\n- [CSS Art](#css-art)\n- [JavaScript Experiments](#javascript-experiments)\n- [UI Components](#ui-components)\n- [Games \u0026 Interactions](#games--interactions)\n- [Learning \u0026 Tutorials](#learning--tutorials)\n- [CodePen Alternatives](#codepen-alternatives)\n- [Related Awesome Lists](#related-awesome-lists)\n\n## Official Resources\n\n- [CodePen Home](https://codepen.io/) – The main platform to explore Pens and create your own.\n- [CodePen Blog](https://blog.codepen.io/) – News, tutorials, and feature updates.\n- [CodePen Challenges](https://codepen.io/challenges) – Weekly prompts to inspire creativity and learning.\n- [CodePen PRO](https://codepen.io/pro) – Paid plan with asset hosting, private pens, and more.\n\n## Popular Pens\n\n- [Pure CSS Day and Night Toggle](https://codepen.io/t_afif/pen/OJzvxWe) – A creative toggle switch using only CSS.\n- [CSS Only Landscape](https://codepen.io/ivorjetski/pen/RwpRJbq) – A fully responsive landscape made with CSS.\n- [Animated Hamburger Menu](https://codepen.io/denic/pen/abEjrZN) – Simple and elegant hamburger menu animation.\n- [Pikachu with CSS](https://codepen.io/ChrisDermody/pen/VWbJjB) – Pikachu rendered using only CSS.\n- [CSS Globe](https://codepen.io/kevinpowell/pen/NWqddvV) – An animated rotating globe using CSS.\n\n## Collections\n\n- [Creative Buttons](https://codepen.io/collection/nQPBbY) – A collection of creative CSS buttons.\n- [Form Styles](https://codepen.io/collection/XKpNbP) – Stylish form design examples.\n- [3D CSS Effects](https://codepen.io/collection/XVgZMg) – Pens featuring 3D-style CSS effects.\n- [SVG Animations](https://codepen.io/collection/DQvYpQ) – Examples of SVGs animated with CSS and JS.\n\n## CSS Art\n\n- [CSS Mona Lisa](https://codepen.io/jaysalvat/pen/vOeWZw) – Classic art reimagined in CSS.\n- [Pure CSS Pokemon](https://codepen.io/collection/AXmWgN) – A collection of Pokémon characters rendered in CSS.\n- [CSS Avatars](https://codepen.io/collection/DEGbMq) – Creative avatars and illustrations made with CSS.\n\n## JavaScript Experiments\n\n- [Particles.js](https://codepen.io/VincentGarreau/pen/pnlso) – A particle animation library in action.\n- [Canvas Rain](https://codepen.io/jackrugile/pen/BQbqVz) – Simulated rainfall with HTML5 Canvas.\n- [Web Audio API Visualizer](https://codepen.io/akm2/pen/rHIsa) – Audio frequency visualizer with Web Audio API.\n\n## UI Components\n\n- [Dropdown Menus](https://codepen.io/collection/nLXYpL) – CSS and JS dropdown menu designs.\n- [Modal Dialogs](https://codepen.io/collection/XQvNmz) – Pens showcasing modals, overlays, and popups.\n- [Toggle Switches](https://codepen.io/collection/nZpMbR) – Sleek toggle designs using HTML and CSS.\n- [Sliders and Carousels](https://codepen.io/collection/XgkLKL) – Image sliders, carousels, and galleries.\n\n## Games \u0026 Interactions\n\n- [Tic Tac Toe](https://codepen.io/Alireza29675/pen/MWdzBxM) – A JavaScript-based game of tic tac toe.\n- [Flappy Bird in JS](https://codepen.io/bionik/pen/xxpbKqG) – Flappy Bird clone made in JavaScript.\n- [Memory Game](https://codepen.io/aaroniker/pen/ExaZQZP) – A memory card-flipping game using vanilla JS.\n\n## Learning \u0026 Tutorials\n\n- [CodePen Projects](https://blog.codepen.io/documentation/codepen-projects/) – Guide to multi-file projects on CodePen.\n- [Learn CSS Animations](https://codepen.io/collection/nbBqgY) – Educational Pens on animation basics.\n- [Grid \u0026 Flexbox](https://codepen.io/collection/AGJLaR) – Visual and interactive grid/flex examples.\n\n## CodePen Alternatives\n\n- [JSFiddle](https://jsfiddle.net/) – Online IDE for HTML, CSS, and JavaScript with real-time preview.\n- [JSBin](https://jsbin.com/) – Web-based collaborative development platform.\n- [StackBlitz](https://stackblitz.com/) – Powerful online editor for full-stack apps.\n- [PlayCode](https://playcode.io/) – JavaScript playground with live preview and collaboration.\n\n## Related Awesome Lists\n\n- **[Awesome CSS](https://github.com/awesomelistsio/awesome-css)**\n- **[Awesome Front-End Development](https://github.com/awesomelistsio/awesome-front-end-development)**\n- **[Awesome HTML5](https://github.com/awesomelistsio/awesome-html5)**\n- **[Awesome JavaScript](https://github.com/awesomelistsio/awesome-javascript)**\n  \n## Contribute\n\nContributions are welcome!\n\n## License\n\n[![CC0](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-sa.svg)](http://creativecommons.org/licenses/by-sa/4.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawesomelistsio%2Fawesome-codepen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawesomelistsio%2Fawesome-codepen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawesomelistsio%2Fawesome-codepen/lists"}