Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <svg height="100%" width="100%" id="main">
- <circle class="graph line line-1" cx="50%" cy="50%" r="25%" stroke-width="5%" stroke="#f1c40f" fill="none" />
- <circle class="graph line line-2" cx="50%" cy="50%" r="20%" stroke-width="5%" stroke="#e67e22" fill="none" />
- <circle class="graph line line-3" cx="50%" cy="50%" r="15%" stroke-width="5%" stroke="#00c0df" fill="none" />
- </svg>
- #main {
- padding: 100px 0;
- margin-top: 100px;
- height: 200px;
- background-color: pink;
- }
- .graph {
- transform: rotate(270deg);
- }
- .graph.line {
- transform-origin: center;
- stroke-dasharray: 160%;
- animation: graph 1.5s ease-in-out infinite alternate;
- }
- @keyframes graph {
- from {
- stroke-dashoffset: 160%;
- }
- to {
- stroke-dashoffset: 90%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement