What would you call these circle things on this page?
Is there a way to create them using HTML5/CSS3?
I thought I recall seeing in MDN somewhere how you can create images in CSS buttons, and these sort of seem like those.
I think they look really nice! 
The link is incorrect, please modify.
Why not look at the page’s source code?
First, I asked what you would call these things.
Second, like most websites online, the code is some JS fubar, so that isn’t any help - especially since I don’t know JS!
Those “things” are not JS.
So what’s your point?
If you look at the source code you’ll see how they are made.
I just said that I looked at the source code, and all I see is Javascript…
<body>
<link rel="stylesheet" href="[/applications/covid19/2011HotfixDev32/en-us/main.css](https://covid19-static.cdn-apple.com/applications/covid19/2011HotfixDev32/en-us/main.css)" />
<script type="text/javascript" src="[/applications/covid19/2011HotfixDev32/en-us/main.js](https://covid19-static.cdn-apple.com/applications/covid19/2011HotfixDev32/en-us/main.js)" crossorigin="anonymous"></script>
</body>Have a look with the element inspector. You’ll see they are SVG elements.
So what do you call those?
Buttons? Icons? Something else?
And how would I make things like that?
Hi there UpstateLeafPeeper,
you certainly know how to get disgusting pages for your examples. 
It is as, you pointed out, 100% dependent on JavaScript and
displays an entirely blank page when disabled 
So instead of “View Source” you need to use “Inspect Element”
or “Inspect” depending on the browser you’re using to get the
information that you seek, 
Here is one that I have prepared for your inspection…
<svg
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd"
clip-rule="evenodd"
stroke-linejoin="round"
stroke-miterlimit="2">
<ellipse cx="20" cy="20.014" rx="20" ry="19.987" fill="#ffb268"></ellipse>
<path d="M20.697 7.8a.3.3 0 01.3.3v2.163a9.78 9.78 0 015.185 2.246l1.598-1.599a.298.298 0 01.424 0l.986.986a.298.298 0 010 .424l-1.618 1.618a9.74 9.74 0 012.086 5.164l2.342.001a.3.3 0 01.3.3v1.394a.3.3 0 01-.3.3h-2.362a9.764 9.764 0 01-2.157 5.074l1.709 1.709a.298.298 0 010 .424l-.986.986a.298.298 0 01-.424 0l-1.709-1.709a9.764 9.764 0 01-5.074 2.157V32.1a.3.3 0 01-.3.3h-1.394a.3.3 0 01-.3-.3l-.001-2.342a9.75 9.75 0 01-5.163-2.088l-1.619 1.62a.298.298 0 01-.424 0l-.986-.986a.298.298 0 010-.424l1.6-1.599a9.774 9.774 0 01-2.248-5.184H8a.3.3 0 01-.3-.3v-1.394a.3.3 0 01.3-.3l2.141-.001a9.763 9.763 0 012.173-5.277L10.81 12.32a.298.298 0 010-.424l.986-.986a.298.298 0 01.424 0l1.504 1.505a9.733 9.733 0 015.278-2.174l.001-2.141a.3.3 0 01.3-.3h1.394zm-3.07 14.95a1.326 1.326 0 100 2.65c.733 0 1.328-.593 1.328-1.325s-.595-1.325-1.328-1.325zm4.646 0c-.733 0-1.328.593-1.328 1.325a1.327 1.327 0 002.655 0c0-.732-.594-1.325-1.327-1.325zm-6.985-4.108a1.364 1.364 0 000 2.726c.753 0 1.368-.616 1.368-1.368 0-.752-.615-1.358-1.368-1.358zm4.602 0a1.364 1.364 0 000 2.726c.753 0 1.368-.616 1.368-1.368 0-.752-.615-1.358-1.368-1.358zm4.602 0a1.364 1.364 0 000 2.726c.753 0 1.368-.616 1.368-1.368 0-.752-.615-1.358-1.368-1.358zM17.627 14.8a1.326 1.326 0 100 2.65c.733 0 1.328-.593 1.328-1.325S18.36 14.8 17.627 14.8zm4.646 0c-.733 0-1.328.593-1.328 1.325a1.327 1.327 0 002.655 0c0-.732-.594-1.325-1.327-1.325z" fill="#fff" fill-rule="nonzero"></path>
</svg>
coothead
It’s Tim Cook’s fault!!
Hate to break it to you, but most of the pretty stuff on the Internet was build that way!
Yeah, I use Firefox’s Dev Tools, so I took @Gandalf advice.
Okay, I will check that out, but my question above relates to something I asked you before and didn’t get a real answer…
How does a person go about creating their own SVGs?
I now know that an SVG is just a bunch of instructions/data-points telling browsers how to dynamically draw an image.
But unless you are gonna get out your graph paper, or draw a super simple shape like a circle, there must be some tools out there or something to help people create fancier SVG (e.g. some of the buttons on Apple’s site, an outline of Central park in NYC, the state of Florida, etc).
There must be a way for people to create icons and buttons more easily than drawing them from scratch using Adobe Illustrator or Gimp or whatever.
I did show you a simple tool for creating
SVG path elements tn this post…
a reply to UpstateLeafPeeper - 4 days ago
…which you may have overlooked. 
coothead
I don’t know what you were showing me there.
When I save that code as coot.html all I see is a pink screen.
And even if I did see something, I am not asking about a web-page.
I asked (several times) how a person would take an idea and turn it into an SVG.
If I wanted a stop sign inside a circle so it could be a button, how would I do that?
What if I wanted a goldfish inside a square?
Maybe button that is your infamous toothy smile?
I did not ask how to display an SVG, I have been asking how to create SVG buttons, shapes, etc when the thing being created is not a simple geometric shape…
That’s because you did not save the posted image,
which was then used in this part of the code…
<div id="container">
<img src="star.jpg" width="600" height="620">
</div>
Clicking on the various points of the star allowed
me to create these paths…
<path d="M34,243,300,331,234,237z"/>
<path d="M300,331,234,237,302,49z"/>
<path d="M300,331,302,49,367,237z"/>
<path d="M300,331,367,237,566,243z"/>
<path d="M300,331,566,243,406,365z"/>
<path d="M300,331,406,365,464,557z"/>
<path d="M300,331,464,557,302,438z"/>
<path d="M300,331,302,438,134,557z"/>
<path d="M300,331,134,557,194,365z"/>
<path d="M300,331,194,365,34,243z"/>
…and then this SVG…
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 600 660"
tabindex="0">
<g stroke="#963">
<path d="M34,243,300,331,234,237z" fill="#fad03c"/>
<path d="M300,331,234,237,302,49z" fill="#dda729"/>
<path d="M300,331,302,49,367,237z" fill="#f4cc49"/>
<path d="M300,331,367,237,566,243z" fill="#fcd03b"/>
<path d="M300,331,566,243,406,365z" fill="#bb8829"/>
<path d="M300,331,406,365,464,557z" fill="#e5bb43"/>
<path d="M300,331,464,557,302,438z" fill="#c08e2b"/>
<path d="M300,331,302,438,134,557z" fill="#bf8b25"/>
<path d="M300,331,134,557,194,365z" fill="#dfb442"/>
<path d="M300,331,194,365,34,243z" fill="#aa7822"/>
</g>
</svg>
coothead
How in the world would you know to do that from what you posted?! 
I guess a “user’s manual” costs extra, huh?
So your solution is to use that code and take some image, and go around and click on various border locations (and possibly interior points) and use that to try and create a usable SVG?
If so, that might work for simple shapes, but what if you had to do an outline of the UK?
Is that what you used on the SVG in post #13?
Then I would probably get one online, for example…
…and then adjust them for my requirements.
coothead
You can’t trace something that doesn’t exist. So how did Apple create their SVG’s in the link in my OP?
Did some graphic artist create an illustration/image/drawing in Adobe Illustrator, and then they used Illustrator or something else to create the SVG?
Or is there dedicated software that will do that for you?
I appreciate you code and suggestions, but it seems very limited in the scheme of things.
Just sayin…
