svg – SCSS How to iterate over rainbow spectrum colors?

Question:

Please help me animate a smooth color change in svg elements here is an example

body {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: radial-gradient(circle farthest-corner at center, #2e3945 0%, #111c20 100%);
}
#girlsFace {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border: 1px solid red;
}
#girlsFace circle:nth-child(1) {
  fill: rgba(255, 12, 0, 1);
}
#girlsFace circle:nth-child(2) {
  fill: rgba(255, 24, 0, 1);
}
#girlsFace circle:nth-child(3) {
  fill: rgba(255, 36, 0, 1);
}
#girlsFace circle:nth-child(4) {
  fill: rgba(255, 49, 0, 1);
}
#girlsFace circle:nth-child(5) {
  fill: rgba(255, 61, 0, 1);
}
#girlsFace circle:nth-child(6) {
  fill: rgba(255, 73, 0, 1);
}
#girlsFace circle:nth-child(7) {
  fill: rgba(255, 85, 0, 1);
}
#girlsFace circle:nth-child(8) {
  fill: rgba(255, 97, 0, 1);
}
#girlsFace circle:nth-child(9) {
  fill: rgba(255, 109, 0, 1);
}
#girlsFace circle:nth-child(10) {
  fill: rgba(255, 121, 0, 1);
}
#girlsFace circle:nth-child(11) {
  fill: rgba(255, 134, 0, 1);
}
#girlsFace circle:nth-child(12) {
  fill: rgba(255, 146, 0, 1);
}
#girlsFace circle:nth-child(13) {
  fill: rgba(255, 158, 0, 1);
}
#girlsFace circle:nth-child(14) {
  fill: rgba(255, 170, 0, 1);
}
#girlsFace circle:nth-child(15) {
  fill: rgba(255, 182, 0, 1);
}
#girlsFace circle:nth-child(16) {
  fill: rgba(255, 194, 0, 1);
}
#girlsFace circle:nth-child(17) {
  fill: rgba(255, 206, 0, 1);
}
#girlsFace circle:nth-child(18) {
  fill: rgba(255, 219, 0, 1);
}
#girlsFace circle:nth-child(19) {
  fill: rgba(255, 231, 0, 1);
}
#girlsFace circle:nth-child(20) {
  fill: rgba(255, 243, 0, 1);
}
#girlsFace circle:nth-child(21) {
  fill: rgba(255, 255, 0, 1);
}
#girlsFace circle:nth-child(22) {
  fill: rgba(243, 255, 0, 1);
}
#girlsFace circle:nth-child(23) {
  fill: rgba(231, 255, 0, 1);
}
#girlsFace circle:nth-child(24) {
  fill: rgba(219, 255, 0, 1);
}
#girlsFace circle:nth-child(25) {
  fill: rgba(206, 255, 0, 1);
}
#girlsFace circle:nth-child(26) {
  fill: rgba(194, 255, 0, 1);
}
#girlsFace circle:nth-child(27) {
  fill: rgba(182, 255, 0, 1);
}
#girlsFace circle:nth-child(28) {
  fill: rgba(170, 255, 0, 1);
}
#girlsFace circle:nth-child(29) {
  fill: rgba(158, 255, 0, 1);
}
#girlsFace circle:nth-child(30) {
  fill: rgba(146, 255, 0, 1);
}
#girlsFace circle:nth-child(31) {
  fill: rgba(134, 255, 0, 1);
}
#girlsFace circle:nth-child(32) {
  fill: rgba(121, 255, 0, 1);
}
#girlsFace circle:nth-child(33) {
  fill: rgba(109, 255, 0, 1);
}
#girlsFace circle:nth-child(34) {
  fill: rgba(97, 255, 0, 1);
}
#girlsFace circle:nth-child(35) {
  fill: rgba(85, 255, 0, 1);
}
#girlsFace circle:nth-child(36) {
  fill: rgba(73, 255, 0, 1);
}
#girlsFace circle:nth-child(37) {
  fill: rgba(61, 255, 0, 1);
}
#girlsFace circle:nth-child(38) {
  fill: rgba(49, 255, 0, 1);
}
#girlsFace circle:nth-child(39) {
  fill: rgba(36, 255, 0, 1);
}
#girlsFace circle:nth-child(40) {
  fill: rgba(24, 255, 0, 1);
}
#girlsFace circle:nth-child(41) {
  fill: rgba(12, 255, 0, 1);
}
#girlsFace circle:nth-child(42) {
  fill: rgba(0, 255, 0, 1);
}
#girlsFace circle:nth-child(43) {
  fill: rgba(0, 255, 12, 1);
}
#girlsFace circle:nth-child(44) {
  fill: rgba(0, 255, 24, 1);
}
#girlsFace circle:nth-child(45) {
  fill: rgba(0, 255, 36, 1);
}
#girlsFace circle:nth-child(46) {
  fill: rgba(0, 255, 49, 1);
}
#girlsFace circle:nth-child(47) {
  fill: rgba(0, 255, 61, 1);
}
#girlsFace circle:nth-child(48) {
  fill: rgba(0, 255, 73, 1);
}
#girlsFace circle:nth-child(49) {
  fill: rgba(0, 255, 85, 1);
}
#girlsFace circle:nth-child(50) {
  fill: rgba(0, 255, 97, 1);
}
#girlsFace circle:nth-child(51) {
  fill: rgba(0, 255, 109, 1);
}
#girlsFace circle:nth-child(52) {
  fill: rgba(0, 255, 121, 1);
}
#girlsFace circle:nth-child(53) {
  fill: rgba(0, 255, 134, 1);
}
#girlsFace circle:nth-child(54) {
  fill: rgba(0, 255, 146, 1);
}
<svg id="girlsFace" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
    <circle class="cir614" r="4" cx="210" cy="99"></circle>
    <circle class="cir615" r="4" cx="212" cy="109"></circle>
    <circle class="cir616" r="4" cx="217" cy="119"></circle>
    <circle class="cir617" r="4" cx="224" cy="127"></circle>
    <circle class="cir618" r="4" cx="232" cy="135"></circle>
    <circle class="cir619" r="4" cx="240" cy="141"></circle>
    <circle class="cir620" r="4" cx="249" cy="147"></circle>
    <circle class="cir621" r="4" cx="258" cy="152"></circle>
    <circle class="cir622" r="4" cx="267" cy="157"></circle>
    <circle class="cir623" r="4" cx="276" cy="162"></circle>
    <circle class="cir624" r="4" cx="285" cy="167"></circle>
    <circle class="cir625" r="4" cx="295" cy="172"></circle>
    <circle class="cir626" r="4" cx="304" cy="177"></circle>
    <circle class="cir627" r="4" cx="314" cy="183"></circle>
    <circle class="cir628" r="4" cx="322" cy="188"></circle>
    <circle class="cir629" r="4" cx="331" cy="194"></circle>
    <circle class="cir630" r="4" cx="340" cy="201"></circle>
    <circle class="cir631" r="4" cx="348" cy="208"></circle>
    <circle class="cir632" r="4" cx="355" cy="216"></circle>
    <circle class="cir633" r="4" cx="362" cy="224"></circle>
    <circle class="cir634" r="4" cx="367" cy="233"></circle>
    <circle class="cir635" r="4" cx="372" cy="242"></circle>
    <circle class="cir636" r="4" cx="376" cy="251"></circle>
    <circle class="cir637" r="4" cx="380" cy="261"></circle>
    <circle class="cir638" r="4" cx="383" cy="272"></circle>
    <circle class="cir639" r="4" cx="386" cy="283"></circle>
    <circle class="cir640" r="4" cx="387" cy="293"></circle>
    <circle class="cir641" r="4" cx="388" cy="303"></circle>
    <circle class="cir642" r="4" cx="389" cy="313"></circle>
    <circle class="cir643" r="4" cx="389" cy="324"></circle>
    <circle class="cir644" r="4" cx="389" cy="335"></circle>
    <circle class="cir645" r="4" cx="389" cy="345"></circle>
    <circle class="cir646" r="4" cx="389" cy="356"></circle>
    <circle class="cir647" r="4" cx="389" cy="367"></circle>
    <circle class="cir648" r="4" cx="389" cy="378"></circle>
    <circle class="cir649" r="4" cx="389" cy="389"></circle>
    <circle class="cir650" r="4" cx="389" cy="400"></circle>
    <circle class="cir651" r="4" cx="389" cy="410"></circle>
    <circle class="cir652" r="4" cx="389" cy="420"></circle>
    <circle class="cir653" r="4" cx="389" cy="431"></circle>
    <circle class="cir654" r="4" cx="389" cy="441"></circle>
    <circle class="cir655" r="4" cx="390" cy="451"></circle>
    <circle class="cir656" r="4" cx="396" cy="462"></circle>
    <circle class="cir657" r="4" cx="404" cy="472"></circle>
    <circle class="cir658" r="4" cx="413" cy="480"></circle>
    <circle class="cir659" r="4" cx="423" cy="487"></circle>
    <circle class="cir660" r="4" cx="433" cy="494"></circle>
    <circle class="cir661" r="3" cx="441" cy="499"></circle>
    <circle class="cir662" r="3" cx="448" cy="502"></circle>
    <circle class="cir663" r="3" cx="454" cy="505"></circle>
    <circle class="cir664" r="3" cx="462" cy="507"></circle>
    <circle class="cir665" r="3" cx="471" cy="508"></circle>
    <circle class="cir666" r="3" cx="480" cy="508"></circle>
    <circle class="cir667" r="3" cx="488" cy="509"></circle>
</svg>

Here is a normal example in SCSS . How to make it so that every 150ms each color smoothly shifts across the spectral region? The SCSS solution is interesting, SMIL or JS are not suitable

Answer:

In fact, everything is simple:

  • Create @keyframes with desired properties (colors in this case);
  • Add animation to the circles with the necessary parameters;
  • In the SCSS loop, we substitute the variable in animation-delay .

After compiling to CSS, the result is the following (shortened the example, but added a second animation for clarity):

body {
  width: 100%; height: 100vh;
  overflow: hidden;
  background: #000;
}

#wave {
  width: 600px; height: 600px;
}

#wave circle {
  fill: #fff;
  animation: hue 2s linear infinite, scale 1s ease-in-out infinite;
}

/* Compilled */
#wave circle:nth-child(1) { animation-delay: 20ms, 40ms;   }
#wave circle:nth-child(2) { animation-delay: 40ms, 80ms;   }
#wave circle:nth-child(3) { animation-delay: 60ms, 120ms;  }
#wave circle:nth-child(4) { animation-delay: 80ms, 160ms;  }
#wave circle:nth-child(5) { animation-delay: 100ms, 200ms; }

@keyframes hue {
  0%, 100% { fill: hsla(0, 100%, 50%, 1); }
  16%, 73% { fill: hsla(60, 100%, 40%, 1); }
  33%, 66% { fill: hsla(120, 100%, 40%, 1); }
  50%      { fill: hsla(180, 100%, 45%, 1); }
}

@keyframes scale {
  50% { transform: scale(1.1); }
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <circle class="cir614" r="4" cx="210" cy="99"></circle>
  <circle class="cir615" r="4" cx="212" cy="109"></circle>
  <circle class="cir616" r="4" cx="217" cy="119"></circle>
  <circle class="cir617" r="4" cx="224" cy="127"></circle>
  <circle class="cir618" r="4" cx="232" cy="135"></circle>
</svg>

Full code (look in the sandbox that supports SCSS):

body {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

#wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
}

#wave circle {
  fill: #fff;
  animation: hue 2s linear infinite, scale 1s ease-in-out infinite;
}

/* SCSS */
@for $i from 1 through 54 {
  #wave circle:nth-child(#{$i}) {
    animation-delay: #{$i * 20}ms, #{$i * 40}ms;
  }
}

@keyframes hue {
  0%, 100% { fill: hsla(0, 100%, 50%, 1); }
  16%, 73% { fill: hsla(60, 100%, 40%, 1); }
  33%, 66% { fill: hsla(120, 100%, 40%, 1); }
  50% { fill: hsla(180, 100%, 45%, 1); }
}

@keyframes scale {
  50% { transform: scale(1.1); }
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <circle class="cir614" r="4" cx="210" cy="99"></circle>
  <circle class="cir615" r="4" cx="212" cy="109"></circle>
  <circle class="cir616" r="4" cx="217" cy="119"></circle>
  <circle class="cir617" r="4" cx="224" cy="127"></circle>
  <circle class="cir618" r="4" cx="232" cy="135"></circle>
  <circle class="cir619" r="4" cx="240" cy="141"></circle>
  <circle class="cir620" r="4" cx="249" cy="147"></circle>
  <circle class="cir621" r="4" cx="258" cy="152"></circle>
  <circle class="cir622" r="4" cx="267" cy="157"></circle>
  <circle class="cir623" r="4" cx="276" cy="162"></circle>
  <circle class="cir624" r="4" cx="285" cy="167"></circle>
  <circle class="cir625" r="4" cx="295" cy="172"></circle>
  <circle class="cir626" r="4" cx="304" cy="177"></circle>
  <circle class="cir627" r="4" cx="314" cy="183"></circle>
  <circle class="cir628" r="4" cx="322" cy="188"></circle>
  <circle class="cir629" r="4" cx="331" cy="194"></circle>
  <circle class="cir630" r="4" cx="340" cy="201"></circle>
  <circle class="cir631" r="4" cx="348" cy="208"></circle>
  <circle class="cir632" r="4" cx="355" cy="216"></circle>
  <circle class="cir633" r="4" cx="362" cy="224"></circle>
  <circle class="cir634" r="4" cx="367" cy="233"></circle>
  <circle class="cir635" r="4" cx="372" cy="242"></circle>
  <circle class="cir636" r="4" cx="376" cy="251"></circle>
  <circle class="cir637" r="4" cx="380" cy="261"></circle>
  <circle class="cir638" r="4" cx="383" cy="272"></circle>
  <circle class="cir639" r="4" cx="386" cy="283"></circle>
  <circle class="cir640" r="4" cx="387" cy="293"></circle>
  <circle class="cir641" r="4" cx="388" cy="303"></circle>
  <circle class="cir642" r="4" cx="389" cy="313"></circle>
  <circle class="cir643" r="4" cx="389" cy="324"></circle>
  <circle class="cir644" r="4" cx="389" cy="335"></circle>
  <circle class="cir645" r="4" cx="389" cy="345"></circle>
  <circle class="cir646" r="4" cx="389" cy="356"></circle>
  <circle class="cir647" r="4" cx="389" cy="367"></circle>
  <circle class="cir648" r="4" cx="389" cy="378"></circle>
  <circle class="cir649" r="4" cx="389" cy="389"></circle>
  <circle class="cir650" r="4" cx="389" cy="400"></circle>
  <circle class="cir651" r="4" cx="389" cy="410"></circle>
  <circle class="cir652" r="4" cx="389" cy="420"></circle>
  <circle class="cir653" r="4" cx="389" cy="431"></circle>
  <circle class="cir654" r="4" cx="389" cy="441"></circle>
  <circle class="cir655" r="4" cx="390" cy="451"></circle>
  <circle class="cir656" r="4" cx="396" cy="462"></circle>
  <circle class="cir657" r="4" cx="404" cy="472"></circle>
  <circle class="cir658" r="4" cx="413" cy="480"></circle>
  <circle class="cir659" r="4" cx="423" cy="487"></circle>
  <circle class="cir660" r="4" cx="433" cy="494"></circle>
  <circle class="cir661" r="3" cx="441" cy="499"></circle>
  <circle class="cir662" r="3" cx="448" cy="502"></circle>
  <circle class="cir663" r="3" cx="454" cy="505"></circle>
  <circle class="cir664" r="3" cx="462" cy="507"></circle>
  <circle class="cir665" r="3" cx="471" cy="508"></circle>
  <circle class="cir666" r="3" cx="480" cy="508"></circle>
  <circle class="cir667" r="3" cx="488" cy="509"></circle>
</svg>
Post Views: 0
Scroll to Top