CSS/SVG Fill pattern

[BamaBob]

How would one apply a pattern to an element similar to the one on the default analog AOD clock?  I have tried all manner of SVG and CSS methods I could find, but none seem to work.

Thanks,

Bob

[morningReign]

Hello Bob,

If you draw the image of your pattern, you can mask around it using other elements, like <arc>. If you use <arc> though, you'll likely need to use more than 1 as the arc width is limited to 32 pixels. As long as your start angles and sweep angles are the same, it will appear as one large arc instead of a set.

<arc x="-32" y="-32" width="64" height="64" start-angle="225" sweep-angle="135"  arc-width="32" fill="black" />
<arc x="-64" y="-64" width="128" height="128" start-angle="225" sweep-angle="135"  arc-width="32" fill="black" />
<arc x="-96" y="-96" width="192" height="192" start-angle="225" sweep-angle="135"  arc-width="32" fill="black" />
<arc x="-100" y="-100" width="200" height="200" start-angle="225" sweep-angle="135"  arc-width="32" fill="black" />

I added this as an example to test and got the following:

Regards,

Reign