![](/style/images/good.png)
![](/style/images/bad.png)
We need a designer to help us in Ska-Svg Project - Come contribute
source link: https://github.com/assisfery/Ska-Svg
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Ska-Svg
A library to use svg shapes in your web page in the easiest way.
Demo
See the demo here: https://assisfery.github.io/Ska-Svg/
Get Started
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>
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>
Colors
You can add colors class in your shapes.
<div data-ska-object="shape2" class="ska-red"></div>
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>
Fixed Shapes
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>
Shadow
You can shadow effects in your shapes using those classes.
class="ska-shadow" or class="ska-shadow-lg"
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
- Draw a new shape
- Put it in assets directory
- Add it file name (without extension .svg) in Ska.supportedObjects array in Ska.js file
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK