Gradient infinity logo (1 element, no SVG, no JS save for ensuring fallbacks)

Gradient infinity logo (1 element, no SVG, no JS save for ensuring fallbacks)

See the Code
See it Full Page
See Details

[Watch me code this in 15 minutes](https://www.youtube.com/watch?v=pHMNhuPkfFU) . Tested and works fully only in WebKit browsers. Firefox messes up 3D order with the `drop-shadow()` filter, so removed that for it, Edge doesn’t support masking. If you like this demo in particular and my work in general and you want me to be able to continue putting stuff out, please consider one of the following:

* showing your appreciation with a donation:

[![donate button](https://liberapay.com/assets/widgets/donate.svg)](https://liberapay.com/anatudor/donate)

* getting me something from my Amazon WishList: [🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/)

* or at least sharing this to show the rest of the world what can be done with CSS on the web these days

Thank you!

Original by Infographic Paradise [on Dribbble](https://dribbble.com/shots/3192109-Gradient-infinity-logo):

![original idea](https://cdn.dribbble.com/users/623359/screenshots/3192109/infinity_logo-01.jpg
)

Uses Lea Verou’s conic-gradient() [polyfill](https://leaverou.github.io/conic-gradient/) for browsers not supporting it natively.

This Pen uses: HTML, SCSS, Babel, and Babel


Source: codepen

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *