Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$colors: #800080, #ff0000, #dc143c, #ff4500, #ff0000,#ffa500,#ff4500,
#ffd700,#ffa500,#9acd32,#ffd700,#008000,#9acd32,#4682b4,#87ceeb,#9370db,
#4682b4,#800080,#9370db;
         
$max: length($colors);
$dash: 10;
$dash-gap: 2;
$dash-space: $dash * ($max - 1) + $dash-gap * $max;
$time: 10s;
$time-step: $time/$max;

.text {
  fill: none;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-dasharray: $dash $dash-space;
  stroke-dashoffset: 0;
  animation: stroke $time infinite linear;

  @for $item from 1 through $max {
    &:nth-child(#{$max}n + #{$item}){
      $color: nth($colors, $item);
      stroke: $color;
      animation-delay: -($time-step * $item);
    }
  }@import "garnish";
@import "jeet/index";

}

@keyframes stroke {
  100% {
    stroke-dashoffset: -($dash + $dash-gap) * $max;
  }
}

SassMeister-output.css

.text { fill: none; stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 10 218; stroke-dashoffset: 0; animation: stroke 10s infinite linear; /*  Syntax Quick Reference -------------------------- column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) span($ratio: 1, $offset: 0) shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter) unshift() edit() center($max_width: 1410px, $pad: 0) stack($pad: 0, $align: false) unstack() align($direction: both) cf() */ /** Grid settings. All values are defaults and can therefore be easily overidden. */ /** List functions courtesy of the wonderful folks at Team Sass. Check out their awesome grid: Singularity. */ /** Get  percentage from a given ratio. @param {number} [$ratio=1] - The column ratio of the element. @returns {number} - The percentage value. */ /** Work out the column widths based on the ratio and gutter sizes. @param {number} [$ratios=1] - The column ratio of the element. @param {number} [$gutter=$jeet-gutter] - The gutter for the column. @returns {list} $width $gutter - A list containing the with and gutter for the element. */ /** Get the set layout direction for the project. @returns {string} $direction - The layout direction. */ /** Replace a specified list value with a new value (uses built in set-nth() if available) @param {list} $list - The list of values you want to alter. @param {number} $index - The index of the list item you want to replace. @param {*} $value - The value you want to replace $index with. @returns {list} $list - The list with the value replaced or removed. @warn if an invalid index is supplied. */ /** Reverse a list (progressively enhanced for Sass 3.3) @param {list} $list - The list of values you want to reverse. @returns {list} $result - The reversed list. */ /** Get the opposite direction to a given value. @param {string} $dir - The direction you want the opposite of. @returns {string} - The opposite direction to $dir. @warn if an incorrect string is provided. */ /** Style an element as a column with a gutter. @param {number} [$ratios=1] - A width relative to its container as a fraction. @param {number} [$offset=0] - A offset specified as a fraction (see $ratios). @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns. @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one. @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. */ /** An alias for the column mixin. @param [$args...] - All arguments get passed through to column(). */ /** Get the width of a column and nothing else. @param {number} [$ratios=1] - A width relative to its container as a fraction. @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. */ /** Get the gutter size of a column and nothing else. @param {number} [ratios=1] - A width relative to its container as a fraction. @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width. */ /** An alias for the column-width function. @param [$args...] - All arguments get passed through to column(). */ /** An alias for the column-gutter function. @param [$args...] - All arguments get passed through to column(). */ /** Style an element as a column without any gutters for a seamless row. @param {number} [$ratios=1] - A width relative to its container as a fraction. @param {number} [$offset=0] - A offset specified as a fraction (see $ratios). @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns. @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one. */ /** Reorder columns without altering the HTML. @param {number} [$ratios=0] - Specify how far along you want the element to move. @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not. @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. */ /** Reset an element that has had shift() applied to it. */ /** View the grid and its layers for easy debugging. @param {string} [$color=black] - The background tint applied. @param {boolean} [$important=false] - Whether to apply the style as !important. */ /** Alias for edit(). */ /** Horizontally center an element. @param {number} [$max-width=1410px] - The max width the element can be. @param {number} [$pad=0] - Specify the element's left and right padding. */ /** Uncenter an element. */ /** Stack an element so that nothing is either side of it. @param {number} [$pad=0] - Specify the element's left and right padding. @param {boolean/string} [$align=false] - Specify the text align for the element. */ /** Unstack an element. */ /** Center an element on either or both axes. @requires A parent container with relative positioning. @param {string} [$direction=both] - Specify which axes to center the element on. */ /** Apply a clearfix to an element. */ }

.text:nth-child(19n + 1) { stroke: #800080; animation-delay: -0.52632s; }

.text:nth-child(19n + 2) { stroke: #ff0000; animation-delay: -1.05263s; }

.text:nth-child(19n + 3) { stroke: #dc143c; animation-delay: -1.57895s; }

.text:nth-child(19n + 4) { stroke: #ff4500; animation-delay: -2.10526s; }

.text:nth-child(19n + 5) { stroke: #ff0000; animation-delay: -2.63158s; }

.text:nth-child(19n + 6) { stroke: #ffa500; animation-delay: -3.15789s; }

.text:nth-child(19n + 7) { stroke: #ff4500; animation-delay: -3.68421s; }

.text:nth-child(19n + 8) { stroke: #ffd700; animation-delay: -4.21053s; }

.text:nth-child(19n + 9) { stroke: #ffa500; animation-delay: -4.73684s; }

.text:nth-child(19n + 10) { stroke: #9acd32; animation-delay: -5.26316s; }

.text:nth-child(19n + 11) { stroke: #ffd700; animation-delay: -5.78947s; }

.text:nth-child(19n + 12) { stroke: #008000; animation-delay: -6.31579s; }

.text:nth-child(19n + 13) { stroke: #9acd32; animation-delay: -6.84211s; }

.text:nth-child(19n + 14) { stroke: #4682b4; animation-delay: -7.36842s; }

.text:nth-child(19n + 15) { stroke: #87ceeb; animation-delay: -7.89474s; }

.text:nth-child(19n + 16) { stroke: #9370db; animation-delay: -8.42105s; }

.text:nth-child(19n + 17) { stroke: #4682b4; animation-delay: -8.94737s; }

.text:nth-child(19n + 18) { stroke: #800080; animation-delay: -9.47368s; }

.text:nth-child(19n + 19) { stroke: #9370db; animation-delay: -10s; }

@keyframes stroke { 100% { stroke-dashoffset: -228; } }