CodePen Embed - Responsive infographic with CSS variables and flexbox tricks

Live

This Pen is owned by Ana Tudor on CodePen.

External CSS

https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

https://codepen.io/thebabydino/pen/evPbxv.js

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"YvejYj\",\"auto_save\":true},\"hashid\":\"YvejYj\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/thebabydino/pen/evPbxv.scss\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"#btn--yp {\\n\\tbox-sizing: content-box;\\n\\tposition: fixed;\\n\\tz-index: 9;\\n\\tbottom: 1em; right: 1em;\\n\\tborder: solid 1em transparent;\\n\\twidth: 4.625em; height: 3.25em;\\n\\tbackground: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/ cover content-box;\\n\\tfont: 16px/ 1.25 trebuchet ms, sans-serif;\\n\\ttext-indent: 200vw;\\n\\ttext-shadow: none;\\n\\tfilter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);\\n\\ttransition: .5s;\\n\\twhite-space: nowrap;\\n\\t\\n\\t&:before {\\n\\t\\tbox-sizing: inherit;\\n\\t\\tposition: absolute;\\n\\t\\tleft: 0; bottom: 100%;\\n\\t\\tmargin: 1em -.5em;\\n\\t\\tpadding: .5em;\\n\\t\\twidth: 100%;\\n\\t\\tborder-radius: 5px;\\n\\t\\tbackground: #e8e0e0;\\n\\t\\tcolor: #000;\\n\\t\\ttext-align: center;\\n\\t\\ttext-decoration: none;\\n\\t\\ttext-indent: 0vw;\\n\\t\\twhite-space: normal;\\n\\t\\tanimation: float 1s ease-in-out infinite alternate;\\n\\t\\tcontent: attr(data-txt)\\n\\t}\\n\\t\\t\\n\\t&:hover, &:focus {\\n\\t\\toutline: none;\\n\\t\\tfilter: grayscale(0) drop-shadow(0 0 1px crimson);\\n\\t}\\n}\\n\\n@keyframes float { to { transform: translateY(.75em) } }\"},{\"url\":\"https://codepen.io/thebabydino/pen/evPbxv.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"flexbox\",\"css-variables\",\"sass\",\"jade\"],\"id\":25575748,\"user_id\":2017,\"html\":\"- var data = [\\n- \\t{\\n- \\t\\tslist: ['#b2dc33', '#9cd400'], \\n- \\t\\tptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups. Brownie ice cream gingerbread cookie lemon drops. Liquorice marzipan macaroon sugar plum apple pie soufflé topping dessert.'\\n- \\t}, \\n- \\t{\\n- \\t\\tslist: ['#f1ce02', '#fba502'], \\n- \\t\\tptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate. Dessert gingerbread jelly cake soufflé chocolate cake. Apple pie chocolate bar topping donut powder muffin cake tart.'\\n- \\t}, \\n- \\t{\\n- \\t\\tslist: ['#ff79ac', '#fd4c90'], \\n- \\t\\tptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups. Brownie ice cream gingerbread cookie lemon drops. Liquorice marzipan macaroon sugar plum apple pie soufflé topping dessert.'\\n- \\t},\\n- \\t{\\n- \\t\\tslist: ['#bcb6ff', '#9d96f6'], \\n- \\t\\tptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate. Dessert gingerbread jelly cake soufflé chocolate cake. Apple pie chocolate bar topping donut powder muffin cake tart.'\\n- \\t}\\n- ], n = data.length;\\n\\nstyle\\n\\t| :root { --j: 0; --p: #{.5*(n - 1)} }\\n\\t| p:nth-child(2n) { --j: 1 }\\n- for(var i = 0; i < n; i++)\\n\\tp(style=`--i: ${i}; --slist: ${data[i].slist}`) #{data[i].ptext}\",\"css\":\"$shadow-w: 65%;\\n$shadow-h: .75em;\\n\\n* {\\n\\tbox-sizing: border-box;\\n\\tmargin: 0;\\n}\\n\\nbody {\\n\\tdisplay: flex;\\n\\tflex-direction: column;\\n\\talign-items: center;\\n\\tjustify-content: center;\\n\\toverflow-x: hidden;\\n\\tmin-height: 100vh;\\n\\tbackground: linear-gradient(90deg, #c7d2d8, #e5edf0);\\n\\tcounter-reset: p\\n}\\n\\np {\\n\\t--wide: 0;\\n\\t--s: calc(1 - 2*var(--j));\\n\\tdisplay: flex;\\n\\tflex-direction: var(--fdf, var(--narr, column));\\n\\talign-items: center;\\n\\tposition: relative;\\n\\tz-index: calc(-1*var(--i));\\n\\tmargin-left: calc(var(--wide)*(var(--p) - var(--i) - 2.5*var(--j) + 1)*6.5vw);\\n\\tpadding: .75em calc(var(--wide)*3em + (1 - var(--wide))*2vw);\\n\\twidth: 35em; max-width: calc(var(--wide)*75% + (1 - var(--wide))*100%);\\n\\tcolor: #fff;\\n\\tfont: 600 1em/ 1.25 roboto, sans-serif;\\n\\tcounter-increment: p;\\n\\t\\n\\t@media (min-width: 640px) { --wide: 1 }\\n\\t\\n\\t@media (min-width: 320px) { --narr: 0 }\\n\\t\\n\\t&:before {\\n\\t\\t--m: calc(1 - var(--narr, 1));\\n\\t\\torder: calc(var(--m)*var(--j));\\n\\t\\tpadding: 0 calc(var(--m)*(1 - var(--j))*1rem) 0 calc(var(--m)*var(--j)*1rem);\\n\\t\\tfont-size: 5em;\\n\\t\\tcontent: counter(p, decimal-leading-zero)\\n\\t}\\n\\t\\n\\t&:after {\\n\\t\\tposition: absolute;\\n\\t\\ttop: 0; right: 0; bottom: -$shadow-h; left: 0;\\n\\t\\tz-index: -1;\\n\\t\\tpadding-bottom: $shadow-h;\\n\\t\\ttransform: skewx(calc(var(--wide)*-22.5deg));\\n\\t\\tbackground: linear-gradient(calc(var(--s)*-90deg), var(--slist)) content-box, \\n\\t\\t\\tradial-gradient(rgba(#000, .35), transparent 70%) \\n\\t\\t\\t\\tcalc(var(--j)*100%) 100%/ #{$shadow-w} #{2*$shadow-h} no-repeat;\\n\\t\\tcontent: ''\\n\\t}\\n}\",\"js\":\"\",\"html_pre_processor\":\"pug\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-06-20T08:22:01.000Z\",\"updated_at\":\"2025-06-09T16:23:01.372Z\",\"title\":\"Responsive infographic with CSS variables and flexbox tricks\",\"description\":\"[Watch me code this](https://youtu.be/7Oj3zgrHUHw) in 25 minutes (you can speed it up if I'm too slow) . No skewed look in Edge because Edge doesn't support `calc()` as an angle value (in rotate/ skew functions). \\n\\n---\\n\\nIf the work I've been putting out since early 2012 has helped you in any way or you just like it, then please remember that praise doesn't keep me afloat financially... but you can! So please consider supporting my work in one of the following ways:\\n\\n* being a cool cat 😼🎩 and supporting it monthly on Ko-fi or via a one time donation\\n\\n[![ko-fi](https://assets.codepen.io/2017/btn_kofi.svg)](https://ko-fi.com/anatudor)\\n\\n* making a weekly anonymous donation via Liberapay - I'll never know who you are if that's your wish\\n\\n[![Liberapay](https://assets.codepen.io/2017/btn_liberapay.svg)](https://liberapay.com/anatudor/)\\n\\n* getting me a chocolate voucher\\n\\n[![Zotter chocolate](https://assets.codepen.io/2017/zotter.jpg)](https://www.zotter.at/en/online-shop/gifts/gift-vouchers/choco-voucher)\\n\\n* if you're from outside Europe, becoming a patron on Patreon (don't use it for one time donations or if you're from Europe, we're both getting ripped off)\\n\\n[![become a patron button](https://assets.codepen.io/2017/btn_patreon.png)](https://www.patreon.com/anatudor)\\n\\n* or at least sharing this to show the world what can be done with CSS these days\\n\\nThank you!\\n\\n---\\n\\nDesign [***found on Shutterstock***](https://www.shutterstock.com/image-vector/modern-infographics-colorful-design-template-shadow-203821786) - NOT created by me!\",\"slug_hash\":\"YvejYj\",\"head\":\"<link href=\\\"https://fonts.googleapis.com/css?family=Roboto:100\\\" rel=\\\"stylesheet\\\">\\n<script>const ID='7Oj3zgrHUHw'</script>\\n\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"prefixfree\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":274,\"pick\":false,\"popularity\":2470,\"views_count\":11001,\"pick_visible_at\":null,\"cpid\":\"01641c49-4428-7f60-94a4-85d361a119bd\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}