Question 286111 in Html Question posted in
Some basic documentation can be found here.

Html – Trinity knot svg

I want to make a trinity knot infinite animation loop right now I am stuck with an infinite loop animation I just want to add one knot on top so the logo looks like a trinity knot. I am a beginner on SVG. is there any solution to this?

 body {
            text-align: center;
            min-height: 100vh;
            background: #2bcbba;
            overflow: hidden;
        }
    
        svg {
            max-width: 30em;
            stroke: #0fb9b1;
            stroke-linecap: round;
            fill: none;
            stroke-width: 7%;
            margin-top: 200px;
        }
    
        svg use {
            stroke: #fff;
            animation: animate 4s linear infinite;
        }
    
        @keyframes animate {
            to {
                stroke-dashoffset: 0px;
            }
        }
        <svg viewBox="-2000 -1000 4000 2000">
            <path id="stroke" d="M354-354A500 500 0 1 1 354 354L-354-354A500 500 0 1 0-354 354z"></path>
            <use xlink:href="#stroke" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>
        </svg>
Tags:

2

Answers


  1. 0

    may be a better way but you can add another use element that looks like a trinity knot:

    <use xlink:href="#stroke" y="-800" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>

    also i set y position for test its better adjust it yourself.

    Login or Signup to reply.
  2. 0

    You need to draw a path with three corners. Here I have three arcs forming the lines in between. The could be other ways to do more or less the same.

    I gave the path a length (pathLengt) to make it easier to calculate the stroke-dash array etc.

    body {
  text-align: center;
  min-height: 100vh;
  background: #2bcbba;
  overflow: hidden;
}

svg {
  max-height: 95vh;
  stroke: #0fb9b1;
  stroke-linecap: round;
  fill: none;
  stroke-width: 40px;
}

svg path {
  stroke: #fff;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  from {
    stroke-dashoffset: 100px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
    <svg viewBox="0 0 910 820">
  <path transform="translate(22 24)" pathLength="100"
  d="M 433 0 A 440 440 90 0 0 866 750
  A 440 440 90 0 0 0 750 A 440 440 90 0 0 433 0 Z"
  stroke-dasharray="40 60" stroke-dashoffset="100"/>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search