A library to use svg shapes in your web page in the easiest way.
See the demo here: https://assisfery.github.io/Ska-Svg/
Just import the Ska.css and Ska.js files.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/assisfery/[email protected]/css/Ska.css">
<script src="https://cdn.jsdelivr.net/gh/assisfery/[email protected]/js/Ska.js"></script>
To use a svg shape just put data-ska-object="name_of_object" attribute in your html container.
<div data-ska-object="base"></div>
You can add colors class in your shapes.
<div data-ska-object="shape2" class="ska-red"></div>
You can rotate the shapes using the below classes.
<div data-ska-object="base" class="ska-rotate-45"></div>
Fill your shapes to its parent.
<div data-ska-object="wave2" class="ska-fill"></div>
You can fixed your shape in some position of its parent.
<div class="ska-fixed">
<div data-ska-object="base" class="ska-fixed-top ska-fixed-left ska-fill-128px ska-fixed-backward"></div>
<h3>Fixed Shapes</h3>
<p>You can fixed your shape in some position of its parent.</p>
</div>
You can shadow effects in your shapes using those classes.
class="ska-shadow" or class="ska-shadow-lg"
Below we have some gradient available in owr library.
<div data-ska-object="base" class="ska-gradient-1"></div>
But you can also put your on gradient just adding data-ska-gradient-start-color="colorStart", data-ska-gradient-end-color="colorStart" attributes.
<div data-ska-object="shape2"
data-ska-gradient-start-color="#FB7BA2"
data-ska-gradient-end-color="#FCE043"
data-ska-gradient-rotate="45"></div>
- Draw a new shape
- Put it in assets directory
- Add it file name (without extension .svg) in Ska.supportedObjects array in Ska.js file
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent