All Projects → omnibrain → Svguitar

omnibrain / Svguitar

Licence: mit
Create beautiful SVG guitar chord charts

Programming Languages

javascript
152645 projects - #8 most used programming language
typescript
26450 projects

Labels

Projects that are alternatives of or similar to Svguitar

Grayshift
A lightweight front-end component library for developing fast and powerful web interfaces.
Stars: ✭ 304 (-12.64%)
Mutual labels:  svg
Warpjs
Warp, distort, bend, twist and smudge your SVG’s directly in the browser
Stars: ✭ 326 (-6.32%)
Mutual labels:  svg
Svgtovectordrawableconverter
Batch converter of SVG images to Android vector drawable XML resource files. Online version of the converter is here:
Stars: ✭ 341 (-2.01%)
Mutual labels:  svg
Sprotty
A diagramming framework for the web
Stars: ✭ 309 (-11.21%)
Mutual labels:  svg
Devicon
Set of icons representing programming languages, designing & development tools
Stars: ✭ 4,536 (+1203.45%)
Mutual labels:  svg
Joint
JavaScript diagramming library
Stars: ✭ 3,509 (+908.33%)
Mutual labels:  svg
Svgmap
svg地图组件,完整版包含城市及区县数据及更多扩展功能。。。
Stars: ✭ 298 (-14.37%)
Mutual labels:  svg
Magicasakura
MagicaSakura 是 Android 多主题框架。~ is an Android multi theme library which supporting both daily colorful theme and night theme.
Stars: ✭ 3,455 (+892.82%)
Mutual labels:  svg
Drawing animation
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).
Stars: ✭ 317 (-8.91%)
Mutual labels:  svg
Faux Code Generator
Turn real code into faux code.
Stars: ✭ 339 (-2.59%)
Mutual labels:  svg
Remixicon
Open source neutral style icon system
Stars: ✭ 3,956 (+1036.78%)
Mutual labels:  svg
Sharpvectors
SharpVectors - SVG# Reloaded: SVG DOM and Rendering in C# for the .Net.
Stars: ✭ 315 (-9.48%)
Mutual labels:  svg
Compress Images
Minify size your images. Image compression with extension: jpg/jpeg, svg, png, gif. NodeJs
Stars: ✭ 331 (-4.89%)
Mutual labels:  svg
Generate Avatar
Generate your 100% fingerprinted example avatar from id, email, username etc.
Stars: ✭ 307 (-11.78%)
Mutual labels:  svg
Wpf Math
.NET library for rendering mathematical formulae using the LaTeX typsetting style, for the WPF framework
Stars: ✭ 339 (-2.59%)
Mutual labels:  svg
Costumekit
Base types for theming an app.
Stars: ✭ 300 (-13.79%)
Mutual labels:  svg
Ikonate
Fully customisable & accessible vector icons
Stars: ✭ 3,392 (+874.71%)
Mutual labels:  svg
React Mt Svg Lines
A React.js wrapper component to animate the line stroke in SVGs
Stars: ✭ 344 (-1.15%)
Mutual labels:  svg
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+1314.94%)
Mutual labels:  svg
Latexdraw
A vector drawing editor for LaTeX (JavaFX).
Stars: ✭ 336 (-3.45%)
Mutual labels:  svg

SVGuitar - JavaScript Guitar Chord Renderer

styled with prettier

Travis Coveralls Dependencies Dev Dependencies semantic-release Known Vulnerabilities Code Style

JavaScript (TypeScript) library to create beautiful SVG guitar chord charts directly in the browser.

Demo: https://omnibrain.github.io/svguitar/ [ source ]

TypeScript API Documentation: https://omnibrain.github.io/svguitar/docs/

Example chord charts:

Example Chord Chart 1 Example Chord Chart 2 Example Chord Chart 3 Example Chord Chart 4

Getting Started

<!--container of the chart-->
<div id="chart"></div>

<!--load umd script -->
<script src="https://omnibrain.github.io/svguitar/js/svguitar.umd.js"></script>

<script>
    // initialize the chart
    var chart = new svguitar.SVGuitarChord('#chart')
    
    // draw the chart
    chart.configure({/* configuration */})
          .chord({/* chord */})
          .draw();
</script>

Of course you can also add SVGuitar as a dependency to your project:

# Add the dependency to your project
npm install --save svguitar

# or
yarn add svguitar

And then import it in your project:

import { SVGuitarChord } from 'svguitar'

const chart = new SVGuitarChord('#chart')
    
// draw the chart
chart.configure({/* configuration */})
      .chord({/* chord */})
      .draw();

Usage

The SVG charts are highly customizable. For a full API documentation have a look at the TypeScript documentation.

Chart configuration is completely optional, you don't have to pass any configuration or you can only override specific settings.

Here's an example of a very customized chart:

new SVGuitarChord('#some-selector')
      .chord({
        // array of [string, fret, text | options]
        fingers: [
          // finger at string 1, fret 2, with text '2'
          [1, 2, '2'],

          // finger at string 2, fret 3, with text '3', colored red
          [2, 3, { text: '3', color: '#F00' }],
        
          // finger is triangle shaped
          [3, 3, { shape: 'triangle' }],
          [6, 'x']
        ],
      
        // optional: barres for barre chords
        barres: [
          { fromString: 5, toString: 1, fret: 1, text: '1', color: '#0F0', textColor: '#F00' },
        ],

        // title of the chart (optional)
        title: 'F# minor',

        // position (defaults to 1)
        position: 2,
      })
      .configure({
          // Customizations (all optional, defaults shown)

          /**
           * Select between 'normal' and 'handdrawn'
           */
          style: 'normal',

          /**
           * The number of strings
           */
          strings: 6,
        
          /**
           * The number of frets
           */
          frets: 4,
          /**
           * Default position if no positon is provided (first fret is 1)
           */
          position: 1,
        
          /**
           * These are the labels under the strings. Can be any string.
           */
          tuning: [ 'E', 'A', 'D', 'G', 'B', 'E' ],
        
          /**
           * The position of the fret label (eg. "3fr")
           */
          fretLabelPosition: 'right',
        
          /**
           * The font size of the fret label
           */
          fretLabelFontSize: 38,
        
          /**
           * The font size of the string labels
           */
          tuningsFontSize: 28,
        
          /**
           * Size of a nut relative to the string spacing
           */
          nutSize: 0.65,
        
          /**
           * Color of a finger / nut
           */
          nutColor: '#000',
                
          /**
           * The color of text inside nuts
           */
          nutTextColor: '#FFF',
        
          /**
           * The size of text inside nuts
           */
          nutTextSize: 22,

          /**
           * stroke color of a nut. Defaults to the nut color if not set
           */
          nutStrokeColor: '#000000',
  
          /**
           * stroke width of a nut
           */
          nutStrokeWidth: 0,
  
          /**
           * stroke color of a barre chord. Defaults to the nut color if not set
           */
          barreChordStrokeColor: '#000000',
  
          /**
           * stroke width of a barre chord
           */
          barreChordStrokeWidth: 0,

          /**
           * Height of a fret, relative to the space between two strings
           */
          fretSize: 1.5,
        
          /**
           * The minimum side padding (from the guitar to the edge of the SVG) relative to the whole width.
           * This is only applied if it's larger than the letters inside of the padding (eg the starting fret)
           */
          sidePadding: 0.2,
        
          /**
           * The font family used for all letters and numbers
           */
          fontFamily: 'Arial, "Helvetica Neue", Helvetica, sans-serif',
        
          /**
           * Default title of the chart if no title is provided
           */
          title: 'F# minor',
        
          /**
           * Font size of the title. This is only the initial font size. If the title doesn't fit, the title
           * is automatically scaled so that it fits.
           */
          titleFontSize: 48,
        
          /**
           * Space between the title and the chart
           */
          titleBottomMargin: 0,
        
          /**
           * Global color of the whole chart. Can be overridden with more specifig color settings such as
           * @link titleColor or @link stringColor etc.
           */
          color: '#000000',

          /**
           * The background color of the chord diagram. By default the background is transparent. To set the background to transparent either set this to 'none' or undefined
           */
          backgroundColor: 'none',
        
          /**
           * Barre chord rectangle border radius relative to the nutSize (eg. 1 means completely round endges, 0 means not rounded at all)
           */
          barreChordRadius: 0.25,
        
          /**
           * Size of the Xs and Os above empty strings relative to the space between two strings
           */
          emptyStringIndicatorSize: 0.6,
        
          /**
           * Global stroke width
           */
          strokeWidth: 2,
        
          /**
           * The width of the top fret (only used if position is 1)
           */
          topFretWidth: 10,
        
          /**
           * The color of the title (overrides color)
           */
          titleColor: '#000000',
          /**
           * The color of the strings (overrides color)
           */
          stringColor: '#000000',
          /**
           * The color of the fret position (overrides color)
           */
          fretLabelColor: '#000000',
          /**
           * The color of the tunings (overrides color)
           */
          tuningsColor: '#000000',
          /**
           * The color of the frets (overrides color)
           */
          fretColor: '#000000',
          /**
           * When set to true the distance between the chord diagram and the top of the SVG stayes the same,
           * no matter if a title is defined or not.
           */
          fixedDiagramPosition: false

      })
      .draw();

Contribute

Pull Requests are very welcome!

Projects using SVGuitar

Here are some projects that use svguitar:

Are you using SVGuitar? Create an issue to get your project listed here! Or simply create a pull request with your project added.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]