CodePen Embed

Live

This Pen is owned by Mark Boots on CodePen.

External CSS

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.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 *; language-detector *; language-model *; microphone *; midi *; payment *; proofreader *; rewriter *; serial *; summarizer *; translator *; vr *; web-share *; writer *; 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\":\"spaces\",\"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\":\"qBpgvJR\",\"auto_save\":true},\"hashid\":\"qBpgvJR\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&amp;display=swap\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"infographics\",\"css\",\"tubes\",\"range\",\"progress\"],\"id\":60297643,\"user_id\":3176966,\"html\":\"\\n<h1>Tubes</h1>\\n<div class=\\\"tubes\\\">\\n  \\n    <div class=\\\"tube\\\" style=\\\"--percent: 0; --fill-color: #e7b409 \\\">\\n        <i class=\\\"cap\\\"></i><i class=\\\"fill\\\"></i>\\n        <div class=\\\"base\\\">\\n            <div class=\\\"text\\\">0<sup>%</sup></div>\\n            <div class=\\\"icon\\\"><i class=\\\"fa-duotone fa-chart-pie-simple\\\"></i></div>\\n        </div>\\n    </div>\\n  \\n    <div class=\\\"tube\\\" style=\\\"--percent: 25; --fill-color: #E96413\\\">\\n        <i class=\\\"cap\\\"></i><i class=\\\"fill\\\"></i>\\n        <div class=\\\"base\\\">\\n            <div class=\\\"text\\\">25<sup>%</sup></div>\\n            <div class=\\\"icon\\\"><i class=\\\"fa-duotone fa-chart-bar\\\"></i></div>\\n        </div>\\n    </div>\\n  \\n    <div class=\\\"tube\\\" style=\\\"--percent: 50; --fill-color: #ec1241\\\">\\n        <i class=\\\"cap\\\"></i><i class=\\\"fill\\\"></i>\\n        <div class=\\\"base\\\">\\n            <div class=\\\"text\\\">50<sup>%</sup></div>\\n            <div class=\\\"icon\\\"><i class=\\\"fa-duotone fa-chart-scatter-3d\\\"></i></div>\\n        </div>\\n    </div>\\n  \\n    <div class=\\\"tube\\\" style=\\\"--percent: 75; --fill-color: #af1b76\\\">\\n        <i class=\\\"cap\\\"></i><i class=\\\"fill\\\"></i>\\n        <div class=\\\"base\\\">\\n            <div class=\\\"text\\\">75<sup>%</sup></div>\\n            <div class=\\\"icon\\\"><i class=\\\"fa-duotone fa-chart-pyramid\\\"></i></div>\\n        </div>\\n    </div>\\n  \\n    <div class=\\\"tube\\\" style=\\\"--percent: 100; --fill-color: #a541ac\\\">\\n        <i class=\\\"cap\\\"></i><i class=\\\"fill\\\"></i>\\n        <div class=\\\"base\\\">\\n            <div class=\\\"text\\\">100<sup>%</sup></div>\\n            <div class=\\\"icon\\\"><i class=\\\"fa-duotone fa-chart-area\\\"></i></div>\\n        </div>\\n    </div>\\n</div>\",\"css\":\".tubes { \\n  margin-inline: auto; \\n  display: flex; \\n  flex-wrap: wrap; \\n  gap: 2rem; \\n  justify-content: center \\n}\\n\\n.tube {\\n    --width: 4rem;\\n    --skew: .5rem;\\n    --tube-color: #fff;\\n    --anim-duration: 3s;\\n    width: var(--width);\\n    aspect-ratio: 1/4.5;\\n    margin-top: var(--skew);\\n    border-top-left-radius: 50% var(--skew);\\n    border-top-right-radius: 50% var(--skew);\\n    border-bottom-left-radius: 50% var(--skew);\\n    border-bottom-right-radius: 50% var(--skew);\\n    display: grid;\\n    grid-template-rows: max-content auto max-content;\\n    position: relative;\\n}\\n.tube::before{\\n    --blur: 4px;\\n    content: '';\\n    position: absolute;\\n    width: calc(100% + var(--width) * 0.25);\\n    z-index: -1;\\n    right: var(--blur);\\n    bottom: 0;\\n    height: calc(var(--skew) * 2);\\n    background: rgb(0 0 0 / .25);\\n    border-radius: inherit;\\n    filter: blur(var(--blur));\\n}\\n\\n.tube>.cap{\\n    --cap-height: calc(var(--width) * .5);\\n    height: calc(var(--cap-height) + var(--skew));\\n    border-bottom-left-radius: inherit;\\n    border-bottom-right-radius: inherit;\\n    background-color: var(--tube-color);\\n    background-image: linear-gradient(to right, rgb(0 0 0 / .25), transparent 50%);\\n    position: relative;\\n    z-index: 2;\\n}\\n.tube>.cap::after{\\n    content: \\\"\\\";\\n    position: absolute;\\n    width: 100%;\\n    height: calc(var(--skew) * 2);\\n    background-color: var(--tube-color);\\n    background-image: linear-gradient(to left, rgb(0 0 0 / .25), transparent);\\n    border-radius: 50%;\\n    top: calc(var(--skew) * -1);\\n}\\n\\n.tube>.base{\\n    border-bottom-left-radius: inherit;\\n    border-bottom-right-radius: inherit;\\n    background-color: var(--tube-color);\\n    background-image: linear-gradient(to right, rgb(0 0 0 / .25), transparent 50%);\\n    position: relative;\\n    display: grid;\\n    justify-items: center;\\n    text-align: center;\\n    padding-top: calc(var(--width) * 0.1 + var(--skew));\\n    padding-bottom: calc(var(--width) * .1);\\n    overflow: hidden;\\n}\\n\\n\\n.tube>.base>.text{\\n    color: var(--fill-color);\\n    font-family: sans-serif;\\n    line-height: 1;\\n    font-size: calc(var(--width) * .4);\\n    position: relative;\\n}\\n.tube>.base>.text > *{\\n    position: absolute;\\n    font-size: .5em;\\n}\\n.tube>.base>.icon{\\n    width: 100%;\\n    color: var(--fill-color);\\n    background-color: rgb(0 0 0 / .1);\\n    padding-top: calc(var(--skew) + var(--width) * .1);\\n    padding-bottom: calc(var(--width) * .1);\\n    display: grid;\\n    place-content: center;\\n    margin-top: calc(var(--skew) * -.5);\\n    border-bottom-left-radius: 50% var(--skew);\\n    border-bottom-right-radius: 50% var(--skew);\\n    --mask-image: radial-gradient( ellipse 100% calc(var(--skew) * 2) at center top, transparent calc(50% - 1px), black calc(50% + 1px));\\n    -webkit-mask-image: var(--mask-image);\\n    mask-image: var(--mask-image);\\n    font-size: calc(var(--width) * .25);\\n}\\n\\n\\n.tube>.fill{\\n    margin-top: calc(var(--skew) * -1);\\n    position: relative;\\n    z-index: 1;\\n    --glas-gradient:\\n        linear-gradient(\\n            to right,\\n            rgb(0 0 0 / .25),\\n            transparent 10% 15%,\\n            rgb(255 255 255 / .5) 20%,\\n            transparent 50% 90%,\\n            rgb(0 0 0 / .125) \\n        );\\n    background-image: var(--glas-gradient);\\n}\\n\\n.tube>.fill::before{\\n    position: absolute;\\n    content: \\\"\\\";\\n    width: 100%;\\n    --fill-start: var(--skew);\\n    --fill-end: calc(var(--percent) * 1% + var(--skew));\\n    height: var(--fill-start);\\n    background-color: var(--fill-color);\\n    bottom: calc(var(--skew) * -1);\\n    border-bottom-left-radius: 50% var(--skew);\\n    border-bottom-right-radius: 50% var(--skew);\\n    background-image: \\n        var(--glas-gradient),\\n        radial-gradient(\\n            ellipse 100% calc(var(--skew) * 2) at center calc(100% - var(--skew)), \\n            rgb(255 255 255 /.125) calc(50% - 1px), \\n            transparent 50%),\\n        linear-gradient(\\n            to right, \\n            rgb(0 0 0 / .25), \\n            transparent 50% 70%, \\n            rgb(0 0 0 / .25));\\n  animation: fill-before var(--anim-duration) linear forwards\\n}\\n\\n.tube>.fill::after{\\n    content: \\\"\\\";\\n    position: absolute;\\n    width: 100%;\\n    height: calc(var(--skew) * 2);\\n    background-color: var(--fill-color);\\n    border-radius: 50%;\\n    --fill-start: calc(var(--skew) * -1);\\n    --fill-end: calc(var(--percent) * 1% - var(--skew));\\n    bottom: var(--fill-start);\\n    background-image: \\n        var(--glas-gradient),\\n        linear-gradient(to left, rgb(0 0 0 / .25), transparent 50%);\\n  animation: fill-after var(--anim-duration) linear forwards\\n}\\n\\n@keyframes fill-before{ to { height: var(--fill-end)}}\\n@keyframes fill-after { to { bottom: var(--fill-end)}}\\n\\n/* for demo */\\n*, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0 }\\nbody { \\n  min-height: 100vh;  \\n  background-color: #C2C9CF; \\n  font-family: 'Poppins', sans-serif; \\n  padding: 1rem \\n}\\nh1{ \\n  text-align: center; \\n  margin-bottom: 1rem \\n}\\n.tubes {\\n  gap: calc(2vw + 0.2rem); /* (320,8)(1920,32) */;\\n}\\n.tube {\\n  --width: calc(8vw + 0.6rem); /* (320,24)(1920,96) */;\\n  --skew: calc(1vw + 0.1rem); /* (320,4)(1920,16) */;\\n}\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-04-20T12:16:20.786Z\",\"updated_at\":\"2022-04-21T09:51:57.867Z\",\"title\":\"Tubes\",\"description\":\"\",\"slug_hash\":\"qBpgvJR\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":1,\"custom_screenshot_filename\":null,\"loves_count\":264,\"pick\":false,\"popularity\":2047,\"views_count\":7171,\"pick_visible_at\":null,\"cpid\":\"018046e6-ed32-747b-9f3b-deecaf768fe9\",\"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"}