Runs/circle · chain · relay/006
circle · chain · relay · step 006 of 64
offline render, Chrome 154, light scheme, 2 s of virtual time
runs in a sandboxed frame with no origin; live pages may fetch CDN fonts the offline render did not
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Animated Circle - Interactive Demo</title>
<meta name="description" content="A responsive, accessible animated circle with hover effects">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: #fff;
--fg: #2563eb;
--shadow: rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
--fg: #60a5fa;
--shadow: rgba(0, 0, 0, 0.6);
}
}
body {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 1rem;
background: var(--bg);
color: var(--fg);
font-family: system-ui, -apple-system, sans-serif;
}
main {
width: 100%;
display: flex;
justify-content: center;
}
svg {
display: block;
width: min(400px, 100%);
height: auto;
overflow: visible;
filter: drop-shadow(0 8px 16px var(--shadow));
}
circle {
transition: opacity 0.3s ease;
transform-box: fill-box;
transform-origin: center;
opacity: 0.9;
}
svg:focus {
outline: none;
}
svg:focus-visible {
outline: 3px solid var(--fg);
outline-offset: 8px;
border-radius: 50%;
}
@media (hover: hover) {
circle:hover {
opacity: 1;
}
}
circle:active,
svg:focus-visible circle {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
circle {
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease;
}
circle:active,
svg:focus-visible circle {
transform: scale(1.05);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
circle:hover {
transform: scale(1.05);
}
}
</style>
</head>
<body>
<main>
<svg viewBox="0 0 400 400" role="img" aria-labelledby="circle-title" tabindex="0" xmlns="http://www.w3.org/2000/svg">
<title id="circle-title">Blue circle that grows slightly on hover or focus</title>
<circle cx="200" cy="200" r="180" fill="currentColor"/>
</svg>
</main>
</body>
</html>
what changed from step 005
+24 / -5 lines
opacity: 0.9; }- circle:hover,- circle:active {+ svg:focus {+ outline: none;+ }+ svg:focus-visible {+ outline: 3px solid var(--fg);+ outline-offset: 8px;+ border-radius: 50%;+ }+ @media (hover: hover) {+ circle:hover {+ opacity: 1;+ }+ }+ circle:active,+ svg:focus-visible circle { opacity: 1; }⋯ line 77 opacity 0.3s ease; }- circle:hover,- circle:active {+ circle:active,+ svg:focus-visible circle { transform: scale(1.05); } }+ @media (hover: hover) and (prefers-reduced-motion: no-preference) {+ circle:hover {+ transform: scale(1.05);+ }+ } </style> </head> <body> <main>- <svg viewBox="0 0 400 400" role="img" aria-label="Animated interactive circle" xmlns="http://www.w3.org/2000/svg">+ <svg viewBox="0 0 400 400" role="img" aria-labelledby="circle-title" tabindex="0" xmlns="http://www.w3.org/2000/svg">+ <title id="circle-title">Blue circle that grows slightly on hover or focus</title> <circle cx="200" cy="200" r="180" fill="currentColor"/> </svg>
What the model said
I made a few focused fixes to `0.html`. The page was already solid (dark mode support, reduced-motion handling, responsive sizing), so I didn't rework anything else. I haven't opened it in a browser to check the changes. - **Keyboard access:** the circle only reacted to a mouse before. You can now Tab to it, and it gets a visible round focus ring and the same grow effect as hover. - **Touch screens:** the hover effect now only applies on devices that really have hover. Before, the circle could stay enlarged after a tap. Pressing it still triggers the effect. - **Screen reader text:** the old label called it "Animated interactive circle," which was vague. It's replaced with a description of what the circle actually does. If you meant a different kind of improvement, like a new look or more animation, tell me what you have in mind.