flashing color clockwise around svg path - css

I have an svg quarter circle and I need to make animation so that its border will be changing to #FF00AF with time clockwisely and run all the border infinitely times
Is there any elegant way to do that?
<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
<path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8"/>
<feGaussianBlur stdDeviation="7"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
<stop offset="0.727873" stop-color="#8C1F6F"/>
<stop offset="1" stop-color="#93006C"/>
</radialGradient>
</defs>
</svg>


One way to have the rotation is to rotate the whole SVG - about its top left hand corner.
This snippet uses CSS animation to rotate it continuously from -90 to 90 degrees. Obviously change this to give whatever effect you want.
body {
overflow: hidden;
}
svg {
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: top left;
}
#keyframes rotate {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}
<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
<path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8"/>
<feGaussianBlur stdDeviation="7"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
<stop offset="0.727873" stop-color="#8C1F6F"/>
<stop offset="1" stop-color="#93006C"/>
</radialGradient>
</defs>
</svg>

Related

Can I style individual dashes in an SVG path?

Can I style dashes in my SVG path, so that each of them would be slightly irregular? As in the image above?
Tried looking for a CSS-only solution. But adding individual elements along the path would work as well

You can make them irregular with a displacement map (see below), or you can find a font with a glyph that you can use and use text along a textPath with that font to make it look like a customized dash. But you can't style each individual dash in a normal path.
<svg width="600px" height="400px">
<filter id="custom-stroke">
<feTurbulence baseFrequency= "0.02" type="turbulence" numOctaves="2"/>
<feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="15"/>
<feMorphology operator="erode" radius="1"/>
<feMorphology operator="dilate" radius="1" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 11 -7" result="goo" />
</filter>
<g filter="url(#custom-stroke)">
<path fill="none" stroke="blue" stroke-dasharray="10 10" stroke-width="8" d="M 10 10 a 100 80 0 0 1 100 40 200 300 0 0 0 200 100"/>
</g>
</svg>

<animateMotion rotate="auto"> rotates an SVG element on a <path>
I took my yesterdays answer (see that SO answer for explanation),
simplified it, added Michael his filter, and dabbled a bit with the filter settings.
Question for the SVG experts: Can we get that rotate="auto" value for each "marker" with JS?
If so, each "marker" could be customized to make it "curve" better
JSFiddle: https://jsfiddle.net/WebComponents/7muns9La/
<svg-path-markers count="25" filter>
<svg viewBox="0 0 500 300" style="background:pink;max-height:180px">
<defs><g id="marker"><path fill="green" d="m0 -10q29 4 0 10a8 7 90 110-10z"/></g></defs>
<filter id="F">
<feTurbulence baseFrequency= "0.001" type="turbulence" numOctaves="1"/>
<feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="15"/>
<feMorphology operator="erode" radius=".1"/><feMorphology operator="dilate" radius=".1" />
<feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 11 -7"/>
</filter>
<path fill="none" stroke="black" d="m50 20a10 10 90 00230 100c30-140-160 0-90 120 30 50 370 40 260-60" />
<g id="markers"/>
</svg>
</svg-path-markers>
<script>
customElements.define("svg-path-markers", class extends HTMLElement {
connectedCallback() {
setTimeout(() => { // wait till innerHTML is parsed
this.querySelectorAll("path").forEach( path => {
let duration = "2"; // set to 0.00001 for instant display
let count = ~~this.getAttribute("count");
let filter = this.hasAttribute("filter") ? 'filter="url(#F)"' : '';
let id = path.id || (path.id = this.localName + Math.random()*1e9);
let marker = dist =>
`<use href="#marker" ${filter}>
<animateMotion dur="${duration}" fill="freeze"calcMode="linear"
rotate="auto" keyPoints="0;${dist}" keyTimes="0;1">
<mpath href="#${id}"/></animateMotion></use>`;
this.querySelector("#markers").innerHTML =Array(count).fill(0)
.map((_,i) => marker(i*(1/(count-1)))).join("");
} )
})}})
</script>

Adding animation on my svg, it changes its position

I'm trying to add animation on some groups inside my svg, but after i add the animation my svg changes position. When i try to change it with position absolute tho it doesnt change.
In this code, I add the aimation to the group with the light class. I removed the rest of the code of the svg file so its more simple to show here.
My code:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
padding-top: 40px;
}
.light {
-webkit-animation: action 1s infinite;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient
id="a"
x1=".771"
y1=".879"
x2=".349"
y2=".103"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient
id="b"
x1=".73"
y1=".875"
x2="-.036"
y2="-.615"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient
id="c"
x1=".496"
y1="-1.57"
x2=".509"
y2="4.41"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path
data-name="Rectangle 3243"
fill="none"
opacity=".25"
d="M0 0h767.74v782.925H0z"
/>
<rect
data-name="Rectangle 3237"
width="383.786"
height="416.279"
rx="26"
transform="translate(214.352 98.244)"
fill="url(#a)"
/>
<g
class="light"
data-name="Group 1182"
transform="rotate(36 263.423 810.556)"
>
<path
data-name="Path 6006"
d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z"
fill="#afb9c5"
/>
<path
data-name="Path 6007"
d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z"
fill="#e4e8ec"
/>
<circle
data-name="Ellipse 627"
cx="2.861"
cy="2.861"
transform="rotate(-30 137.783 -57.321)"
fill="#afb9c5"
r="2.861"
/>
<path
data-name="Rectangle 2622"
fill="#afb9c5"
d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z"
/>
<path
data-name="Path 6029"
d="m31.023 33.105 4.85-2.8-5.21-3.245Z"
fill="#afb9c5"
/>
<path
data-name="Path 6030"
d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z"
fill="#afb9c5"
/>
<path
data-name="Rectangle 2623"
fill="#afb9c5"
d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z"
/>
<path
data-name="Path 6031"
d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2624"
width="4.305"
height="4.305"
rx="2.152"
transform="rotate(150 11.67 25.183)"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2625"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2626"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2627"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2628"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2629"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2630"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
</g>
</svg>
</div>
</div>

Problem in you case is that the g.light element already has a transform property: transform="rotate(36 263.423 810.556)". So the action animation is overwriting the default one that place the bulb icon in the top left.
My recommendation would be to separate the square and bulb in 2 different svg
and align them together by using absolute positioning:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
position: relative;
padding-top: 40px;
}
.light {
position: absolute;
top: 7%;
right: 30%;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
#keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient id="a" x1=".771" y1=".879" x2=".349" y2=".103" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient id="b" x1=".73" y1=".875" x2="-.036" y2="-.615" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1=".496" y1="-1.57" x2=".509" y2="4.41" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path data-name="Rectangle 3243" fill="none" opacity=".25" d="M0 0h767.74v782.925H0z" />
<rect data-name="Rectangle 3237" width="383.786" height="416.279" rx="26" transform="translate(214.352 98.244)" fill="url(#a)" />
</svg>
<svg class="light" width="70" heigth="73">
<g data-name="Group 1182">
<path data-name="Path 6006" d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z" fill="#afb9c5" />
<path data-name="Path 6007" d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z" fill="#e4e8ec" />
<circle data-name="Ellipse 627" cx="2.861" cy="2.861" transform="rotate(-30 137.783 -57.321)" fill="#afb9c5" r="2.861" />
<path data-name="Rectangle 2622" fill="#afb9c5" d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z" />
<path data-name="Path 6029" d="m31.023 33.105 4.85-2.8-5.21-3.245Z" fill="#afb9c5" />
<path data-name="Path 6030" d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z" fill="#afb9c5" />
<path data-name="Rectangle 2623" fill="#afb9c5" d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z" />
<path data-name="Path 6031" d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z" fill="#afb9c5" />
<rect data-name="Rectangle 2624" width="4.305" height="4.305" rx="2.152" transform="rotate(150 11.67 25.183)" fill="#afb9c5" />
<rect data-name="Rectangle 2625" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2626" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2627" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
<rect data-name="Rectangle 2628" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2629" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2630" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
</g>
</svg>
</div>
</div>

CSS : Scale and rotate in place multiple SVG backgrounds image on one element - possible without JS?

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>

SVG fill-rule being ignored

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>

Adding bevel and emboss to an SVG element?

So I was wondering if it was possible to add bevel and emboss to an SVG element?
My CSS for my rectangle element is like this:
rect {
fill: #e8e9eb;
stroke: black;
stroke-width: 1px;
width: 70;
height: 30;
}
and I was trying to add this CSS to it taken from here:
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
I believe the reason it isn't working is because it uses fill as opposed to a background but I'm not sure. Is there a way to do this while using the fill CSS style? If not, what would be the best way?

You want to use SVG Filter effects to bevel arbitrary SVG Content.
Here's an example with two versions of a bevel:
http://jsfiddle.net/rcd5L/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 100">
<filter id="Bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<filter id="Bevel2" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="0000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<rect width="100" height="40" filter="url(#Bevel)" />
<rect y="50" width="100" height="40" filter="url(#Bevel2)" />
</svg>

Also try using this if you want this kind of beveling
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 100">
<filter id="filter1" >
<feFlood flood-color="black" result="COLOR-red" />
<feMorphology operator="dilate" radius="0" in="SourceAlpha" result="STROKE_10" />
<feConvolveMatrix order="8,8" divisor="1"
kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="STROKE_10" result="BEVEL_20" />
<feOffset dx="1" dy="1" in="BEVEL_0" result="BEVEL_25"/>
<feComposite operator="out" in="BEVEL_25" in2="STROKE_10" result="BEVEL_30"/>
<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />
<feMerge result="BEVEL_50">
<feMergeNode in="BEVEL_40" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<rect width="100" height="40" filter="url(#filter1)" />
<path x="50" y="50" fill="#3182bd" d="M9.184850993605149e-15,-150A150,150 0 0,1 140.95389311788625,-51.30302149885031L0,0Z" filter="url(#filter1)"></path>
</svg>

Resources