<div class="wrapper">
    <svg viewBox="0 0 300 280">
     <symbol id="star">
          <polygon 
            points="146.5 217.25 69.2062393 257.885735 83.9680341 171.817867 21.4360681 110.864265 107.85312 98.3071326 146.5 20 185.14688 98.3071326 271.563932 110.864265 209.031966 171.817867 223.793761 257.885735"/>
      </symbol>
        
      <g fill="none"
          stroke-width="20" stroke-dasharray="20 160">
          <use xlink:href="#star" 
            stroke="#BBB" stroke-width="1" stroke-dasharray="0"/>
          <use xlink:href="#star" 
            stroke="tomato"/>
          <use xlink:href="#star"
            stroke="gold" 
            stroke-dashoffset="-30"/>
          <use xlink:href="#star"
            stroke="darkorange" stroke-dashoffset="-60"/>
          <use xlink:href="#star"
            stroke="yellowgreen" stroke-dashoffset="-90"/>
          <use xlink:href="#star"
            stroke="lightseagreen" stroke-dashoffset="-120"/>
          <use xlink:href="#star"
            stroke="teal" stroke-dashoffset="-150"/>
        </g>
    </svg>
    
    <div class="codes">
        <code>
         stroke-linecap="round"<br>
         stroke-linejoin="round"<br>
         stroke-dasharray=".5 180"
        </code>
    </div>
    
    <svg viewBox="0 0 300 280">
      <g fill="none" 
          stroke-width="20" stroke-linecap="round"
stroke-linejoin="round"
stroke-dasharray=".5 180">
          <use xlink:href="#star" 
            stroke="#BBB" stroke-width="1" stroke-dasharray="0"/>
          <use xlink:href="#star" 
            stroke="tomato"/>
          <use xlink:href="#star"
            stroke="gold" 
            stroke-dashoffset="-30"/>
          <use xlink:href="#star"
            stroke="darkorange" stroke-dashoffset="-60"/>
          <use xlink:href="#star"
            stroke="yellowgreen" stroke-dashoffset="-90"/>
          <use xlink:href="#star"
            stroke="lightseagreen" stroke-dashoffset="-120"/>
          <use xlink:href="#star"
            stroke="teal" stroke-dashoffset="-150"/>
        </g>
    </svg>
</div>
HTML, BODY {
    height: 100%;
}

BODY {
    min-width: 800px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.codes {
    position: relative;
    margin: 0 45px 0 20px;
    padding: 20px 0 20px 20px;
    background: mediumaquamarine;
    white-space: nowrap;
    font: 14px/1.4 monospace;
    
    &::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        right: -45px;
        top: 0;
        bottom: 0;
        margin: auto;
        margin-top: -50px;
        width: 0;
        height: 0;
        border: 0px solid transparent;
        border-width: 100px 0 100px 80px;
        border-left-color: mediumaquamarine;
        
    }
}

svg {
    width: 100%;
    height: 100%;
    
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.