Advertisement
Guest User

Untitled

a guest
Dec 7th, 2016
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.75 KB | None | 0 0
  1. <svg height="100%" width="100%" id="main">
  2. <circle class="graph line line-1" cx="50%" cy="50%" r="25%" stroke-width="5%" stroke="#f1c40f" fill="none" />
  3. <circle class="graph line line-2" cx="50%" cy="50%" r="20%" stroke-width="5%" stroke="#e67e22" fill="none" />
  4. <circle class="graph line line-3" cx="50%" cy="50%" r="15%" stroke-width="5%" stroke="#00c0df" fill="none" />
  5. </svg>
  6.  
  7. #main {
  8. padding: 100px 0;
  9. margin-top: 100px;
  10. height: 200px;
  11. background-color: pink;
  12. }
  13.  
  14. .graph {
  15. transform: rotate(270deg);
  16. }
  17.  
  18. .graph.line {
  19. transform-origin: center;
  20. stroke-dasharray: 160%;
  21. animation: graph 1.5s ease-in-out infinite alternate;
  22. }
  23. @keyframes graph {
  24. from {
  25. stroke-dashoffset: 160%;
  26. }
  27. to {
  28. stroke-dashoffset: 90%;
  29. }
  30. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement