Embed SVG as CSS background-image, mask-image, or content property.
SVG to CSS works entirely in the browser tab. Open it, use it, close it. Nothing about the session outlives the page.
Nothing here is stored between visits. Reload the page and you start from an empty box again.
You will find it under SVG, alongside 16 other tools for the same sort of job.
Generates ready-to-use CSS with configurable selectors and sizing.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#333"/></svg>
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23333'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}Yes. It is JavaScript running in this tab, so once the page has loaded it needs nothing further from the network. Put the machine in flight mode and it carries on. Nothing you do here is sent anywhere, because there is nowhere for it to go.
No. Reload the page and it starts from nothing. There is no account, no saved state and no cookie holding your last session. That is a deliberate trade: it cannot lose your data because it never keeps any.
Timing comes from performance.now(), the high resolution clock the browser provides, rather than from setInterval, which drifts by a few milliseconds every tick and compounds over minutes. What can still shift things is the browser throttling a tab in the background, so leave it visible if the timing matters.
Where a sound makes sense, it is generated with the Web Audio API rather than loaded as a file, so there is nothing to download and nothing to block. Browsers refuse to start audio until you have interacted with the page, which is why the first press is what switches it on.
Yes. The controls are sized for touch and the layout collapses to one column on a narrow screen. Bear in mind that a phone locking its screen will suspend the page, and timing stops with it.