Here you can browse some examples of what you can do with SLATE. Just copy the shortcodes and paste them into your site.

notice about multi-line shortcodes

All the shortcodes presented here are broken up into multiple lines for readability. When you paste them into your posts or pages, make sure that the shortcode attributes are all in one line. The text content of the shortcode can span multiple lines.

font, fill, and a shadow filter

Here we use the dots fill pattern with black and white spots that remind us of cows. The dots pattern does what it says: it draws dots on your letters. Combine with a plump font, add a drop shadow filter to give the impression of volume, and the cow effect is conveyed graphically. Moo!

[slate_plain
    _font_family="Salsa"
    _font_size="36pt"
    _stroke="#000000"
    fill="dots"
    fill_dots_radius="6"
    fill_dots_distance="10"
    filter_shadow_radius="3"
    filter_shadow_xoff="5"
    filter_shadow_yoff="5"]

    Cows are cool

[/slate_plain]

glow filter

Change the colors a bit, choose a slim and tall font and we get text that reminds us of giraffes! This example showcases a glow filter!

[slate_plain
    _font_family="Crafty Girls"
    _font_size="36pt"
    _stroke="#452c0e"
    fill="dots"
    fill_dots_color="#452c0e"
    fill_dots_bgcolor="#e0bc8a"
    fill_dots_radius="10"
    fill_dots_distance="10"
    filter_glow_radius="5"
    filter_glow_color="#442907"]

    so are giraffes!

[/slate_plain]

squares fill

Different fill patterns offer different parameters. Here we use the squares pattern. Using its tilt attribute we can rotate the squares to achieve a pattern that looks like diamonds.

[slate_plain
    _font_family="Lusitana"
    _font_size="46pt"
    _stroke="#ffffff"
    _stroke_width="0px"
    fill="squares"
    fill_squares_bgcolor="#dd3333"
    fill_squares_side="5"
    fill_squares_tilt="35"
    filter_glow_radius="13"
    filter_glow_color="#ff0000"]

    HARLEQUIN

[/slate_plain]

linear gradient fill

The linear gradient works just like you'd expect: you can fill your letters with a smooth transition from one color to another. Here we combine the linear gradient with a display font to create the impression of clouds. Notice how filters can be combined: here we have a glow and a shadow filter working together!

[slate_plain
    _font_family="Love Ya Like A Sister"
    _font_size="36pt" _stroke="#0000ff"
    _stroke_width="0.4"
    fill="gradient_linear"
    fill_gradient_linear_color1="#f4f4ff"
    fill_gradient_linear_x1="30%"
    fill_gradient_linear_y1="20%"
    fill_gradient_linear_color2="#a5a5ff"
    fill_gradient_linear_x2="70%"
    filter_glow_radius="5"
    filter_shadow_radius="15"
    filter_shadow_xoff="10"
    filter_shadow_yoff="20"]

    Way up in the clouds

[/slate_plain]

radial gradient fill

The radial gradient can create weirder effects: Here we let it cycle through its three default colors, although you can tweak the colors, center position, and cycle period. Check the PHPdoc in the fill pattern's source code to see all available attributes, or simply install Visual Composer integration to get an interface that lets you graphically edit all available attributes.

[slate_plain
    _font_family="Sansita One"
    _font_size="36pt"
    _stroke="#dd3333"
    fill="gradient_radial_3"
    fill_gradient_radial_3_radius="10%"
    filter_glow_radius="2"
    filter_glow_color="#ff00fa"]

    Flower Power

[/slate_plain]

go wild with more complex shapes...

All of the examples up to here have been using the plain shape, which lets you draw plain-old horizontal text. You can achieve more complex effects by installing plugins that provide more shapes. Shapes are essentially SVG templates that can contain all kinds of graphical elements. For example, the shadow shape lets you create text with patterned shadows:

[slate_shadow
	_font_family="Modern Antiqua"
	_font_size="72pt"
	_stroke="#dd3333"
	color="#910000"
	xoff="6"
	yoff="6"
	fill="stripes"
	fill_stripes_color1="#a5a5a5"
	fill_stripes_width1="3"
	fill_stripes_color2="rgba(0,0,0,0.01)"
	fill_stripes_tilt="-40"]
	
	Shadow 1

[/slate_shadow]

...and even more shapes!

Here's an example of using the stamp shape from the More Shapes extension.

[slate_stamp
    _font_family="Holtwood One SC"
    _font_size="20px"
    _stroke="#dd3333"
    _skew_x_deg="20"
    angle="-25"
    upper_text="Official Seal of Approval"
    lower_text="SVG you can trust"
    outline_color="#b21818"
    fill="color"
    fill_color_color="#dd3333"
    filter_shadow_radius="8"
    filter_shadow_xoff="8"
    filter_shadow_yoff="8"]

    PASSED

[/slate_stamp]

download

Visit the download area to get this plugin, or visit the SVG shortcodes tutorial if you wish to learn more about the format of SVG shortcodes!