docs(pie): mention conic-gradient drawbacks to close #45

_site/templates/css/examples/pie.css

@@ -91,6 +91,11 @@
   		calc(50% - (var(--pos-A) * var(--gt-75, 0) * 1%)) calc(50% - (var(--pos-B) * var(--gt-75, 0) * 1%)),
   		50% 50%
   );
+  --mask: radial-gradient(
+  		circle at center,
+  		#ffff 0 calc((var(--radius) / 2) - 1px),
+  		#0000 0
+  );
   background: var(--color, currentcolor) var(--background);
   block-size: var(--radius);
   border-radius: 50%;
@@ -100,11 +105,6 @@
   mask-image: var(--mask);
   transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(var(--zoom));
   transition: transform 0.2s var(--move);
-  --mask: radial-gradient(
-  		circle at center,
-  		#ffff 0 calc((var(--radius) / 2) - 1px),
-  		#0000 0
-  );
 }
 
 .chaarts.pie tr:hover td::before {

_site/templates/pie-charts.njk

@@ -448,13 +448,22 @@
 		<h3>Conical gradient</h3>
 		<p>
 			The use of <code>conic-gradient()</code> is promising for this case.
-			You'll find examples made by <strong>Ana Tudor</strong> and <strong>Léa Verou</strong>
-			—&nbsp;who actually wrote the specification, and designed
-			<a href="https://leaverou.github.io/conic-gradient/">a polyfill</a>.
-			However, <a href="https://caniuse.com/#search=conic-gradient">current support is limited to WebKit based
-				browsers</a>
-			is depressing, and still raises some <strong>accessibility issues</strong>
-			since you can't assign a pattern to each color of the <code>conic-gradient()</code>.
+			You'll find examples made by <strong>Ana Tudor</strong> and <strong>Lea Verou</strong>
+			—&nbsp;who actually wrote the specification.
+		</p>
+		<p>
+			<code>conic-gradient()</code> could be used in <code>mask-image</code> to replace <code>clip-path</code>
+			and drop the entire trigonometry thing, however there's a drawback:
+			since <code>mask</code> only clips visually, <strong>it prevents hovering other elements visible through the mask</strong>
+			— while <code>clip-path</code> really clips content, thus allowing interaction through element's layer.
+		</p>
+		<p>
+			If the current hovering interaction does not matter for you, you can change <code>.chaarts.pie td::before</code>
+			by dropping every custom properties —except <code>--zoom</code>— and <code>clip-path</code>, and modifying
+			<code>mask-image</code> to use <code>mask-image: conic-gradient(#ffff var(--value), #0000 0);</code> directly.
+		</p>
+		<p>
+			<strong>Caution:</strong> your value needs to be in <code>%</code> now.
 		</p>
 	</div>