1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| | <!-- SPDX-FileCopyrightText: 2020 hazelnot -->
<!-- SPDX-FileCopyrightText: 2020 Alyssa Ross <hi@alyssa.is> -->
<!-- SPDX-License-Identifier: CC0-1.0 -->
<!-- Design by hazelnot, SVG implementation by Alyssa Ross. -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<defs>
<filter id="ring-shadow" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feComposite in="SourceGraphic" in2="offset" operator="over" />
</filter>
<filter id="center-shadow" x="-10" y="-10" width="120" height="120">
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#DDD" />
</filter>
<mask id="ring-mask">
<circle stroke="white" stroke-width="5" cx="50" cy="50" r="36" fill="none" />
</mask>
</defs>
<!--
Firefox doesn't like filters that overflow the bounds of the object
they're applied to, when that object is part of a mask. So wrap the
ring in a group that we can apply a filter to after it's masked.
-->
<g filter="url(#ring-shadow)">
<foreignObject width="100" height="100" mask="url(#ring-mask)">
<div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; background: conic-gradient(from 0.25turn, red, magenta, blue, aqua, lime, yellow, red)" />
</foreignObject>
</g>
<circle cx="50" cy="50" r="27" fill="white" filter="url(#center-shadow)" />
</svg>
|