• How to draw a path properly?
    1 replies, posted
Hello guys, I want to try a path, actual my stuff is looking like this: html stuff: <svg id="svg"> <clipPath id="apfel"> <path d="M 1,1 C 110,55 195,60, 265,55 C 290,55 290,85 265,85 C 195,85 110,85 40,100 C 0,100 0,50 40,50 Z"/> </clipPath> <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#apfel)"/> </svg> css stuff: .pen { stroke-dasharray: 280 280; stroke-dashoffset: 280; animation-duration: 2s; animation-name: draw; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } @keyframes draw { from { stroke-dashoffset: 280; } to { stroke-dashoffset: 0; } } But how do i draw a line like this ? https://files.facepunch.com/forum/upload/145200/905b9f03-cbc8-474d-9bdf-884eca76e73e/grafik.png Greetings, Aeh
I don't know if you've figured it out, but there's an tutorial and interactive code showing you how to do this here: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74 Here's the code for smoothing your path out: Svg path bezier curves
Sorry, you need to Log In to post a reply to this thread.