CodePen Embed - Animated Möbius strip using CSS mathematical functions (Safari/ Firefox/ Chrome 111+)

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":"FR","device":"unknown_device","mobile":true,"name":"safari","platform":"pc","version":"537"},"__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 *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"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\":\"wvybyMo\",\"auto_save\":true},\"hashid\":\"wvybyMo\",\"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\":[\"css-maths\",\"3d\",\"transform\",\"css-variables\"],\"id\":61579857,\"user_id\":2017,\"html\":\"- var n = 32;\\n\\n.strip(style=`--n: ${n}`)\\n\\t- for(let i = 0; i < n; i++)\\n\\t\\t.comp(style=`--i: ${i}`)\",\"css\":\"$h: .875em;\\n$w: 6.5*$h;\\n$t: 4s;\\n$p: 12.5%;\\n\\nhtml, body, div { display: grid }\\n\\nhtml { height: 100% }\\n\\nbody {\\n\\toverflow: hidden;\\n\\tperspective-origin: 50% calc(50% - #{$w});\\n\\tperspective: 35em;\\n\\t\\n\\t&::after {\\n\\t\\tposition: fixed;\\n\\t\\twidth: 100%;\\n\\t\\tbackground: crimson;\\n\\t\\tcolor: #fff;\\n\\t\\tfont: 1.25em/2 ubuntu, sans-serif;\\n\\t\\ttext-align: center;\\n\\t\\tcontent: 'Sorry, your browser does not support trigonometric functions in CSS 😟';\\n\\t\\t\\n\\t\\t@supports (opacity: cos(60deg)) { display: none }\\n\\t}\\n}\\n\\ndiv { transform-style: preserve-3d }\\n\\ndiv, ::before, ::after { grid-area: 1/ 1 }\\n\\n.strip {\\n\\tplace-self: center;\\n\\ttransform: \\n\\t\\ttranslatey(-.625*$w) \\n\\t\\trotatex(45deg)\\n}\\n\\n.comp {\\n\\t--m: calc(.5*(var(--n) - 1)); /* middle index */\\n\\t--ba: calc(1turn/var(--n)); /* base angle */\\n\\t--ca: calc(var(--i)*var(--ba)); /* current angle */\\n\\t--sgn-i: sign(var(--i) - var(--m)); /* sign w.r.t. middle */\\n\\t/* for Firefox, which supports trig functions, but not sign() */\\n\\t--sgn-i: clamp(-1, 2*(var(--i) - var(--m)), 1);\\n\\t--pos: \\n\\t\\trotate(var(--ca)) \\n\\t\\ttranslate(calc(.5*#{$w} + #{$h}/tan(.5*var(--ba))));\\n\\ttransform: var(--pos)\\trotatey(0deg);\\n\\tanimation: a $t ease-in-out calc(var(--i)/var(--n)*#{-.5*$t}) infinite;\\n\\t\\n\\t&::before, &::after {\\n\\t\\t--j: 0;\\n\\t\\t--sgn-j: sign(var(--j) - .5);\\n\\t\\t/* for Firefox, which supports trig, but not sign */\\n\\t\\t--sgn-j: calc(2*var(--j) - 1);\\n\\t\\t--sgn: calc(var(--sgn-i)*var(--sgn-j));\\n\\t\\twidth: $w; height: $h;\\n\\t\\tbackface-visibility: hidden;\\n\\t\\ttransform: rotatey(calc(var(--j)*.5turn));\\n\\t\\tbackground: \\n\\t\\t\\thsl(calc(100 + var(--sgn)*90), \\n\\t\\t\\t\\t\\tcalc((1 + cos(var(--ca)))*43%), \\n\\t\\t\\t\\t\\tcalc((1 + .5*var(--sgn)*sin(var(--ca)))*50%));\\n\\t\\tcontent: ''\\n\\t}\\n\\t\\n\\t&::after { --j: 1 }\\n}\\n\\n@keyframes a {\\n\\t#{50% - $p}, 50% {\\n\\t\\ttransform: var(--pos) rotatey(-.5turn)\\n\\t}\\n\\t#{100% - $p}, 100% {\\n\\t\\ttransform: var(--pos) rotatey(-1turn)\\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\":\"2022-06-21T06:20:34.147Z\",\"updated_at\":\"2023-02-09T08:44:35.942Z\",\"title\":\"Animated Möbius strip using CSS mathematical functions (Safari/ Firefox/ Chrome 111+)\",\"description\":\"[See me code this](https://youtu.be/QEuRuECyyrA) in ~35 minutes.\\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 and you wish me to be able to continue putting out stuff, please consider one of the following:\\n\\n* being a cool cat 😼🎩 and becoming a patron on Patreon\\n\\n[![become a patron button](https://assets.codepen.io/2017/btn_patreon.png)](https://www.patreon.com/anatudor)\\n\\n* making a one time donation via Ko-fi\\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 \\n\\n[![Liberapay](https://assets.codepen.io/2017/btn_liberapay.svg)](https://liberapay.com/anatudor/)\\n\\n* getting me something off my Amazon WishList \\n\\n[🎁 🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🎁 🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/)\\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\\nResources:\\n\\n* [2017 Möbius strip](https://codepen.io/thebabydino/pen/NXqpez)\\n\\n* [Inspiration](https://beesandbombs.tumblr.com/post/168230880037/flippers)\\n\\n* [Safari mathematical functions support announcement](https://twitter.com/anatudor/status/1503616440317919234/photo/1)\\n\\n* [Degrees around a circle](https://codepen.io/thebabydino/full/NXXzyd)\\n\\n* [Regular polygon with [in|circum]circle](https://codepen.io/thebabydino/full/gONbNo)\\n\\n* [Construct regular polygon](https://codepen.io/thebabydino/full/QbBWZb)\\n\\n* [Relation betwen circumradius, inradius, edge length, polygon angle](https://codepen.io/thebabydino/full/rVgeva)\\n\\n* [body margin 8px](https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/)\\n\\n* [Using Absolute Value, Sign, Rounding and Modulo in CSS Today](https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/)\\n\\n---\\n\\nDedicated to the memory of someone dear who passed away in January 2019. Missing you every day.\",\"slug_hash\":\"wvybyMo\",\"head\":\"<script>const ID='QEuRuECyyrA'</script>\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018184eb-7be3-75e9-a96b-0475f2dc4e98\",\"is_new_editor_pen\":false,\"protected\":false,\"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://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-a3edb31fa8ee744e2168.js"}