Drawing a circle inside a square

Adding a "hint" button to puzzle - #2 by PaulOB

How do you draw a circle inside of the squares in Post 2?
Thanks

Codepen does that sometimes. Just refresh your browser and it should load.

Inside which squares.? The crossword or the hint squares.

How big a circle and where is it to go? Or did you mean you want to change the square to a circle?

If so just use border-radius:50% on the element concerned.

Circle goes inside the hint squares,touching all sides like a jumble, its just for decoration

I forgot, even though the circle is inside the squares, the squares are still active and can accept input, backspace as before. The circle is just decorative.

I like the hint function that you provided earlier, just trying to think of other features to puzzle.

Hi there jackson108,

How do you draw a circle inside of the square

The “svg element” might be a possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
 }

svg{
	display: block;
	max-width: 30em;
	margin: auto;
}
    
</style>

</head>
<body>
 <svg  
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 152 152">
  <rect x="0" y="0" width="152" height="152" stroke-width="1" stroke="#999" fill="#eef"/>
  <circle cx="76" cy="76" r="75" stroke-width="0.5" stroke="#999" fill="#fff"/>
 </svg>
</body>
</html>

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.