Don't code your keyframes. Design them.

Design SVG animation on a visual timeline—property tracks, CSS motion paths, and stroke draw-on. Export CSS @keyframes and animated SVG the browser runs natively, so the motion loads with the page. Lottie stays optional.

Try Flekta See how it works

Timeline depth. Native CSS.

Start with transforms and color. Add motion path, draw-on, per-key easing, echo trails, repeaters, and nested comps when the piece needs them. Script the repetitive parts.

Shape motion, not numbers

Move, rotate, scale, and skew directly on the canvas, then refine the exact property tracks on the timeline.

Draw strokes on, not dash math

Animate SVG line drawing visually—draw-on, erase, window, and flow—instead of measuring path length and hand-tuning dasharray.

Tune every interval

Use global easing or per-property easing so position, opacity, and rotation can each feel right.

Follow any path

Draw a custom Bézier path, animate along it, and export CSS motion path with offset-path—no JavaScript path library required.

Animate once. Repeat forever.

Create one motion, then repeat it, offset it, cycle it, or ping-pong it into a larger pattern.

Build animations inside animations

Use linked layers and nested compositions when one timeline is no longer enough.

This entire animation was made in Flekta.

One timeline: CSS motion path, stroke draw-on, and repeaters—then the same animation running in the browser as plain CSS, loading with the page like any other stylesheet.

Same motion. Two formats.

Edit SVG motion in real time, then export CSS or Lottie from the same timeline. Compare the two exports below.

Animation exported as SVG with CSS

SVG + CSS · Size: 11 kB

Lottie · Size: 38 kB

Design once. Choose your output.

Ship native web motion when the browser is the destination, or export Lottie, GIF, and MP4 when a project needs another format.

  • Animated SVG — one file, upload anywhere
  • CSS @keyframes — offset-path and transforms, in your repo
  • Lottie JSON — vector motion for websites and apps
  • GIF / MP4 — previews and social
  • Project JSON — save and reopen in Flekta
Start animating SVG
motion.css
.feature-mark {
  offset-path: path("M0,0 C80,-40 120,-40 160,0");
  offset-rotate: auto;
  animation: travel 1.8s linear both;
}
@keyframes travel {
  0% {
    offset-distance: 0%;
    animation-timing-function: ease-in;
  }
  100% {
    offset-distance: 100%;
  }
}

Sound familiar?

A visual workflow for the parts of web animation that usually slow you down.

  • Still writing CSS keyframes by hand?

    Design the motion on a visual timeline. Export CSS or animated SVG the browser already runs—you never write the stylesheet.

  • Tried AI, but the animation isn't accurate?

    Generated keyframes look close, then fall apart on timing, paths, and easing. Place every key on a real timeline—or script the editor—and fix what you can see.

  • Need a small animation without a heavy JavaScript player?

    Ship native CSS and SVG—nothing added to your bundle, and the motion starts as soon as the page paints. Lottie stays available for products that already run one.

  • Want to learn motion without expensive software?

    Open the editor in the browser. Property tracks, paths, easing, and repeaters—no desktop suite, and no subscription required to try an idea.

I wanted a simpler way to bring my designs to life.

I’m a product designer and artist who animates occasionally. A full motion-design subscription felt hard to justify for a few icons or illustrations.

So I built Flekta: layers, keyframes, and a visual timeline in the browser. Animate your SVG and export animated SVG, CSS, or Lottie—no desktop app or export plugin needed.

An AI assistant can work on the same timeline through WebMCP. See what it creates, refine the motion, and choose your export format.

Motion design tools in the browser

From artwork to production-ready motion

Upload an SVG, animate on the timeline, export CSS @keyframes or animated SVG your page can run as-is.

  • Upload your SVG

    Drop in illustration or UI artwork. Flekta splits it into layers so you can animate each part on a timeline.

  • Animate visually

    Move objects directly on the canvas and keyframe individual properties on the timeline.

  • Compose reusable motion

    Repeat motion, link layers, nest compositions, and refine the timing until the piece feels intentional.

  • Ship the output

    Export CSS @keyframes or an animated SVG that runs in the browser. Add Lottie, GIF, or MP4 only when the project needs them.

Built for the motion you put on the web

For motion designers, product designers, and engineers bringing websites, products, and client projects to life.

Website & landing features

Turn product illustrations and feature diagrams into lightweight CSS motion that loads with the page.

Onboarding & UI motion

Animate empty states, walkthroughs, and interface moments as SVG—ready to ship in the product.

Portfolio & client work

Deliver an uploadable animated SVG, or CSS developers can inspect, tune, and keep in the repo.

Stop rebuilding animations for the web.

Design the motion once. Export CSS or animated SVG.

Try Flekta See how it works