Creating a sparkle effect using CSS.

<style type="text/css">

body {
   background: url(teeth.png) no-repeat black 0% 0%;
}

svg {
position: absolute;
-webkit-transform: translate(102%, 350%);
transform: translate(102%, 350%);
}

.group {
   -webkit-transform: translate(42.5px,42.5px);
   -moz-transform: translate(42.5px,42.5px);
   transform: translate(42.5px, 42.5px);
}

path {
   -webkit-transform: translate(-42.50px,-42.50px);
   -moz-transform: translate(-42.50px,-42.50px);
   transform: translate(-42.50px,-42.50px);
}

.large {
-webkit-animation: large 2.5s infinite;
-moz-animation: large 2.5s infinite;
}

.large-2 {
-webkit-animation: large-2 2.5s infinite;
-moz-animation: large-2 2.5s infinite;
}

.small {
-webkit-animation: small 2.5s infinite;
-moz-animation: small 2.5s infinite;
}

@-webkit-keyframes large {
0% {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}

@-moz-keyframes large {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(360deg) scale(1.5);
}
}

@-webkit-keyframes large-2 {
0% {
opacity: 0;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(405deg) scale(1.1);
transform: rotate(405deg) scale(1.1);
}
}

@-moz-keyframes large-2 {
0% {
opacity: 0;
transform: rotate(45deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(405deg) scale(1.1);
}
}

@-webkit-keyframes small {
0% {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(-360deg) scale(1);
transform: rotate(-360deg) scale(1.5);
}
}

@-moz-keyframes small {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(-360deg) scale(1.5);
}
}

</style>

<svg width="100" height="100" viewBox="0 0 100 100">
  <g class="group" opacity="0.8">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
     L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
    </g>
    <g class="large-2" transform="rotate(45)">
      <use xlink:href="#large" />
    </g>
    <g class="small">
      <path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
                 L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>


Output :)

1)

2)