Цветовой круг на Css

На css-tricks.com опубликовали интересный способ получить цветовой круг с помощью Css: css-tricks.com/conical-gradients-css.

В уроке код для SASS, я попробовала сделать это простым CSS и используя меньшее количество элементов:

Размытие в исходном примере сделано с помощью -webkit-filter: blur(1.7em);, следовательно, будет работать только в браузерах на основе Webkit. Но можно воспользоваться svg-фильтрами и получить размытие и в других браузерах:

Ссылки по теме:
docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters
http://dev.w3.org/fxtf/filters/
css-tricks.com/svg-filters-on-text/
html5rocks.com/en/tutorials/filters/understanding-css/
codepen.io/indigane/pen/lbLjs
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus