star

In this example below you will see how to do a star with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by o-sewell, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright o-sewell ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>star</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg viewbox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <polygon class="star" id="star" points="0,-45 15,-15 49,-10 24,12 30,44 0,29 -31,44 -25,12 -49,-11 -16,-15"/>
    </defs>
     <g class="shapes">
      <circle class="circle1" cx="50%" cy="50%" r="5"/>
      <circle class="circle2" cx="50%" cy="50%" r="5"/>
      <circle class="circle3" cx="50%" cy="50%" r="5"/>
      <circle class="circle4" cx="50%" cy="50%" r="5"/>
      <circle class="circle5" cx="50%" cy="50%" r="5"/>
     <use xlink:href="#star" x="50%" y="50%" />
  </g>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/o-sewell/star-eyzOXX */
body {
  height: 100vh;
  background: grey;
}

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

.star {
  fill: yellow;
}

.circle1 {
  fill: red;
}

.circle2 {
  fill: blue;
}

.circle3 {
  fill: orange;
}

.circle4 {
  fill: green;
}

.circle5 {
  fill: purple;
}

/*Downloaded from https://www.codeseek.co/o-sewell/star-eyzOXX */
var t1 = new TimelineMax();

t1.to(".star", 1, {
  scale : .5,
  transformOrigin: "50% 50%",
})

t1.add("burst");
t1.add("group")

t1.to('.circle1',.5,{
  scale: 1.5,
  y: -70,
  ease: Bounce.easeOut
}, "burst")

t1.to('.circle2',.5,{
  scale: 1.5,
  y: -16,
  x: 70,
  ease: Bounce.easeOut
}, "burst+=.25")

t1.to('.circle3',.5,{
  scale: 1.5,
  y: 62,
  x: 46,
  ease: Bounce.easeOut
}, "burst+=.5")

t1.to('.circle4',.5,{
  scale: 1.5,
  y: 60,
  x: -45,
  ease: Bounce.easeOut
}, "burst+=.75")

t1.to('.circle5', .5, {
  scale: 1.5,
  x: -70,
  y: -17,
  ease: Bounce.easeOut
}, "burst+=1")

t1.to('.shapes', 1, {
  rotation: 180,
  scale: 2,
  transformOrigin: "50% 50%",
  ease: Circ.easeOut

},"group")

Comments