Blinking point with SVG

blinking-point-with-svg.markdown

Blinking point with SVG

A Pen by Pixeljam on CodePen.

License.

index.html

<div>
<svg class="pulse" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">
    <circle class="pulse-disk" cx="50" cy="50" />	
    <circle class="pulse-circle" cx="50" cy="50" stroke-width="2" />
    <circle class="pulse-circle-2" cx="50" cy="50"  stroke-width="2" />
</svg>
<svg class="pulse" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">
    <circle class="pulse-disk" cx="50" cy="50" />	
    <circle class="pulse-circle" cx="50" cy="50" stroke-width="2" />
    <circle class="pulse-circle-2" cx="50" cy="50"  stroke-width="2" />
</svg>
<svg class="pulse" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">
    <circle class="pulse-disk" cx="50" cy="50" />	
    <circle class="pulse-circle" cx="50" cy="50" stroke-width="2" />
    <circle class="pulse-circle-2" cx="50" cy="50"  stroke-width="2" />
</svg> 
</div>

style.sass

$pulse-color-1: rgba(120,100,255,1)
$pulse-color-2: rgba(255,60,100,1)
$pulse-color-3: rgba(0,200,120,1)
$pulse-speed: 3s
$pulse-radius: 4
$pulse-scale: 4
$pulse-stroke: 2

html,body  
  min-height: 100%
  height: 100%
  
body
  margin: 0
  background: #202226
  display: flex
  justify-content: center
  align-items: center  

svg:nth-child(1)
  .pulse-disk
    fill: $pulse-color-1
  .pulse-circle, .pulse-circle-2
    stroke: $pulse-color-1

svg:nth-child(2)
  .pulse-disk
    fill: $pulse-color-2
  .pulse-circle, .pulse-circle-2
    stroke: $pulse-color-2
  
svg:nth-child(3)
  .pulse-disk
    fill: $pulse-color-3
  .pulse-circle, .pulse-circle-2
    stroke: $pulse-color-3
  
.pulse-circle,
.pulse-circle-2
  transform-origin: center
  stroke-width: $pulse-stroke
  fill: none
  transform: translate3d(0,0,0)  

.pulse-disk
  r: $pulse-radius + $pulse-stroke

.pulse-circle
  r: $pulse-radius
  animation: pulse $pulse-speed cubic-bezier(.39,.54,.41,1.5) infinite  
  
.pulse-circle-2
  r: $pulse-radius * $pulse-scale
  animation: pulse-2 $pulse-speed cubic-bezier(.39,.54,.41,1.5) infinite

@keyframes pulse
  0%
    r: $pulse-radius
  50%
    r: $pulse-radius * $pulse-scale
    opacity: 1
  99%
    opacity: 0
  100%
    opacity: 0
    r: $pulse-radius * $pulse-scale
    
@keyframes pulse-2
  0%
    opacity: 1
  40%    
    opacity: 0
  49.99%
    r: $pulse-radius * $pulse-scale
    opacity: 0
  50%
    r: $pulse-radius
    opacity: 1
  100%
    r: $pulse-radius * $pulse-scale
    opacity: 1