console
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
allStars = selectAll('.stars use')
TweenMax.set('svg', {
visibility: 'visible'
})
var mainTl = new TimelineMax();
var linesTl = new TimelineMax({repeat:-1});
var foamTl = new TimelineMax({repeat:-1}).seek(100)
var starsTl = new TimelineMax({repeat:-1}).seek(100)
linesTl.to('.rainbowLines path', 0.4, {
strokeDashoffset:'+=145',
ease:Linear.easeNone
})
starsTl.staggerTo(allStars,0,{
cycle:{
rotation:[23, 45, -12, 90, 120,6],
svgOrigin:function(i){
return (Number(allStars[i].getAttribute('x'))+6) + ' ' + (Number(allStars[i].getAttribute('y'))+6)
}
},
},0)
.staggerFromTo(allStars, 0.123, {
scale:0
}, {
scale:1.32,
repeat:-1,
cycle:{
repeatDelay:[0.0151, 0.01,0.0422,0.123, 0.025, 0.084]
},
yoyo:true,
ease:SteppedEase.config(5)
},0.2)
foamTl.staggerTo('.foamGroup *', 0.1, {
cycle:{
y:['+=5', '+=8', '+=6', '+=8', '+=2' ],
},
repeat:-1,
yoyo:true,
ease:SteppedEase.config(3)
},0.25)
mainTl.add(linesTl, 0);
<svg viewBox="200 150 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="rainbowMask">
<rect class="rainbowMask" x="359" y="322" width="103" height="114" fill="red"/>
</clipPath>
<clipPath id="foamMask">
<rect class="rainbowMask" x="359" y="322" width="103" height="115" fill="red"/>
</clipPath>
<path id="star" fill="#F7F9F6" d="M5.1,1.3l2.3-1.2c0.3-0.2,0.7,0.1,0.6,0.5L7.6,3.1c0,0.1,0,0.3,0.1,0.4l1.9,1.8c0.3,0.3,0.1,0.7-0.2,0.8
L6.8,6.5c-0.1,0-0.3,0.1-0.3,0.2L5.3,9.1c-0.2,0.3-0.6,0.3-0.8,0L3.3,6.7C3.3,6.6,3.1,6.5,3,6.5L0.4,6.1C0,6.1-0.1,5.6,0.1,5.4
L2,3.5c0.1-0.1,0.2-0.2,0.1-0.4L1.7,0.5C1.6,0.2,2-0.1,2.3,0.1l2.3,1.2C4.8,1.3,5,1.3,5.1,1.3z"/>
</defs>
<ellipse fill="#BEBEBE" cx="501" cy="433.5" rx="65" ry="4.5"/>
<g class="hydrant">
<rect x="489" y="289" width="21" height="17" rx="7" ry="7" fill="#f4f4f4"/>
<rect x="474" y="297" width="51" height="132" rx="25.5" ry="25.5" fill="#ededed"/>
<rect x="465" y="321" width="69" height="12" rx="5.29" ry="5.29" fill="#f3f3f3"/>
<rect x="462" y="337" width="75" height="41" rx="7" ry="7" fill="#ededed"/>
<path d="M537,433v1H462v-1a11,11,0,0,1,11-11h53A11,11,0,0,1,537,433Z" fill="#e7e7e7"/>
<rect x="472" y="333" width="55" height="89" fill="#f1f1f1"/>
<path d="M518,359.5A18.5,18.5,0,1,1,499.5,341,18.5,18.5,0,0,1,518,359.5ZM500.5,353a6.5,6.5,0,1,0,6.5,6.5A6.5,6.5,0,0,0,500.5,353Z" fill="#e6e6e6"/>
<g>
<rect x="476" y="382" width="5" height="38" rx="2.5" ry="2.5" fill="#e6e6e6"/>
<rect x="486.5" y="382" width="5" height="38" rx="2.5" ry="2.5" fill="#e6e6e6"/>
<rect x="497" y="382" width="5" height="38" rx="2.5" ry="2.5" fill="#e6e6e6"/>
<rect x="507.5" y="382" width="5" height="38" rx="2.5" ry="2.5" fill="#e6e6e6"/>
<rect x="518" y="382" width="5" height="38" rx="2.5" ry="2.5" fill="#e6e6e6"/>
</g>
</g>
<g class="rainbowLines" clip-path="url(#rainbowMask)" stroke-dasharray="48 24">
<path d="M519,402v34a54.16,54.16,0,0,1-54,54H444a54.16,54.16,0,0,1-54-54V402a54.16,54.16,0,0,1,54-54h21a54.16,54.16,0,0,1,54,54" fill="none" stroke="#93272C" stroke-miterlimit="10" stroke-width="7"/>
<path d="M525.67,402.48v46.38a48,48,0,0,1-47.81,47.81H444.48a48,48,0,0,1-47.81-47.81V402.48a48,48,0,0,1,47.81-47.81h33.38a48,48,0,0,1,47.81,47.81" fill="none" stroke="#fc541a" stroke-miterlimit="10" stroke-width="7"/>
<path d="M532.33,403.31v58.05a42.1,42.1,0,0,1-42,42H445.31a42.1,42.1,0,0,1-42-42V403.31a42.1,42.1,0,0,1,42-42h45.05a42.1,42.1,0,0,1,42,42" fill="none" stroke="#fe9c1f" stroke-miterlimit="10" stroke-width="7"/>
<path d="M539,404v70a36.12,36.12,0,0,1-36,36H446a36.12,36.12,0,0,1-36-36V404a36.12,36.12,0,0,1,36-36h57a36.12,36.12,0,0,1,36,36" fill="none" stroke="#0f9cf0" stroke-miterlimit="10" stroke-width="7"/>
<path d="M519,402v34a54.16,54.16,0,0,1-54,54H444a54.16,54.16,0,0,1-54-54V402a54.16,54.16,0,0,1,54-54h21a54.16,54.16,0,0,1,54,54" fill="none" stroke="#D00E33" stroke-miterlimit="10" stroke-width="7" stroke-dashoffset="24"/>
<path d="M525.67,402.48v46.38a48,48,0,0,1-47.81,47.81H444.48a48,48,0,0,1-47.81-47.81V402.48a48,48,0,0,1,47.81-47.81h33.38a48,48,0,0,1,47.81,47.81" fill="none" stroke="#DA3717" stroke-miterlimit="10" stroke-width="7" stroke-dashoffset="24"/>
<path d="M532.33,403.31v58.05a42.1,42.1,0,0,1-42,42H445.31a42.1,42.1,0,0,1-42-42V403.31a42.1,42.1,0,0,1,42-42h45.05a42.1,42.1,0,0,1,42,42" fill="none" stroke="#DE741B" stroke-miterlimit="10" stroke-width="7" stroke-dashoffset="24"/>
<path d="M539,404v70a36.12,36.12,0,0,1-36,36H446a36.12,36.12,0,0,1-36-36V404a36.12,36.12,0,0,1,36-36h57a36.12,36.12,0,0,1,36,36" fill="none" stroke="#2472CB" stroke-miterlimit="10" stroke-width="7" stroke-dashoffset="24"/>
</g>
<g class="foamGroup" clip-path="url(#foamMask)" >
<circle cx="420.5" cy="437.5" r="7.5" fill="#fffffc"/>
<ellipse cx="390" cy="437" rx="11" ry="12" fill="#fffffc"/>
<ellipse cx="399" cy="432" rx="7" ry="6.36" fill="#fffffc"/>
<circle cx="410" cy="434" r="12" fill="#fffffc"/>
<circle cx="380.5" cy="437.5" r="5.5" fill="#fffffc"/>
</g>
<g class="stars">
<use xlink:href="#star" x="410" y="390"/>
<use xlink:href="#star" x="430" y="342" />
<use xlink:href="#star" x="439" y="370" />
<use xlink:href="#star" x="409" y="410" />
<use xlink:href="#star" x="379" y="411" />
<use xlink:href="#star" x="382" y="381" />
<use xlink:href="#star" x="419" y="381" />
<use xlink:href="#star" x="406" y="351" />
</g>
</svg>
body {
background-color:#D3D5D2;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
position:absolute;
width:100%;
height:100%;
visibility:hidden;
}