mirrow

Design, animate, and export SVGs from one file.

SVGs. One file. Zero fuss. 🪐

Try now Read Docs 
  
svg {
  // Internal coordinate space: viewBox x y w h
  box: (0, 0, 200, 200)

  // Rendered size on the page
  size: (200px, 200px)

  // How to map box to size
  preserve: (xMidYMid, meet)

  circle {
    id: "pulse"
    at: (100, 100)
    r: 40
    fill: "hotpink"

    animate {
      prop: "r"
      from: 40
      to: 60
      dur: 2s
      repeat: indefinite
    }
  }

  @hover, @active {
    #pulse {
      cy: 150px
      r: 60px
    }
  }
}

What is mirrow?

Mirrow makes SVGs effortless. Design, style, and animate everything in one file, no extra CSS or scripts. Write once, and get ready-to-use code for React, Svelte, and beyond.