Material Ticker

Material ticker

by Aakash Khapare M

HTML

<div class="material-ticker">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <!-- <rect class="shape" height="60" width="320" /> -->
    <circle class="shape" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>

CSS

.material-ticker{

}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  stroke: #19f6e8;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.material-ticker:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}