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!



    Cows are cool




    Cows are cool



	

		

	

	


	


	

	




    Cows are cool


    Cows are cool


Cows are cool Cows are cool Cows are cool  Cows are cool

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!



    so are giraffes!




    so are giraffes!



	

		





	


	

	


	


	

	




    so are giraffes!


    so are giraffes!


so are giraffes! so are giraffes! so are giraffes!  so are giraffes!

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.



    HARLEQUIN




    HARLEQUIN



	

		





	


	

	


	

	

	




    HARLEQUIN


    HARLEQUIN


HARLEQUIN HARLEQUIN HARLEQUIN  HARLEQUIN

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!



    Way up in the clouds




    Way up in the clouds



	

		





	



	

	


	

	




    Way up in the clouds


    Way up in the clouds


Way up in the clouds Way up in the clouds Way up in the clouds  Way up in the clouds

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.



    Flower Power




    Flower Power



	

		





	


	

	


	

	

	





    Flower Power


    Flower Power


Flower Power Flower Power Flower Power  Flower Power

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:


	
	Shadow 1



	
	Shadow 1



	
			
	


	

	





	
				Shadow 1	

	
				Shadow 1	


	
	Shadow 1


Shadow 1 Shadow 1 Shadow 1 Shadow 1 Shadow 1

...and even more shapes!

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



    PASSED




    PASSED




	
		
		
		
		

		

			

		

		


		


	

	
	

	
	

	
	

	
		

			Official Seal of Approval
		
	

	
		

			 SVG you can trust
		
	

	

		    PASSED
	




    PASSED


PASSED PASSED Official Seal of Approval SVG you can trust PASSED  PASSED

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!

SVG shortcode examples

Updated on 2017-02-28T16:51:43+00:00, by alexg.