Circle with rotating radius-CodePudding

I would like to create an animation using CSS and HTML (JavaScript if needed). But I am not sure how to do it.

I need to create a circle, and the radius axis has to be spinning inside the circle at a slow rate.

How would one do that?

CodePudding user response：

Drawing an SVG might be the easiest way to get the shape. Then use CSS Animations to make the entire SVG rotate.

@keyframes rotate {
  to { rotate: 360deg }
}

svg {
  animation: rotate 10s linear infinite;
  width: 150px;
  height: 150px;
}

svg .ring {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

svg .dot {
  fill: black;
}

svg .line {
  stroke: purple;
  stroke-width: 1px;
}

svg .text {
  font-size: 10px;
  fill: purple;
}

<svg viewBox="0 0 100 100">
  <circle  r="49" cx="50" cy="50" />
  <circle  r="2" cx="50" cy="50" />
  <line  x1="50" y1="50" x2="99" y2="50" />
  <text  x="60" y="47">Radius</text>
</svg>

CodePudding user response：

creating a .circle parent with four divs and giving the parent display:grid of 2x2.adding border top on the 4th div gives us the line and radius text is in 2nd div pushed down with padding top.

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .circle {
        width: 300px;
        height: 300px;
        border-radius: 100%;
        border: solid 1px black;
        display: grid;
        align-content: center;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        animation: rotate 5s infinite linear;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }

    }

    div {
        width: 150px;
        height: 150px;

    }

    div:nth-child(2) {
        padding-top: 89%;
    }

    div:nth-child(4) {
        border-top: solid 2px red;
    }

<div >
        <div></div>
        <div>Radius</div>
        <div></div>
        <div></div>
</div>

CodePudding user response：

I'd use SVG, and an AnimateTransform to rotate the line.

AnimateTransform can rotate an object around a point, so in this case, just start with the line at whatever angle you'd like, but anchor the rotation to the center of the circle.

<svg viewBox='0 0 100 100' xmlns="http://www.w3.org/2000/svg">
  <circle fill='transparent' stroke='black' cx='50' cy='50' r='35' /> 
  <line stroke='red' x1='50' x2='85' y1='50' y2='50'>
    <animateTransform
       attributeName='transform'
       from='0 50 50'
       to='360 50 50'
       dur='1.5s'
       repeatCount='indefinite'
       attributeType='xml'
       type='rotate' />
  </line>
</svg>

No CSS or JavaScript needed.