How do I make my rotating polygon element (svg) to be responsive?

Question

I am trying to make my triangle rotate around the circle for my college assignment, but I have a problem making my triangle responsive.

The blue-purple triangle is supposed to be rotating inside the orange square box and the size should be responsive like the other shapes, but my knowledge is very limited.

Is there any solution for squashing my little triangle into the square?

I appreciated your help in advance...

  
body {
    background-color: white;
}
  
svg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    fill:white;
  }

.box {
    position: relative;
    width: 30vw;
    height: 30vw;
    fill:white;
    stroke:orange;
    stroke-width: 1px;
}

.circleAndTriangle {
    animation: colorChange 5s linear infinite;
}


.triangle {    
    transform-origin: 50vw 35vw;
    position: absolute;

    animation: rotatingTriangle 5s linear reverse infinite;
}


@keyframes colorChange {
    0% {fill:blue }
    100% {fill:red}
    } 

@keyframes rotatingTriangle {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

<!DOCTYPE html>
<html lang="en-UK">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link type="text/css" href="https://cdn.jsdelivr.net/npm/reset-css@3.0.0/reset.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <title>Rotating Study</title>
    </head>

    <body> 
            <svg>
                <rect x="35vw" y="20vw" rx="0px" ry="0px" class="box"/>
                <g class="circleAndTriangle">
                    <circle cx= "50vw" cy="35vw" r="1.5vw" class="circle"/> 
                    <polygon points="250,150,280,150,265,175"  class="triangle"/>
                </g>
            </svg>
               
    </body>
</html>

Use an svg viewBox attribute. Also you may like to know that you can do this using SMIL animations and https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion — enxaneta, Nov 30 '21 at 13:28

score 0 · Answer 1 · answered Dec 01 '21 at 06:45

As @enxaneta suggested. You should give the SVG a viewBox and keep everything within the SVG. Then just use CSS to size and position the SVG on your page.

/*Background*/
body {
    background-color: white;
}
/*Grouped Animation*/

svg {
    position: absolute;
    top: 35vh;
    left: 35vw;
    width: 30vw;
    height: 30vw;
    fill:white;
    
}
/*Square in the middle of the BG with thin green stroke*/
.box {
    fill:white;
    stroke:orange;
    stroke-width: 1px;
}
/*Color Changes in both Circle & Triangle*/
.circleAndTriangle {
    animation: colorChange 5s linear infinite;
}

/*Triangle rotating around the circle*/
.triangle {    
    transform-origin: 50px 50px;
    animation: rotatingTriangle 5s linear reverse infinite;
}


@keyframes colorChange {
    0% {fill:blue }
    100% {fill:red}
    } 

@keyframes rotatingTriangle {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

<svg viewBox="0 0 100 100">
    <rect x="1" y="1" width="98" height="98" class="box"/>
    <g class="circleAndTriangle">
        <circle cx= "50" cy="50" r="5" class="circle"/> 
        <polygon points="45,93, 55,93, 50,98" class="triangle"/>
    </g>
</svg>

Thank you so much, Paul! My problem has been solved! you are the best! — April K, Dec 02 '21 at 05:49

How do I make my rotating polygon element (svg) to be responsive?

1 Answers1