Mirror
/
web-color-wheel
mirror of https://github.com/arantius/web-color-wheel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Clip in CSS. 

Not SVG, so clicks outside the circle (but in the SVG box) cancel a locked color.  Hover in that area also behaves as expected.
This commit is contained in:
Anthony Lieuallen 2022-11-20 20:18:38 -05:00
parent 5df5b46587
commit 3284ef29d8
1 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
colors.html
View File

@ -37,6 +37,10 @@ body {
margin: 1ex; margin: 1ex;
text-decoration: none; text-decoration: none;
} }
svg {
clip-path: circle(300px at center);
}
</style> </style>
</head> </head>
<body> <body>
@ -46,19 +50,12 @@ body {
height="600" height="600"
version="1.1" version="1.1"
viewbox="0 0 1024 1024" viewbox="0 0 1024 1024"
width="800" width="600"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<style> <style>
polygon { stroke-width: 5px; } polygon { stroke-width: 5px; }
</style> </style>
<defs>
<mask id="circle-mask" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="1024" height="1024" fill="black" />
<circle cx="512" cy="512" r="512" fill="white" />
</mask>
</defs>
</svg> </svg>
<!-- https://github.com/gorhill/Javascript-Voronoi --> <!-- https://github.com/gorhill/Javascript-Voronoi -->