DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for svghero: Javascript package for hero effect in SVG
VIMAL KUMAR for Web

Posted on

svghero: Javascript package for hero effect in SVG

you can get that effect by one line of code svghero(id,title,text,width,height,x,y,scale)

Alt Text

Video links - https://www.youtube.com/watch?v=n69Xqy9Q5kk

How to use this

  • Copy and paste this code in body section of html.
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svghero@0.2.0/example/style.css">
      <script src="https://cdn.jsdelivr.net/npm/svghero@0.2.0/cdn.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • in script tag or in js file add svghero(id,title,text,width,height,x,y,scale)

where

  • id = svg group id or id of elements that want to show in details page (string)
  • title = title that show in details page (string)
  • text = text that show in details page (string)
  • width = width of new svg that show in details page (number)
  • height = height of new svg that show in details page (number)
  • x = relative position of svg in details page (number)
  • y = relative position of svg in details page (number)
  • scale = relative scale of svg in details page (number)

example svghero("id","title","this is text",800,400,-100,50,2)

  • And it's Done πŸŽ‰

Documentation


GitHub logo vimal-verma / svghero

svghero: Javascript package for hero effect in SVG

svghero: Javascript package for hero effect in SVG

Version license download download Fork Star watch

Alt Text

Video links - https://www.youtube.com/watch?v=n69Xqy9Q5kk

you can get that effect by one line of code svghero(id,title,text,width,height,x,y,scale)

How to use this

  • Copy and paste this code in body section of html.

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svghero@0.2.0/example/style.css">
        <script src="https://cdn.jsdelivr.net/npm/svghero@0.2.0/cdn.js"></script>
    Enter fullscreen mode Exit fullscreen mode
  • in script tag or in js file add svghero(id,title,text,width,height,x,y,scale)

    where

    • id = svg group id or id of elements that want to show in details page (string)
    • title = title that show in details page (string)
    • text = text that show in details page (string)
    • width = width of new svg that show in details page (number)
    • height = height of new svg that show in details page (number)
    • x = relative position of svg in details page (number)
    • y = relative position of svg in details page (number)
    • scale = relative…

Top comments (1)

Collapse
 
bot profile image
bot

This is Useful

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!