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>
Related
below i got an svg icon that scale up in size while hovering but it doesnt seem to scale from the center , how i can fix that? appreciate your feedback
<motion.svg
xmlns="http://www.w3.org/2000/svg"
height="42px"
viewBox="0 0 24 24"
width="42px"
fill="#FFFFFF"
whileHover={{
scale: 1.3,
}}
>
<path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h5v12H1z" />
</motion.svg>
The width and height don't match the viewBox properties (24 vs 42). If you make those match it should scale from the center.
Edit:
You might have better luck wrapping the SVG in a div and using that to set the size you want:
<motion.div
whileHover={{
scale: 1.3
}}
style={{ width: 64, height: 64 }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="100%"
width="100%"
viewBox="0 0 24 24"
fill="#000"
>
<path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h5v12H1z" />
</svg>
</motion.div>
The goal is this cool sparkle effect by Josh W Comeau :
He achieve this by inserting an element for each sparkle with javascript. I want to do this effect in a web app where I can only use CSS.
My idea is to use several background image on a :after and a :before pseudoelement, to position the stars in front and behind the text and animate each background image (scale + rotate).
I managed to scale the background images around their visual center by calculating the correct background-position and background-size, but I have no idea how to also make them rotate in place.
Is it possible with css only ?
Here's what I have so far (I use squares for simplicity sake):
* {
box-sizing: margin-box;
}
:root {
/* Use d='M.5 0A.5.5 90 001 .5.5.5 90 00.5 1 .5.5 90 000 .5.5.5 90 00.5 0' for a star shape */
/* bg images */
--square: url("data:image/svg+xml,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg'><path style='vector-effect:non-scaling-stroke' stroke='black' fill='none' stroke-width='1px' opacity='.1' d='M0 0 1 0 1 1 0 1 0 0'/></svg>");
--red: url("data:image/svg+xml,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg'><path fill='red' d='m0 0 1 0 0 1L0 1'/></svg>");
--green: url("data:image/svg+xml,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg'><path fill='green' d='m0 0 1 0 0 1L0 1'/></svg>");
--blue: url("data:image/svg+xml,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg'><path fill='blue' d='m0 0 1 0 0 1L0 1'/></svg>");
/* grid unit */
--unit: calc(100vw/19);
/* set images */
--background-image: var(--square), var(--red), var(--green), var(--blue);
--background-repeat: space, no-repeat, no-repeat, no-repeat;
/* sizes */
--offset-X: 1;
--offset-Y: 1;
--red-scale:3;
--red-size-from:var(--unit);
--red-size-to: calc(var(--unit) * var(--red-scale));
--red-offset:calc((var(--red-scale) - 1)/2);
--offset-X1: 5;
--offset-Y1: 3;
--green-scale:5;
--green-size-from: var(--unit);
--green-size-to: calc(var(--unit) * var(--green-scale));
--green-offset:calc((var(--green-scale) - 1)/2);
--offset-X2: 0;
--offset-Y2: 0;
--blue-scale:19;
--blue-size-from: var(--unit);
--blue-size-to: calc(var(--unit) * var(--blue-scale));
--blue-offset:calc((var(--blue-scale) - 1)/2);
--red-position-from: calc(var(--unit) * calc(var(--offset-X) + var(--red-offset))) calc(var(--unit) * (var(--offset-Y) + var(--red-offset)));
--red-position-to: calc(var(--unit) * var(--offset-X)) calc(var(--unit) * var(--offset-Y));
--green-position-from: calc(var(--unit) * calc(var(--offset-X1) + var(--green-offset))) calc(var(--unit) * (var(--offset-Y1) + var(--green-offset)));
--green-position-to: calc(var(--unit) * var(--offset-X1)) calc(var(--unit) * var(--offset-Y1));
--blue-position-from: calc(var(--unit) * calc(var(--offset-X2) + var(--blue-offset))) calc(var(--unit) * (var(--offset-Y2) + var(--blue-offset)));
--blue-position-to: calc(var(--unit) * var(--offset-X2)) calc(var(--unit) * var(--offset-Y2));
/* result */
--background-size-from: var(--unit), var(--red-size-from), var(--green-size-from), var(--blue-size-from);
--background-size-to: var(--unit), calc(var(--red-size-to)), calc(var(--green-size-to)), calc(var(--blue-size-to));
--background-position-from: 0 0, var(--red-position-from), var(--green-position-from), var(--blue-position-from);
--background-position-to: 0 0, var(--red-position-to), var(--green-position-to), var(--blue-position-to);
}
body {
margin: 0;
aspect-ratio: 1;
background-image: var(--background-image);
background-repeat: var(--background-repeat);
overflow: hidden;
animation: scaling 3s ease infinite alternate;
animation-delay: 0,1s,2s,3s;
}
#keyframes scaling {
from {
background-size: var(--background-size-from);
background-position: var(--background-position-from);
}
to {
background-size: var(--background-size-to);
background-position: var(--background-position-to);
}
}
https://codepen.io/DesignThinkerer/pen/NWaNXOO
Here I'm creating two <symbol> elements that represent a star each. All animations are done in SVG animations. The two symbols differ a bit in the timing. The <use> elements refer to the two symbols and I animate the visibility attribute to make the star appear/disappear "randomly". The timing of the visibility is following the timing of the symbols.
In the example I embed the SVG and I have made a Data URL version of the same SVG and using that as a background on the <h1>.
I fell that this is a fairly simple solution, but maybe you can do something similar using CSS animations.
body {
background: black;
color: white;
}
h1 {
font-family: sans-serif;
display: inline-block;
padding: .2em;
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHN5bWJvbCBpZD0ic3RhcjEiIHZpZXdCb3g9IjAgMCA0IDQiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgogICAgPGc+CiAgICAgIDxwYXRoIHRyYW5zZm9ybS1vcmlnaW49IjEuNSAxLjUiIGZpbGw9Im9yYW5nZSIKICAgICAgICBkPSJNIDAgMCBDIDEgMSAxIDIgMCAzIEMgMSAyIDIgMiAzIDMgQyAyIDIgMiAxIDMgMCBDIDIgMSAxIDEgMCAwIj4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InNjYWxlIgogICAgICAgICAgdmFsdWVzPSIwIDA7IDEgMTsgMCAwIgogICAgICAgICAga2V5VGltZXM9IjAgOyAuNCA7IDEiCiAgICAgICAgICBkdXI9IjNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgICA8L3BhdGg+CiAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdHlwZT0icm90YXRlIgogICAgICAgICAgdmFsdWVzPSIwIDEuNSAxLjU7IDkwIDEuNSAxLjUiCiAgICAgICAgICBrZXlUaW1lcz0iMCA7IDEiCiAgICAgICAgICBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgPC9nPgogIDwvc3ltYm9sPgogIAogIDxzeW1ib2wgaWQ9InN0YXIyIiB2aWV3Qm94PSIwIDAgNCA0IiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij4KICAgIDxnPgogICAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAgMCkiIHRyYW5zZm9ybS1vcmlnaW49IjEuNSAxLjUiIGZpbGw9Im9yYW5nZSIKICAgICAgICBkPSJNIDAgMCBDIDEgMSAxIDIgMCAzIEMgMSAyIDIgMiAzIDMgQyAyIDIgMiAxIDMgMCBDIDIgMSAxIDEgMCAwIj4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InNjYWxlIgogICAgICAgICAgdmFsdWVzPSIwIDA7IDEgMTsgMCAwIgogICAgICAgICAga2V5VGltZXM9IjAgOyAuNCA7IDEiCiAgICAgICAgICBkdXI9IjNzIiBiZWdpbj0iMS41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgICAgPC9wYXRoPgogICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIKICAgICAgICAgIHZhbHVlcz0iMCAxLjUgMS41OyA5MCAxLjUgMS41IgogICAgICAgICAga2V5VGltZXM9IjAgOyAxIgogICAgICAgICAgZHVyPSIxcyIgYmVnaW49IjEuNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICA8L2c+CiAgPC9zeW1ib2w+CgogIDx1c2UgaHJlZj0iI3N0YXIxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDEpIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InZpc2liaWxpdHkiIHZhbHVlcz0idmlzaWJsZTtoaWRkZW47aGlkZGVuO3Zpc2libGU7aGlkZGVuO2hpZGRlbiIgIGtleVRpbWVzPSIwOy4yOy40Oy42Oy44OzEiIGR1cj0iMTVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L3VzZT4KICAKICA8dXNlIGhyZWY9IiNzdGFyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCAyKSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ2aXNpYmlsaXR5IiB2YWx1ZXM9ImhpZGRlbjt2aXNpYmxlO2hpZGRlbjt2aXNpYmxlO2hpZGRlbjtoaWRkZW4iICBrZXlUaW1lcz0iMDsuMjsuNDsuNjsuODsxIiBkdXI9IjE1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgPC91c2U+CiAgCiAgPHVzZSBocmVmPSIjc3RhcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2IDIpIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InZpc2liaWxpdHkiIHZhbHVlcz0iaGlkZGVuO2hpZGRlbjtoaWRkZW47dmlzaWJsZTt2aXNpYmxlO2hpZGRlbiIgIGtleVRpbWVzPSIwOy4yOy40Oy42Oy44OzEiIGR1cj0iMTVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L3VzZT4KICAKICA8dXNlIGhyZWY9IiNzdGFyMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgNikiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0idmlzaWJpbGl0eSIgdmFsdWVzPSJ2aXNpYmxlO2hpZGRlbjtoaWRkZW47dmlzaWJsZTtoaWRkZW47aGlkZGVuIiAga2V5VGltZXM9IjA7LjI7LjQ7LjY7Ljg7MSIgZHVyPSIxNXMiIGJlZ2luPSIxLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L3VzZT4KICAKICA8dXNlIGhyZWY9IiNzdGFyMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAgNSkiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0idmlzaWJpbGl0eSIgdmFsdWVzPSJ2aXNpYmxlO2hpZGRlbjt2aXNpYmxlO2hpZGRlbjt2aXNpYmxlO2hpZGRlbiIgIGtleVRpbWVzPSIwOy4yOy40Oy42Oy44OzEiIGR1cj0iMTVzIiBiZWdpbj0iMS41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgPC91c2U+CiAgCiAgPHVzZSBocmVmPSIjc3RhcjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0IDYpIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InZpc2liaWxpdHkiIHZhbHVlcz0iaGlkZGVuO3Zpc2libGU7dmlzaWJsZTtoaWRkZW47dmlzaWJsZTtoaWRkZW4iICBrZXlUaW1lcz0iMDsuMjsuNDsuNjsuODsxIiBkdXI9IjE1cyIgYmVnaW49IjEuNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvdXNlPgo8L3N2Zz4=')
}
svg {
border: solid thin gray;
}
<h1>Sparkly text.</h1>
<svg viewBox="0 0 50 10" xmlns="http://www.w3.org/2000/svg">
<symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
<g>
<path transform-origin="1.5 1.5" fill="orange"
d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
<animateTransform attributeName="transform"
attributeType="XML" type="scale"
values="0 0; 1 1; 0 0"
keyTimes="0 ; .4 ; 1"
dur="3s" repeatCount="indefinite"/>
</path>
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
values="0 1.5 1.5; 90 1.5 1.5"
keyTimes="0 ; 1"
dur="1s" repeatCount="indefinite"/>
</g>
</symbol>
<symbol id="star2" viewBox="0 0 4 4" width="5" height="5">
<g>
<path transform="scale(0 0)" transform-origin="1.5 1.5" fill="orange"
d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
<animateTransform attributeName="transform"
attributeType="XML" type="scale"
values="0 0; 1 1; 0 0"
keyTimes="0 ; .4 ; 1"
dur="3s" begin="1.5s" repeatCount="indefinite"/>
</path>
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
values="0 1.5 1.5; 90 1.5 1.5"
keyTimes="0 ; 1"
dur="1s" begin="1.5s" repeatCount="indefinite"/>
</g>
</symbol>
<use href="#star1" transform="translate(2 1)">
<animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite" />
</use>
<use href="#star1" transform="translate(8 2)">
<animate attributeName="visibility" values="hidden;visible;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite" />
</use>
<use href="#star1" transform="translate(26 2)">
<animate attributeName="visibility" values="hidden;hidden;hidden;visible;visible;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite" />
</use>
<use href="#star2" transform="translate(10 6)">
<animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite" />
</use>
<use href="#star2" transform="translate(20 5)">
<animate attributeName="visibility" values="visible;hidden;visible;hidden;visible;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite" />
</use>
<use href="#star2" transform="translate(34 6)">
<animate attributeName="visibility" values="hidden;visible;visible;hidden;visible;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite" />
</use>
</svg>
I'm building a progress circle that represents a users level up to three. It contains three dashes around the perimeter. A darker line that overlaps each dash will represent the user's progress. If a user is level one, the first dash should be overlapped by an amount equal to (their current experience / total experience to next level). If the user is level two, the first dash should be fully overlapped and the second dash should be the same as the above and so on. I've built my SVG circle with the following code:
<svg
width="240"
height="240"
viewBox="0 0 240 240"
strokeWidth="2px"
strokeDasharray="220 10"
strokeDashoffset="50"
>
<circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" />
</svg>
This image represents a user that is on level two and about halfway through to level three.
How could I calculate a <path> to overlap the circle and display the user's progress?
This is how you'd do it with an arc path. Draw the arc from the bottom of the circle to +1 unit in the x axis. Set the pathLength="100" so you can calculate the required dash array appropriately. Then make sure your dash-array adds up to 100.
Note - you can't use a round line-cap for this method - there is a bug in Chrome that adds an incorrect line-cap at the end of the stroke-dash array.
<svg
width="240px"
height="240px"
viewBox="0 0 240 240"
stroke-width="4"
stroke-dasharray="220 10"
stroke-dashoffset="50"
stroke-linecap ="none">
<circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" />
<path pathLength="100" d="M120 230 a 110 110 0 1 1 1 0" stroke="red" fill="none" stroke-width="8" stroke-dasharray="0 1 32 1 15 50" stroke-dashoffset="0"/>
</svg>
I question your design for readability:
This design is based on Google Analystics graphs:
Dev To Blogpost on how to built Graphs with Web Components
Web Component source: https://progress-circle.github.io/element.js:
All HTML Required:
<script src="https://progress-circle.github.io/element.js"></script>
<progress-circle edge="grey">
<style>
svg {
font: 16px arial;
height: 180px;
}
</style>
<progress value="75%" stroke="green">Level I</progress>
<progress value="60%" stroke="orange">Level II</progress>
<progress value="50%" stroke="orangered">Level III</progress>
</progress-circle>
Here you can control the length of each path by setting the stroke-dasharray. The first number is the length (between 0 and 94 (2*PI*45/3 = 94)) and the second number is the space between strokes (this should just be more than 284).
In this example the red path is 50% length. You need to experiment a bit with the numbers.
var dist = 6;
console.log('Length of 1/3 circle:', Math.round(2 * Math.PI * 45 / 3)-dist);
console.log('Rotate <g> slightly:',-Math.round(2 * Math.PI * 45 / 12)-(dist/2));
<div id="progress">
<svg viewBox="0 0 100 100" width="300" height="300">
<g transform="translate(50 50) rotate(-27)">
<path transform="rotate(0)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="44 400" stroke-dashoffset="0" stroke="red" fill="none" stroke-linecap="round"/>
<path transform="rotate(120)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="88 400" stroke-dashoffset="0" stroke="navy" fill="none" stroke-linecap="round"/>
<path transform="rotate(240)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="88 400" stroke-dashoffset="0" stroke="orange" fill="none" stroke-linecap="round"/>
</g>
</svg>
</div>
Let's say I have this SVG:
.star g path {
fill-rule: evenodd;
fill: red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094zM12 6.258l1.575 3.193.061.106a1 1 0 00.691.44l3.524.515-2.549 2.484-.082.09a1 1 0 00-.206.795l.601 3.506-3.15-1.656-.111-.05a1 1 0 00-.82.05l-3.15 1.656.602-3.506.013-.122a1 1 0 00-.301-.763l-2.55-2.484 3.525-.515a1 1 0 00.752-.546L12 6.258z" />
</g>
</svg>
How do I go about filling the inside of the shape (without changing the svg source)? I've tried this without success:
Your star has two outer and inner contours.
Therefore, only the space between the contours will be filled with color.
To avoid this you need as #enxaneta commented:
remove everithing from the secomd M command: use just the first part
of the d attribute d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44
1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z
<style>
.star g path {
fill:red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="red" d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
As a bonus Examples of animation of filling a star
feFlood flood-color="red" - Implements fill with color
The feOffset filter animates the color filling process by changing the dx dy attributes
#1. Vertical fill animation
.star g path {
fill:white;
stroke:red;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
<feFlood flood-color="red" />
<feOffset dy="-24">
<animate
id="anim"
attributeName="dy"
values="-24;0"
dur="5s"
begin="0s"
repeatCount="indefinite"
restart="whenNotActive"
fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
#2.Color fill horizontal animation
.star g path {
fill:white;
stroke:gold;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
<feFlood flood-color="gold" />
<feOffset dx="-24">
<animate
id="anim"
attributeName="dx"
values="-24;0"
dur="5s"
begin="0s"
repeatCount="indefinite"
restart="whenNotActive"
fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</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.