GrafikJS enables developers to push the boundaries of web design with SVG-based creativity.
GrafikJS is engineered to be lightweight without compromising on features or performance. Enjoy fast rendering and seamless animations for your projects.
With its flexible architecture, GrafikJS seamlessly integrates with popular frameworks like React, Angular, or Vue.js, offering you the freedom to work with your preferred tools.
From interactive games to dynamic editors and mesmerizing animations, GrafikJS provides you with the tools to bring your ideas to life in the browser. Unleash your creativity and explore the endless possibilities of SVG-based development.
Installation
npm install @grafikjs/vanilla
Getting Started
const wrap = document.getElementById('wrap');
const canvas = new grafik.Canvas({
width:1200,
height:800
});
const renderer = new grafik.Renderer(canvas);
const rect = new grafik.Rect({
width:200,
height:200,
left:400,
top:400,
angle:45,
fill:'#00ff00'
});
canvas.add(rect);
renderer.appendTo(wrap);
Installation
npm install @grafikjs/react
Getting Started
import {
CanvasProvider,
Canvas,
Rect
} from '@grafikjs/react';
<CanvasProvider>
<Canvas
width={1200}
height={800} >
<Rect
width={200}
height={200}
left={400}
top={400}
angle={45}
fill='#00ff00' />
</Canvas>
</CanvasProvider>