Ska-Svg

Get Started

Just import the Ska.css and Ska.js files.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/assisfery/Ska-Svg@1.0/css/Ska.css">

<script src="https://cdn.jsdelivr.net/gh/assisfery/Ska-Svg@1.0/js/Ska.js"></script>

Use Shape

To use a svg shape just put data-ska-object="name_of_object" attribute in your html container.

<div data-ska-object="base"></div>

Supported Shapes

Below is the list of supported objects.

Random Shapes

Random Curtains

---

Random Waves

---

Colors

You can add colors class in your shapes.

<div data-ska-object="shape2" class="ska-red"></div>

Custom Colors

But you can also put your on color just adding data-ska-color="color" attribute or editing in css.

<div data-ska-object="base" data-ska-color="#16a085"></div>

or

#you-container svg path{
	fill: #16a085 !important;
}

Rotate shapes

You can rotate the shapes using the below classes.

<div data-ska-object="base" class="ska-rotate-45"></div>

Fill the width and height

Fill your shapes to its parent.

<div data-ska-object="wave2" class="ska-fill"></div>

Size

Resize your shape.

<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>

Shadow

You can shadow effects in your shapes using those classes.

Gradient

Below we have some gradient available in owr library.

<div data-ska-object="base" class="ska-gradient-1"></div>

Custom Gradients

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>

Contribute

New shapes

1. Draw a new shape
2. Put it in assets directory
3. Added it file name (without extension .svg) in Ska.supportedObjects array in Ska.js file