Digital Pulse

digital-pulse.markdown

Digital Pulse

Visual replication of a digital pulse as seen in various Sci-Fi movies and real-world medical equipment. I couldn't find anything on the web to "hack" for my own projects so I've put this one up for everyone to use. Feel free to use this if you're working on an app or dashboard requiring real-time updates. Created this as a Captain Anonymous several days ago.

A Pen by vineeth on CodePen.

License.

index.html

<div id="trial">
 <h3>Believe it or not, this is only the instance of an <i>ECG-esque</i> heartbeat-pulse anywhere on this place we call the wonderful world wide web.</h3>
 <h4>Feel free to use in any project... Thank you Codepen.</h4> 
  <!--PULSAR
2 SVG Paths for a slight shadow effect-->
  <h4>Start Pulsar</h4>
  <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
    viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path stroke="rgba(15,0,0,0.1)" fill="none" stroke-width="1" stroke-linejoin="round"
          d="
            M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" />   
    
    
    <path  id="pulsar"stroke="rgba(0,155,155,1)" fill="none" stroke-width="1"stroke-linejoin="round"
          d="
            M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" /> 
     
</svg>
<h4>End Pulsar</h4>  
  <hr />
<!--JUGULAR-->
<h4>Start Jugular</h4>
  <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
    viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path  id="jugular"stroke="rgba(0,155,155,1)" fill="none"stroke-width="1"stroke-linejoin="round"
          d="
            M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" /> 
     
                
</svg>
<h4>End Jugular</h4>
 <hr /> 
  <!--BLEED-->
<h4>Start Bleed</h4>
  <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
    viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path  id="bleed" stroke="rgba(0,155,155,1)" fill="none"stroke-width="1"stroke-linejoin="round"
          d="
            M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" /> 
                     
</svg>
<h4>End Bleed</h4>
 <hr />
<h4>Start Flatline</h4>  
  <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
    viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path  stroke="rgba(55,55,55,0.4)" fill="none"stroke-width="3"stroke-linejoin="round"
          d="M0,90 L500,90            
            " 
          /> 
    <path  id="flat"style="stroke:#00AEAA; fill:none;stroke-width:1;stroke-linejoin:round"
          d="M0,90 L500,90           
            " 
          />         
</svg>
<h4>End Flatline</h4>
 <hr /> 
 <h4>Pulse Concept</h4> 
  <p>(Inline Styling Elements)</p>
  <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
    viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path  stroke="rgba(155,55,255,0.4)" fill="none"stroke-width="3"stroke-linejoin="round"
          d="
            M0,90L150,90M150,90Q158,60 162,87T167,95 170,88 173,92t6,35 7,-60T190,127 197,107s2,-11 10,-10 1,1 8,-10T219,95c6,4 8,-6 10,-17s2,10 9,11h110
            " 
          /> 
    <path  id="longbeat"style="stroke:#00AEAA; fill:none;stroke-width:1;stroke-linejoin:round"
          d="
            M0,90L150,90M150,90Q158,60 162,87T167,95 170,88 173,92t6,35 7,-60T190,127 197,107s2,-11 10,-10 1,1 8,-10T219,95c6,4 8,-6 10,-17s2,10 9,11h110
            " 
          /> 
      <rect x="-3" y="-4" height="8" width="6" rx="20" ry="20"fill="red">
     <animateMotion dur="2s" repeatCount="indefinite">
             <mpath xlink:href="#longbeat"/>
          </animateMotion>
    
  </rect>               
</svg>
    <h4>End Pulse Concept</h4>
 </div>
  

style.css

body{
  background:#131313;
  color:#E3E3E3;
  font-family:sans-serif;
}
hr{
  width:100%;
  height:1px;
  color:#FFF;
}

#trial {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative; }

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

#pulsar{
  stroke-dasharray:281;
  -webkit-animation: dash 2.5s infinite linear forwards;
}

#jugular{
  stroke-dasharray:497;
 -webkit-animation: dash 1.4s infinite ease forwards;
}

#bleed{
  stroke-dasharray:437;
  -webkit-animation: dash 1.2s infinite ease-out ;
}
#flat{
  stroke-dasharray:814;
  -webkit-animation:dash 10s infinite linear;
}
/*Animation is the same for all 3 SVG's*/
@-webkit-keyframes dash{
  from{
    
    stroke-dashoffset:814;
  }
  to {
    stroke-dashoffset:-814;
    
  }
  
}