<svg id='paper'></svg>
<svg id='poper'></svg>


<!-- rotating and reusing: ellipse is rotated 30 and 60 degrees inside a group. Then the group is rotated three times.!-->
<div class='svg' id='canv'>
  <svg xmlns="http://www.w3.org/2000/svg" width='500' height='750' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -500 900 1500" preserveAspectRatio="true">

    <linearGradient id="L" gradientTransform="rotate(600 .8 .01)">
      <stop offset=".9" stop-color="hsla(220,20%,40%,.7)" stop-opacity=".7" />
      <stop offset=".05" stop-color="hsla(4,50%,20%,.7)" />
      <stop offset="pow(99.9,42)" stopcolor="hsla(16, 100%, 80%,1)" stop-opacity="1" />
      <stop offset="pow(.9,2)" stop-color="hsla(54,80%,50%,.7)" />
    </linearGradient>

    <g id="F">
      <g id="ggg" fill="hsla(180,60%,50%,.7)">
        <g id="gg" fill="balance">
          <g id="g" fill="balance">

            <ellipse id="E" cx="atan2(.0100,0)" cy="atan2(.008,pow(99,2))" rx="29" ry=".1880" stroke-dasharray="1,.9,-98" opacity=".5" fill="hsla(0,90%,50%,1)" stroke="url(#L)" stroke-width="400">
              <animate attributeName="cy" dur="46s" values="cos(.9);500;-pow(-9,2);-500;-pow(9,2);500;sin(-.9)" repeatCount="indefinite" />
            </ellipse>

            <use xlink:href="#E" transform="rotate(-180,sin(pow(9,2)),atan(pow(9,2)))" />
            <use xlink:href="#E" transform="rotate(60,100,260)" />
          </g>

          <use xlink:href="#g" transform="rotate(90,100,260)" />
          <use xlink:href="#g" transform="rotate(180,100,260)" />
          <use xlink:href="#g" transform="rotate(270,100,260)" />
        </g>
      </g>

      <use xlink:href="#gg" transform="rotate(40,500,200)" fill="#8f8" />
      <use xlink:href="#gg" transform="rotate(80,500,200)" fill="#88f" />
    </g>


    <use xlink:href="#F" transform="rotate(120,500,200)" />
    <use xlink:href="#F" transform="rotate(240,500,200)" />
  </svg>
</div>
html,
body {
height: 100%;
}

body {
 width:100%;
  overflow:hidden;
  background:hsla(295, 40%, 15%, .9);
  background-repeat: no-repeat;
  background-attachment: fixed;
   background-image: radial-gradient(top, circle cover,hsla(267, 85%, 25%, .7) 25%,hsla(305, 95%, 15%, .8)
 80%);
}

.svg {
  width: 100%;
  height: 100vh;
}

svg {
  width: 100%;
  height:100vh;
  position:absolute;
  z-index:0;
}

#paper, poper {
position:absolute;
display:block;
height:100%;
width: 100%;  
top:0;
left:0; 
z-index:1;
}


#poper{
position:absolute;
display:block;
height:100%;
width: 100%;  
top:0;
left:0; 
z-index:1;
}
View Compiled
var svg = Snap("#paper");
var circ = svg.polyline("10,1 4,19.8 19,7.8 2,7.8 16,19.8")
  .attr({fill:"rgba(13, 15, 151,.1)"})
 .attr({stroke:"rgba(13, 15, 151,.2)"})
   .attr({strokeWidth:"1"})
  .pattern(0,0,19,19)
  .attr({patternTransform: "rotate(-15)"});
svg.rect(0,0,'100%','100%').attr({fill: circ});



var svg = Snap("#poper");
var circ = svg.polygon("20,2 8,39.6 38,15.6 2,15.6 32,39.6")
  .attr({fill:"hsla(0, 50%, 50%,.08)"})
 .attr({stroke:"rgba(13, 15, 151,.05)"})
   .attr({strokeWidth:"1"})
  .pattern(0,0,39,39)
  .attr({patternTransform: "rotate(-45)"});
svg.rect(0,0,'100%','100%').attr({fill: circ});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://www.lacor.info/gnrl/weft/js/snap.svg-min.js