I understand that SVG actually doesn't have a content, but I am struglying with this problem and I can't solve during days.
I have a Figma (so I can get the SVG) with this design:
The problem is that "Your Collection" text needs to grow to the right in some situations, for example: When I translate the app to Spanish and I have to show: "Tu Coleccion", or some other languages with even longer texts.
In the Figma that shape is made by 2 shapes + an "UNION" rule from Figma:
body { background-color: #7fb6ff80;}
<svg width="188" height="71" viewBox="0 0 188 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_193_1631" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z" fill="white"/>
<path d="M63.7839 15.7544L62.9621 16.3242L63.7839 15.7544ZM62.9621 55.0197C56.8225 63.8757 46.588 69.6719 35 69.6719V71.6719C47.2715 71.6719 58.1085 65.531 64.6057 56.1592L62.9621 55.0197ZM35 69.6719C16.2223 69.6719 1 54.4496 1 35.6719H-1C-1 55.5542 15.1177 71.6719 35 71.6719V69.6719ZM1 35.6719C1 16.8943 16.2223 1.67194 35 1.67194V-0.328064C15.1177 -0.328064 -1 15.7897 -1 35.6719H1ZM35 1.67194C46.588 1.67194 56.8225 7.4682 62.9621 16.3242L64.6057 15.1847C58.1085 5.81283 47.2715 -0.328064 35 -0.328064V1.67194ZM72.3203 21.6719H173V19.6719H72.3203V21.6719ZM173 21.6719C180.732 21.6719 187 27.9399 187 35.6719H189C189 26.8354 181.837 19.6719 173 19.6719V21.6719ZM187 35.6719C187 43.4039 180.732 49.6719 173 49.6719V51.6719C181.837 51.6719 189 44.5085 189 35.6719H187ZM173 49.6719H72.3203V51.6719H173V49.6719ZM62.9621 16.3242C65.0754 19.3724 68.4347 21.6719 72.3203 21.6719V19.6719C69.2571 19.6719 66.4515 17.8471 64.6057 15.1847L62.9621 16.3242ZM64.6057 56.1592C66.4515 53.4968 69.2571 51.6719 72.3203 51.6719V49.6719C68.4347 49.6719 65.0754 51.9714 62.9621 55.0197L64.6057 56.1592Z" fill="#F2F2F2" mask="url(#path-1-inside-1_193_1631)"/>
</svg>
Do you have any idea how could I change the width of that second part in order to fill the content, without changing the circle part?
Do you have any idea how to get this with CSS (without SVG)? The harder part with CSS is the curve that is in the union between the circle and the rectangle. The other part is simple.
I think it would be a good idea to have a "sliding doors" effect. So, here I made patterns for both the circle and the "text label". Switching between patterns with different sizes makes the text label resize.
This can be done dynamically if you look for the size of the text and then update the pattern based on that.
body { background-color: #7fb6ff80;}
svg {
display: block;
}
<svg width="0" height="0" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<pattern id="circle" viewBox="0 0 104 104" width="100%" height="100%">
<path transform="translate(2 2)" stroke="black" stroke-width="2" fill="none"
d="M 102 30 Q 97 30 92 23 Q 76 0 50 0 A 10 10 90 0 0 50 100 Q 76 100 92 77 Q 97 70 102 70"/>
</pattern>
<pattern id="p1_120" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(120 2)" stroke="gray" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
<pattern id="p1_140" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(140 2)" stroke="black" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
<pattern id="p1_160" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(160 2)" stroke="black" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
</svg>
<svg id="svg01" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<rect x="104" width="400" height="104" fill="url(#p1_160)" />
<rect width="104" height="104" fill="url(#circle)"/>
<text x="110" y="53" dominant-baseline="middle" font-size="20"
font-family="sans-serif">Your Collection</text>
</svg>
<svg id="svg02" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<rect x="104" width="400" height="104" fill="url(#p1_140)" />
<rect width="104" height="104" fill="url(#circle)"/>
<text x="110" y="53" dominant-baseline="middle" font-size="20"
font-family="sans-serif">Tu Coleccion</text>
</svg>
I train my CSS by making models of site or others already created. Currently, I am training with media queries and I have a problem is that it does not apply.
Before posting this message I created a simple page with a div containing two to see how the breakpoints worked and I got there but on this page I can't.
Could you tell me why nothing is happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
margin: 0 auto;
background: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
}
p {
width: 350px;
color: hsl(237, 12%, 33%);
font-size: 12px;
margin-bottom: 15px;
padding-top: -7px;
}
h1 {
font-weight: 700;
color: hsl(238, 29%, 16%);
margin-bottom: 15px;
font-size: 31px;
letter-spacing: 2px;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
background-color: white;
border-radius: 23px;
display: flex;
justify-content: space-around;
align-items: center;
width: 920px;
height: 510px;
overflow: hidden;
margin-right: 191px;
}
.leftSide {
width: 100%;
display: flex;
}
.svgCube {
position: relative;
left: 60px;
top: 45px;
z-index: 800;
}
.svgWoman {
display: block;
position: relative;
right: 85px;
}
.rightSide {
display: flex;
flex-direction: column;
width: 100%;
background-color: transparent;
margin-top: -20px;
margin-left: 3px;
}
.hiddenElement {
display: none;
}
.divider {
width: 335px;
border-bottom: 1px solid hsl(240, 5%, 91%);
}
.btnFaq {
width: 335px;
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
background-color: white;
border: none;
color: hsl(237, 12%, 33%);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 22px;
padding-bottom: 15px;
}
.btnFaq:hover {
color: hsl(14, 88%, 65%);
}
#media only screen and (min-with: 300px) and (max-with: 850px) {
.container {
flex-direction: column;
}
.box {
flex-direction: column;
flex-wrap: wrap;
width: 80vw;
height: 60vh;
}
}
</style>
<title>Frontend Mentor | FAQ Accordion Card</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<script src="main.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<svg class="svgCube" width="191" height="184" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-97.9%" y="-76.3%" width="295.8%" height="313.7%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="25" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="25" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0.209139076 0 0 0 0 0.0691446444 0 0 0 0 0.478091033 0 0 0 0.497159091 0" in="shadowBlurOuter1" />
</filter>
<path id="b" d="M0 27.756v53.87l41.968 24.035 47.387-28.025v-53.87" />
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(50.93 2.125)">
<use fill="#000" filter="url(#a)" xlink:href="#b" />
<use fill="#FF9271" xlink:href="#b" />
</g>
<path fill="#DF5C34" fill-rule="nonzero" d="M92.899 53.917v53.87l47.387-28.026v-53.87z" />
<path fill="#F47B56" fill-rule="nonzero" d="M50.93 29.88L99.624 2.126l40.662 23.767-47.387 28.025z" />
<path d="M94.013 14.49a25.942 25.942 0 0114.207 3.129c2.486 1.462 3.844 2.988 4.036 4.579.192 1.59-.628 2.975-2.562 4.143a9.115 9.115 0 01-2.985 1.18c-.869.205-1.76.295-2.652.269l-.974-.077c.091.217.151.446.18.68a3.132 3.132 0 01-.513 1.552 5.704 5.704 0 01-2.1 2.065 12.633 12.633 0 01-6.7 1.77 13.247 13.247 0 01-6.957-1.757c-1.999-1.18-3.023-2.566-3.1-4.156a4.49 4.49 0 012.562-4.015 8.488 8.488 0 012.357-1.013 9.175 9.175 0 012.037-.346h.705l-1.282-.77 3.6-2.244 8.34 4.912a4.377 4.377 0 004.15 0c1.769-1.103 1.137-2.552-1.895-4.348a19.261 19.261 0 00-10.556-2.347 21.67 21.67 0 00-11.018 3.168c-3.023 1.89-4.522 4.143-4.496 6.76 0 2.564 1.601 4.848 4.714 6.682a21.015 21.015 0 0011.146 2.655 20.926 20.926 0 0011.017-2.925 12.353 12.353 0 003.062-2.565 5.683 5.683 0 001.28-2.18l.18-.808 4.753.269c.008.145.008.29 0 .436a8.216 8.216 0 01-.346 1.154 8.303 8.303 0 01-.82 1.72 11.912 11.912 0 01-1.69 2 15.952 15.952 0 01-2.755 2.13 25.602 25.602 0 01-9.326 3.36 35.176 35.176 0 01-10.877.192 24.896 24.896 0 01-9.339-3.053 12.127 12.127 0 01-5.304-5.566 8.192 8.192 0 010-6.593 12.692 12.692 0 015.266-5.759 28.966 28.966 0 0114.655-4.284zm4.663 13.262c-.17-.891-.77-1.64-1.601-2.001a6.579 6.579 0 00-3.33-.911 5.619 5.619 0 00-3.101.795 2.283 2.283 0 00-1.281 2.001c.117.89.69 1.654 1.512 2.014a6.54 6.54 0 003.394.86 6.092 6.092 0 003.254-.847 2.065 2.065 0 001.205-1.911" fill="#3E2928" fill-rule="nonzero" />
</g>
</svg>
<div class="box">
<div class="leftSide">
<svg class="svgWoman" width="472" height="359" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="61.181%" y1="36.82%" x2="40.788%" y2="55.54%" id="a">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="82.186%" y1="28.519%" x2="29.852%" y2="62.464%" id="b">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="80.66%" y1="21.864%" x2="21.557%" y2="66.62%" id="c">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="81.016%" y1="60.589%" x2="67.462%" y2="55.277%" id="d">
<stop stop-color="#FFF" stop-opacity="0" offset="0%" />
<stop stop-color="#DC841E" offset="99%" />
</linearGradient>
<linearGradient x1="82.183%" y1="27.537%" x2="29.857%" y2="62.324%" id="e">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
</defs>
<g fill-rule="nonzero" fill="none">
<path d="M229.018 355.203L9.313 225.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 83.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 354.998a29.178 29.178 0 01-28.953.205z" fill="#5B36A0" />
<path d="M229.018 349.203L9.313 219.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 77.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 348.998a29.178 29.178 0 01-28.953.205z" fill="#6862E6" />
<path d="M247.133 177.693L203.78 202.46s66.783 40.8 80.439 46.546l24.968-35.913" fill="url(#a)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M232.157 296.513l-43.365-24.715-43.364 24.767s22.585 13.8 44.171 26.473c13.708-9.71 27.428-19.521 42.558-26.525z" fill="url(#b)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M138.728 143.883l-27.505 15.712s2.331 14.404 15.988 20.15l36.01-23.087" fill="url(#c)" opacity=".46" style="mix-blend-mode: multiply" />
<ellipse fill="#68E1FD" cx="152.192" cy="147.898" rx="16.59" ry="11.697" />
<ellipse fill="#974C26" cx="152.179" cy="140.997" rx="12.426" ry="5.092" />
<path d="M151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012zM151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012z" fill="#999A1C" />
<path d="M264.35 168.022l-23.994 11.543a5.53 5.53 0 00-.384 9.76l56.867 33.22a5.518 5.518 0 007.43-1.782l13.823-21.523" fill="#A1482D" />
<path d="M394.854 112.344L203.524 1.962a8.626 8.626 0 00-8.626.01 8.644 8.644 0 00-4.312 7.48v114.833a7.184 7.184 0 003.587 6.22L398.146 248.39a4.62 4.62 0 004.632.003 4.631 4.631 0 002.312-4.018V130.018a20.398 20.398 0 00-10.236-17.674z" fill="#F47B56" />
<path d="M203.537 10.646l185.552 106.88a13.034 13.034 0 016.52 11.286v86.076a4.708 4.708 0 01-2.344 4.065 4.697 4.697 0 01-4.688.014L199.348 110.304a4.643 4.643 0 01-2.331-4.027V14.429c0-1.555.827-2.992 2.171-3.772a4.351 4.351 0 014.35-.011z" fill="#FFF" />
<ellipse fill="#AB643C" transform="rotate(-10.9 280.738 168.465)" cx="280.738" cy="168.465" rx="4.036" ry="4.617" />
<path fill="url(#d)" opacity=".32" d="M253.41 127.427l86.23 51.869 42.595-24.793-76.109-44.353" />
<path d="M359.97 117.102l-93.224-56.91a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884V95.53a3.4 3.4 0 001.627 2.924l93.212 55.704c.997.567 2.22.56 3.21-.02a3.22 3.22 0 001.594-2.79l.487-30.23a4.542 4.542 0 00-2.063-4.015z" fill="#E2AC00" />
<path d="M337.667 133.789c3.343 4.681 9.223 5.99 13.118 2.937 3.894-3.053 4.343-9.324 1-13.993-3.345-4.669-9.225-5.99-13.12-2.937-3.894 3.052-4.342 9.311-.998 13.993z" fill="#FFF" />
<path d="M328.52 111.318l-38.023-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91zM326.957 120.63l-52.41-31.591a1.45 1.45 0 00-1.396 2.488l52.345 31.603a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91v-.013z" fill="#F2F2F2" />
<path d="M341.369 123.387L248.196 66.49a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884v32.411a3.4 3.4 0 001.615 2.938l93.211 55.703c1.008.58 2.25.57 3.248-.025a3.22 3.22 0 001.569-2.848l.487-30.23a4.542 4.542 0 00-2.114-3.964z" fill="#F47B56" />
<path d="M319.065 140.074c3.344 4.681 9.224 5.99 13.119 2.937 3.894-3.053 4.342-9.325.999-13.993-3.344-4.67-9.224-5.99-13.118-2.938-3.895 3.053-4.343 9.312-1 13.994z" fill="#FFF" />
<path d="M309.918 117.602l-38.048-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91h.025zM308.343 126.978l-52.397-31.642a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91l-.012.051z" fill="#F2F2F2" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M295.673 143.896c3.343 4.681 9.224 5.99 13.118 2.937 3.895-3.053 4.343-9.325 1-13.993-3.344-4.669-9.225-5.99-13.119-2.937-3.894 3.052-4.304 9.311-1 13.993z" fill="#FFF" />
<path d="M286.526 121.425l-38.035-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.401 1.91l38.023 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91h.013zM284.95 130.75l-52.409-31.592a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91z" fill="#F2F2F2" />
<path d="M195.672 124.028a45.406 45.406 0 00-13.208 19.38c-4.638 12.827 6.956 33.784 6.956 33.784l18.038-14.3" fill="#FF8F6F" />
<path d="M193.724 293.602l-4.893-2.706 1.28-7.003s7.29.692 7.93 3.283" fill="#003B94" />
<path d="M195.518 293.5c1.102-.68 2.255-1.283 3.395-1.886 2.83-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.044-1.436-.563-.68-.832-11.467-.832-11.467l-10.915 2.95s-1.845 21.676-1.64 23.01c.205 1.334 3.959 2.566 3.959 2.566a9.666 9.666 0 003.151-1.283c1.14-.834.102-11.005 1.563-9.581 1.46 1.424 2.1 6.99 2.1 6.99.607.092 1.222.11 1.833.051z" fill="#F47B56" />
<path d="M214.568 304.08l-4.894-2.667 1.28-7.003s7.29.693 7.93 3.283" fill="#003B94" />
<path d="M216.412 303.978c1.102-.68 2.255-1.282 3.395-1.885 2.831-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.043-1.436-.564-.68-.833-11.467-.833-11.467l-10.915 2.95s-1.857 21.753-1.652 23.036c.205 1.282 3.958 2.565 3.958 2.565a9.666 9.666 0 003.152-1.283c1.14-.833.102-11.004 1.563-9.58 1.46 1.423 2.1 6.99 2.1 6.99a7.498 7.498 0 001.845.025z" fill="#F47B56" />
<path d="M179.005 233.614l-3.216 43.058s5.125 7.08 22.304 3.142l.166-29.026M198.849 242.144c-.372 3.706 0 44.596 0 44.596s4.752 8.901 25.442 0l-.295-34.746" fill="#3E2928" />
<path d="M177.403 247.838c1.41.975 1.896-4.04 3.37-3.18a83.77 83.77 0 0016.961 7.49h.128a1.165 1.165 0 011.576.577 89.585 89.585 0 0011.133 2.565c4.83.77 8.826-2.808 13.784-3.052 0-19.008.09-73.109-7.994-84.652l-23.918-8.055c-.115 1.975-11.606 15.314-11.325 31.578.32 18.328-2.062 35.618-2.472 41.351-.064.975-1.191 14.34-1.243 15.378z" fill="#3E2928" />
<path d="M218.564 145.73l-2.203 21.804s-17.845.719-25.532-4.591v-18.496" fill="#FF8F6F" />
<path d="M241.252 131.378l-1.819 2.488c.97-2.024 1.826-4.1 2.562-6.22.513-1.45-1.806-2.027-2.318-.578l-.27.744c.223-.77.432-1.543.628-2.322a1.195 1.195 0 10-2.319-.577 62.236 62.236 0 01-1.806 5.952 42.54 42.54 0 00.846-5.26c.154-1.525-2.242-1.461-2.383 0a37.916 37.916 0 01-1.076 5.965c0-.684-.064-1.368-.192-2.052a1.206 1.206 0 00-.5-.86 9.29 9.29 0 00-.23-.795 1.204 1.204 0 00-2.345.36l-.154 8.978c-.433.93-.999 1.795-1.678 2.565a41.64 41.64 0 013.331 2.565 34.337 34.337 0 012.716 2.565 65.716 65.716 0 002.216-2.924c.088-.075.166-.161.23-.257a255.44 255.44 0 016.611-9.337c.948-1.052-1.14-2.219-2.05-1z" fill="#FFB5A9" />
<path d="M207.24 125.85s8.43 2.27 11.85 7.695a96.553 96.553 0 015.65 11.66l6.225-9.685s7.559 2.322 10.556 6.042c0 0-8.967 19.623-16.782 21.304-7.814 1.68-16.116-11.518-16.116-11.518s-1.716 5.515-1.383-.372" fill="#FF8F6F" />
<path d="M212.595 146.82a17.097 17.097 0 01-5.342-7.618c-1.013-3.45.256-6.478 1.434-9.684a31.237 31.237 0 002.204-9.966c.102-3.36-.282-6.72-.513-10.069a.976.976 0 010-.436c-1.127-3.783-3.433-6.99-7.98-7.375-11.774-1-12.44 12.057-12.35 17.367.09 5.31.653 8.901-3.254 11.12-3.908 2.219-6.726 8.042-2.998 12.75 3.728 4.706.384 2.988-2.101 7.169-2.485 4.181-1.845 9.402 3.254 11.287 5.099 1.885 28.799-1.655 30.976-3.848a4.531 4.531 0 001.115-3.206 12.444 12.444 0 00-4.445-7.49z" fill="#007F68" />
<path d="M224.176 39.132a18.805 18.805 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.624 2.624 0 01-3.178.552 4.906 4.906 0 01-1.716-1.154 5.989 5.989 0 01-1.102-1.398l-.307-.603a2.13 2.13 0 01-.308.436 2.24 2.24 0 01-1.05.449 3.186 3.186 0 01-1.896-.231 7.113 7.113 0 01-3.357-3.014 9.692 9.692 0 01-1.486-4.861 4.775 4.775 0 011.192-3.848 2.739 2.739 0 013.113-.488c.513.205.986.5 1.396.873.35.297.659.637.922 1.013l.23.41v-1.141l2.563 1 .256 7.209c.018.516.178 1.017.462 1.449.24.417.609.745 1.05.936 1.238.488 1.81-.581 1.717-3.206a13.889 13.889 0 00-2.473-7.247 12.136 12.136 0 00-5.675-4.848 4.774 4.774 0 00-5.33.68 7.252 7.252 0 00-2.062 5.925 15.3 15.3 0 002.562 7.696 11.817 11.817 0 005.47 5.13c.812.34 1.684.51 2.563.5a3.417 3.417 0 001.665-.307l.513-.283 1.55 2.886-.257.18a6.133 6.133 0 01-.755.359c-.41.177-.84.298-1.282.36a6.398 6.398 0 01-1.703 0 8.575 8.575 0 01-2.165-.552 14.093 14.093 0 01-5.125-3.771 22.36 22.36 0 01-3.971-6.208 19.027 19.027 0 01-1.64-6.888c-.138-2 .27-3.999 1.179-5.784a6.51 6.51 0 013.638-3.207 7 7 0 015.047.257 16.288 16.288 0 017.508 6.438zm-5.65 9.12c.42-.538.61-1.221.525-1.899a4.904 4.904 0 00-.679-2.372 3.255 3.255 0 00-1.55-1.411 1.395 1.395 0 00-1.576.205 2.35 2.35 0 00-.563 1.86c.029.846.28 1.669.73 2.385.37.652.94 1.165 1.627 1.463a1.28 1.28 0 001.486-.231M375.433 178.013a18.74 18.74 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.637 2.637 0 01-3.177.552 5.047 5.047 0 01-1.717-1.154 6.207 6.207 0 01-1.102-1.399l-.307-.602c-.087.156-.19.302-.308.436-.304.24-.666.395-1.05.449a3.071 3.071 0 01-1.883-.218 7.113 7.113 0 01-3.357-3.027 9.653 9.653 0 01-1.499-4.874 4.724 4.724 0 011.192-3.848 2.726 2.726 0 013.1-.487c.514.204.987.499 1.396.872.35.302.66.647.923 1.026l.243.41v-1.141l2.562.987.257 7.209c.022.515.181 1.015.46 1.449.242.417.61.745 1.051.936 1.281.488 1.807-.577 1.73-3.206a13.953 13.953 0 00-2.473-7.26 12.161 12.161 0 00-5.662-4.835 4.787 4.787 0 00-5.33.667 7.252 7.252 0 00-2.01 5.964 15.25 15.25 0 002.561 7.695 11.868 11.868 0 005.535 4.964 6.668 6.668 0 002.562.513 3.545 3.545 0 001.665-.308l.513-.282 1.55 2.886-.256.18a6.133 6.133 0 01-.756.359c-.412.17-.842.29-1.281.359a6.526 6.526 0 01-1.717 0 8.55 8.55 0 01-2.152-.564 14.093 14.093 0 01-5.125-3.759 22.41 22.41 0 01-3.97-6.22 18.988 18.988 0 01-1.64-6.888 11.003 11.003 0 011.178-5.772 6.562 6.562 0 013.638-3.219 7.09 7.09 0 015.06.257 16.315 16.315 0 017.354 6.592zm-5.65 9.12a2.567 2.567 0 00.538-1.899 4.865 4.865 0 00-.691-2.372 3.204 3.204 0 00-1.538-1.411 1.395 1.395 0 00-1.575.192 2.323 2.323 0 00-.577 1.86c.03.842.281 1.66.73 2.373.369.655.94 1.172 1.627 1.475a1.28 1.28 0 001.486-.218" fill="#F47B56" />
<path d="M120.139 232.704L76.774 208l-43.351 24.754s24.122 15.083 45.709 27.756c13.707-9.697 25.89-20.791 41.007-27.807z" fill="url(#e)" opacity=".25" style="mix-blend-mode: multiply" />
</g>
</svg>
</div>
<div class="rightSide">
<h1>FAQ</h1>
<button onclick="toggleElement('btnFaq1')" class="btnFaq" id="btnFaq1">
How many team members can I invite?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide1" class="hiddenElement">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq2')" id="btnFaq2" class="btnFaq">
What is the maximum file upload size?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide2" class="hiddenElement">
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq3')" id="btnFaq3" class="btnFaq">
How do I reset my password?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide3" class="hiddenElement">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq4')" id="btnFaq4" class="btnFaq">
Can I cancel my subscription?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide4" class="hiddenElement">
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq5')" id="btnFaq5" class="btnFaq">
Do you provide additional support?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide5" class="hiddenElement">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</p>
<div class="divider"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Refer the jsFiddle: https://jsfiddle.net/zqh3ra0u/2/
Read your code more attentively before asking, you wrote with instead of width in the #media rule.
I'm having massive headaches trying to fin the sweet-spot to achieve "8" shape animation using the combination of just <animate attributeName="cx"> and <attributeName="cy">.
I'll like to do it using that since it seems, by my metrics, that it's the most performant in terms of FPS, CPU and GPU usage.
Quick demo of the "ideal" motion path: https://codepen.io/ivancis/pen/eYmZowz
New solution caused by refinements in comments
I need to animate a svg element using just a combination of
<animate attributeName="cx"> <animate attributeName="cy"> (for
performance) to make an "8" shape motion, looped
Since the author does not want to use the animateMotion command, in this case
I see only one way to implement the animation of the movement of the circle along the infinity symbol:
It is necessary to sequentially select many points along the infinity symbol and assign their coordinates to the circle cx = "x", cy = "y"
The more points you select, the closer the trajectory moving of the circle along the infinity symbol
In the vector editor, I sequentially put circles on the infinity symbol and wrote down their coordinates of the center of the circle. The first circle has the center coordinates cx ="70" cy ="60"
So, it was done for all circles located along the infinity symbol. The last circle has the same coordinates as the first one, thereby realizing a closed cycle
It remains only to substitute these values in the animation formulas cx, cy
Circle motion animation cx, cy with radius r="5
<div class="group">
<svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120">
<circle fill="olive" cx="70" cy="60" r="5">
<animate
attributeName="cx"
attributeType="XML"
repeatCount="indefinite"
begin="0s"
dur="2s"
values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69;
73;76;79;81;80;78;74;70">
</animate>
<animate
attributeName="cy"
attributeType="XML"
repeatCount="indefinite"
begin="0"
dur="2s"
values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79;
80;80;79;76;72;67;64;61;60">
</animate>
</circle>
<path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/>
</svg>
</div>
Radius r = 40 as in the example of the author of the question
<div class="group">
<svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120">
<circle fill="olive" cx="70" cy="60" r="40">
<animate
attributeName="cx"
attributeType="XML"
repeatCount="indefinite"
begin="0s"
dur="2s"
values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69;
73;76;79;81;80;78;74;70">
</animate>
<animate
attributeName="cy"
attributeType="XML"
repeatCount="indefinite"
begin="0"
dur="2s"
values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79;
80;80;79;76;72;67;64;61;60">
</animate>
</circle>
<path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/>
</svg>
</div>
You didn’t say what kind of animation you really want.
Therefore, I will offer examples of different types of animation and you can choose any them and somehow modify for yourself.
Infinity Symbol Moving Animation
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 0 100 100">
<path fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10">
<animateTransform
attributeName="transform"
type="translate"
values="0; 150; 0"
begin="0s"
dur="4s"
repeatCount="indefinite" />
</path>
</svg>
Rotation
Mouse over symbol
.infinity1{
transform-box: fill-box;
transform-origin: center center;
transition: rotate 2s linear ;
}
.infinity1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
100% {transform :rotate(360deg);}
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path class="infinity1" fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
</svg>
Rotation around the axis Y
.infinity1{
transform-box: fill-box;
transform-origin: center center;
transition: rotate 2s linear ;
fill:transparent;
}
.infinity1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
100% {transform :rotateY(360deg);}
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" >
<path class="infinity1" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
</svg>
Animation of infinity symbol filling by changing attribute stroke-dasharray
Click on the colored letters in circles
.container {
width:40%;
height="40%";
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the left stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint left top stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint lower right stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the right stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>
Live Demo
I was looking into a similar thing and came across this answer. #Alexandr_TT's answer got me thinking about a more flexible way to do this, without using a graphics editor (like Inkscape etc.)
I came up with the following idea:
Use the <AnimateMotion/> for the first loop.
Fire a setInterval every X milliseconds and each time it fires to capture the centre point of the circle (from circle.getBoundingClientRect() and svg.matrixTransform())
Push these x and y values to two arrays to capture them
When the AnimateMotion ends, clear the current setInterval and push the first element also to the end of each of the arrays (to close the loop)
Remove the <AnimateMotion/> tag from the DOM
Push these arrays to the values attribute of the <animate id="cx" attributeName="cx" values="" .../> and <animate id="cy" attributeName="cy" values="" .../> tags
begin both of these animate tags with cx.beginElement() and cy.beginElement()
You could just be happy with this performance-wise, or you could copy-paste the DOM elements with their values="..." attributes and save that as your new master file, essentially achieving what #Alexandr_TT did with the graphics editor. Of course, this method I am showing is flexible if you decide to change your path etc.
Demo: https://codepen.io/Alexander9111/pen/VwLaNEN
HTML:
<circle id="circle" class="circle" cx="0" cy="00" r="125">
<animateMotion
path="M162.9,150c6.8-0.2,12.1-5.7,12.1-12.5c0-6.9-5.6-12.5-12.5-12.5c-6.8,0-12.3,5.4-12.5,12.2v25.7 c-0.2,6.8-5.7,12.2-12.5,12.2c-6.9,0-12.5-5.6-12.5-12.5c0-6.8,5.4-12.3,12.1-12.5L162.9,150z"
dur="4s" begin="0s"
epeatCount="1" fill="freeze"
calcMode="linear"
fill="freeze">
</animateMotion>
<animate id="cx" attributeName="cx" values="" dur="4s" repeatCount="indefinite" begin="indefinite"/>
<animate id="cy" attributeName="cy" values="" dur="4s" repeatCount="indefinite" begin="indefinite"/>
</circle>
JS:
const svg = document.querySelector('svg');
const animateElem = document.querySelector('animateMotion');
const circle = document.querySelector('#circle');
const cx = document.querySelector('#cx');
const cy = document.querySelector('#cy');
let myInterval;
let valuesX = [];
let valuesY = [];
function startFunction() {
const box = circle.getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = (box.left + box.right) / 2;
pt.y = (box.top + box.bottom) / 2;
var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
console.log(svgP.x,svgP.y)
valuesX.push(svgP.x);
valuesY.push(svgP.y);
}
function endFunction() {
animateElem.parentNode.removeChild(animateElem);
clearInterval(myInterval)
valuesX.push(valuesX[0]);
valuesY.push(valuesY[0]);
cx.setAttribute('values', valuesX.join('; '));
cy.setAttribute('values', valuesY.join('; '));
circle.setAttribute('cx', 0);
circle.setAttribute('cy', 0);
cx.beginElement();
cy.beginElement();
}
animateElem.addEventListener('beginEvent', () => {
console.log('beginEvent fired');
myInterval = setInterval(startFunction, 50);
})
animateElem.addEventListener('endEvent', () => {
console.log('endEvent fired');
endFunction();
})
I have a svg file, I want to make the stars spin like rotors.
My code is as follows:
.my-spin {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg enable-background="new 0 0 951.7 589.2" version="1.1" viewBox="0 0 951.7 589.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<circle cx="567.1" cy="162.1" r="7.4" fill="#fff"/>
<polygon class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<circle cx="694.4" cy="189.4" r="7.1" fill="#fff"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<circle cx="522.1" cy="302.7" r="7.8" fill="#fff"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<circle cx="644.8" cy="381.5" r="6.8" fill="#fff"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<circle cx="346.5" cy="274.1" r="7.8" fill="#fff"/>
</svg>
I tried following some links but it still doesn't work as I want.
CSS3 Spin Animation
https://codepen.io/teerapuch/pen/vLJXeR
https://flaviocopes.com/css-animations/
How to make stars turn like propellers
Thanks All
You need to apply transform-box: fill-box; to .my-spin class.
.my-spin {
transform-box: fill-box;
animation: spin 2s linear infinite;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg enable-background="new 0 0 951.7 589.2" version="1.1" viewBox="0 0 951.7 589.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<circle cx="567.1" cy="162.1" r="7.4" fill="#fff"/>
<polygon class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<circle cx="694.4" cy="189.4" r="7.1" fill="#fff"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<circle cx="522.1" cy="302.7" r="7.8" fill="#fff"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<circle cx="644.8" cy="381.5" r="6.8" fill="#fff"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<circle cx="346.5" cy="274.1" r="7.8" fill="#fff"/>
</svg>
Have this problem
The blue circle (#Mark) should have black round border. For some reason it is not. Although if it is not a svg sprite but two separate svg elements everything is ok.
SVG:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
<path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
</defs>
<symbol id="Bell" viewBox="0 0 17 19">
<g>
<g transform="translate(-1334 -20)">
<use fill="#a56ea3" xlink:href="#r8qna"/>
<use fill="#e0e0e0" xlink:href="#r8qna"/>
</g>
</g>
</symbol>
<symbol id="Mark" viewBox="0 0 5 5">
<g>
<g transform="translate(-1072 -101)">
<use fill="#30a1d6" xlink:href="#rfoga"/>
</g>
</g>
</symbol>
</svg>
CSS code
&__bell-icon {
fill: #e0e0e0;
height: 19px;
width: 17px;
}
&__circle-icon {
position: absolute;
visibility: visible;
height: 5px;
width: 5px;
stroke:$icon-stroke-light;
}
HTML code:
<span class="notifications__icons">
<svg class="notifications__bell-icon"><use href="../../../images/BellWithMark.svg#Bell"></svg>
<svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
</span>
Your #Mark symbol is too small. You need to add some space for the stroke. Use <symbol id="Mark" viewBox="-1 -1 7 7"> instead of <symbol id="Mark" viewBox="0 0 5 5">. If needed change CSS accordingly.
I needed to see what happens so I've changed the size of your icons.
.notifications__bell-icon {
fill: #e0e0e0;
height: 190px;
width: 170px;
position: absolute;
}
.notifications__circle-icon {
position: absolute;
visibility: visible;
height: 50px;
width: 50px;
stroke:black;
}
<span class="notifications__icons">
<svg class="notifications__bell-icon"><use href="#Bell"></svg>
<svg class="notifications__circle-icon"><use href="#Mark"></svg>
</span>
<svg>
<defs>
<path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
<path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
</defs>
<symbol id="Bell" viewBox="0 0 17 19">
<g>
<g transform="translate(-1334 -20)">
<use fill="#a56ea3" xlink:href="#r8qna"/>
<use fill="#e0e0e0" xlink:href="#r8qna"/>
</g>
</g>
</symbol>
<symbol id="Mark" viewBox="-1 -1 7 7">
<g>
<g transform="translate(-1072 -101)">
<use fill="#30a1d6" xlink:href="#rfoga"/>
</g>
</g>
</symbol>
</svg>