@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning: Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":37355,"date":"2016-03-08T12:19:22","date_gmt":"2016-03-08T17:19:22","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=37355"},"modified":"2020-05-09T17:43:02","modified_gmt":"2020-05-09T21:43:02","slug":"svg-effects-and-tutorials","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/","title":{"rendered":"20+ Impressive SVG Effects and Tutorials"},"content":{"rendered":"

SVG’s or scalable vector graphics can be used in an array of animations and interactive designs. The great feature of SVG filters\u00a0is that they allow you to manipulate text by applying multiple borders, different colors, add patterns, textures, and 3D effects, and so much more. Additionally, they\u00a0allow you to manipulate images and bring them to life. Basically, SVG’s are used to\u00a0add tons of cool effects to any HTML element.<\/strong><\/p>\n

There are countless awesome\u00a0designs you can come up and incorporate into a website or any other design project by\u00a0using SVG’s, like rotating clocks, timers, jigsaw puzzles, animated lyrics, animated icons and vectors, animated hamburger buttons, checkboxes and loading buttons, interactive maps and diagrams,\u00a0and so much more.<\/p>\n

You are not familiar with SVG effects or you’d like to learn\u00a0how to create them, there are countless online tutorials and downloads that can help you, like Animate Plus, a JavaScript library for animating\u00a0CSS properties and SVG attributes, or SVG Draggy.js, a JavaScript library for dragging SVG elements. In this article, we feature 20+ impressive SVG effects and tutorials<\/strong> that will perfectly illustrate the amazing things you can build and that will guide you in creating a design of your own.<\/p>\n

Also, do you want to see how you can use SVG to create amazing, beautifully animated website designs? Scroll down and see our hand-picked collection of SVG-powered websites.<\/p>\n

Synchronised animation and audio<\/a><\/h2>\n

With the help of\u00a0SVG’s,\u00a0you can literally create anything, whether it’s for fun, aesthetic or educational purposes. Here’s a tutorial that shows you how to create a synchronized animation and audio with the help of SVGs.<\/p>\n

\"Synchronised-animation-and-audio\"<\/a><\/h2>\n

Path-tracing map routes with SVG and Raphael<\/a><\/h2>\n

The SVG format is superior to raster images, such as GIF’s, due to its powerful animation capabilities, however, it has to be used with the proper images, as bigger files, like\u00a0photographs or complex vector illustrations, will be too big for SVG, and thus work better in a raster image format. This project is a perfect example of the capabilities of SVG. Here’s how you can create path-tracing map routes with SVG.<\/p>\n

\"Path-tracing-map-routes-with-SVG-and-Raphael\"<\/a><\/p>\n

\n
\n
\n

Applying SVG effects to\u00a0HTML content<\/a><\/h2>\n

SVG effects can be used for a variety of purposes and will surely enhance the look and usability of a website, as they are highly interactive and fun. Here’s how you can apply SVG effects to HTML content.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\u00a0\"Applying<\/a><\/div>\n

Blobular<\/a><\/h2>\n

Here’s another application of SVG in web design. You can use them to create interactive websites and even games!<\/p>\n

\"Blobular\"<\/a><\/p>\n

Animated SVG clock<\/a><\/h2>\n

Check out this moving animated SVG clock that show you the capabilities of SVGs!<\/p>\n

\"Animated-SVG-clock\"<\/a><\/p>\n

Adding a third dimension to SVG graphics<\/a><\/h2>\n

SVG\u00a0images can be modified programmatically and loaded with the web page. This tutorial will teach you how to declare flat\u00a0SVG\u00a0paths and then add a third dimension to them with javascript.<\/p>\n

\"Adding-a-third-dimension-to-SVG-graphics\"<\/a><\/p>\n

An interactive SVG jigsaw<\/a><\/h2>\n

The images that are most compatible with the\u00a0SVG format are non-complex, vector-based illustrations, UI controls, logos and icons, and infographics. You can manipulate them any way you want. Here’s for example how you can create an SVG jigsaw.<\/p>\n

\"An-interactive-SVG-jigsaw\"<\/a><\/p>\n

Applying SVG masks over HTML5 video<\/a><\/h2>\n

SVG (or Scalable Vector Graphics) is an XML-based file format which contains two-dimension vectors and allows developers to create amazing graphics and graphical applications that are dynamic and animated. In this tutorial, you will learn how to apply SVG masks over HTML5 videos.<\/p>\n

\"Applying-SVG-masks-over-HTML5-video\"<\/a><\/p>\n

Deconstructing Trajan columns with SVG<\/a><\/h2>\n

SVG is a powerful image format that can be manipulated with code, either in a text editor or with CSS \/ JS and it is used more and more in web design. Here’s a unique way you can use it. Bet you didn’t think about this!<\/p>\n

\"Deconstructing-Trajan-columns-with-SVG\"<\/a><\/p>\n

Animated lyrics in SVG<\/a><\/h2>\n

Yes, you can even create animated lyrics in SVG. Imagine the customization possibilities!<\/p>\n

\"Animated-lyrics-in-SVG\"<\/a><\/p>\n

The creepy mouth in SVG<\/a><\/h2>\n

One of the biggest pluses SVG has is that it can look sharp on all screen resolutions. It can contain very small file sizes and can be easily edited and modified. Here’s how you can use SVGs to create awesome animations on websites!<\/p>\n

\"The-creepy-mouth-in-SVG\"<\/a><\/p>\n

Animated line drawing in SVG<\/a><\/h2>\n

SVG images offer so much more freedom when it comes to the size of the images used, as well as the way they interact with your final design. Here’s a great example!<\/p>\n

\"Animated-line-drawing-in-SVG\"<\/a><\/p>\n

The Art Of SVG Filters And Why It Is Awesome<\/a><\/h2>\n

Learn everything there is to learn about the art of SVG filters and why they are so awesome, in this comprehensive article by Smashing Magazine.<\/p>\n

\"The<\/a><\/p>\n

Animated SVGs: Custom easing and timing<\/a><\/h2>\n

You can also use SVGs to create interactive, animated charts and graphs. Here’s a great example!<\/p>\n

\"Animated-SVGs-Custom-easing-and-timing\"<\/a><\/h2>\n

SVG Drawing Animation<\/a><\/h2>\n

Imagine presenting your app design concepts to your clients like this!<\/p>\n

\"SVG-Drawing-Animation\"<\/a><\/p>\n

Animated SVG Icons with Snap.svg<\/a><\/h2>\n

This article explores what you can do with SVG and teaches you how to animate some SVG icons as a practical example.<\/p>\n

\"Animated-SVG-Icons-with-Snap<\/a><\/p>\n

SVG\u00a0Tutorial<\/span><\/a><\/h2>\n

This site also comes with a “Try it Yourself” editor, so you can edit the SVG, and click on a button to view the result!<\/p>\n

\"SVG<\/a><\/p>\n

The Ultimate Guide to SVG<\/a><\/h2>\n

This guide teaches you so many useful things about the power of SVG. Learn how to use SVGs to embed an image in a web page, scale that page to any size, and never lose image quality!<\/p>\n

\"The<\/a><\/p>\n

Svgtutorial<\/a><\/h2>\n

This is an SVG primer for everyone, created by Mijingo. You can learn a lot from this!<\/p>\n

\"SVG<\/a><\/p>\n

How to work with SVG\u00a0icons<\/a><\/h2>\n

There are many ways to use SVG icons in HTML and CSS and this tutorial will teach you how to work with SVG icons.<\/p>\n

\"how<\/a><\/p>\n

Optimising SVG for Web Use \u2014 Part\u00a01<\/span><\/a><\/h2>\n

This 2-parts article\u00a0covers the basic concepts of SVG path optimisation, important to know by any web designer and web developer.<\/p>\n

\"Optimising<\/a><\/p>\n

Inline SVG vs Icon Fonts\u00a0<\/a><\/h2>\n

Read this tutorial before\u00a0building an icon system for a site. It will be very useful to you!<\/p>\n

\"Inline<\/a><\/p>\n

\n

Distorted Button Effects with SVG Filters<\/a><\/h2>\n

Here’s a\u00a0set of highly experimental distortion effects for buttons using SVG filters. How will you use these in your projects?<\/p>\n<\/header>\n

\u00a0\"Distorted<\/a><\/div>\n

 <\/p>\n

Pro tips for using scalable vector graphics<\/a><\/h2>\n

This tutorial will give you some pro tips for using SVGs. You will learn how scalable vector graphics can be used for much more than just creating and animating shapes.<\/p>\n

\u00a0\"Pro<\/a><\/div>\n

The Practical Beginner\u2019s Guide to SVG<\/a><\/h2>\n

Why are SVGs so popular? Learn everything there is to learn about them in thi cool SVG guide.<\/p>\n

\"The<\/a><\/p>\n

SVG powered website designs<\/h2>\n

Let us take a moment to focus on some of the most inspirational and exciting websites that use the power of SVG<\/strong><\/em>. \u00a0Enjoy!<\/p>\n

Cavalier: Conqueror of Excellence<\/a><\/h2>\n

These series of games were created using SVG for animation and graphics. Posture & Balance is the first game created for a platform called Cavalier that was designed with innovative technologies.<\/p>\n

\"Cavalier-Conqueror-of-Excellence\"<\/a><\/h2>\n

 <\/p>\n

Poign\u00e9e de main virile<\/a><\/h2>\n

This animated and\u00a0photographic new website was built for the France-based graphic design & digital creative studio Poign\u00e9e de main virile. The result is incredible!<\/p>\n

\"Poign\u00e9e-de-main-virile\"<\/a><\/h2>\n

iFly50<\/a><\/h2>\n

When FLY KLM Magazine celebrated its fiftieth edition, it designed a vividly animated site for the ultimate travel collection. In this way, there were presented the 50 most beautiful, fascinating places on Earth.<\/p>\n

\"iFly50\"<\/a><\/p>\n

 <\/p>\n

The ARK: Star Citizen Starmap<\/a><\/h2>\n

Using an incredible ARK interface, this website presents Robert’s Space Industries, a spacecraft manufacturer, within the game “Star Citizen\u201d. This is a portal for information, updates, and purchases of your very own spacecraft with which you can protect the citizens of Star Citizen.<\/p>\n

\"The-ARK-Star-Citizen-Starmap\"<\/a><\/p>\n

Keep Earthquakes Weird<\/a><\/h2>\n

Keep Earthquakes Weird is a platform created with stunning SVG graphic effects which were built with the goal of preparing the population of Portland in case of an earthquake. The content is very educative.<\/p>\n

\"Keep-Earthquakes-Weird<\/a><\/p>\n

 <\/p>\n

30u<\/a><\/h2>\n

30u is an e-shop that sells shoes on a site created by developers that put attention on style and used some interesting SVG features.<\/p>\n

\"30u\"<\/a><\/p>\n

QED Group<\/a><\/h2>\n

QED GROUP site has amazing suggestive illustrations which will offer you a great navigation experience. The layout of the site is classy and smart.<\/p>\n

\"QED-Group<\/a><\/p>\n

Melanie Daveid<\/a><\/h2>\n

Melanie Daveid\u2019s website is one of the nicest portfolio sites that can be found on the web.\u00a0 The site includes smooth transitions and gorgeous hand illustrations<\/p>\n

\"Melanie-Daveid\"<\/a><\/p>\n

WWF France – Earth Hour Paris<\/a><\/h2>\n

This animated site was created for WWF France and was used to announce that on March 19th, the lights of the Eiffel Tower will be switched off for Earth Hour.<\/p>\n

\"WWF-France---Earth-Hour-Paris\"<\/a><\/p>\n

Nerisson<\/a><\/h2>\n

Nerisson\u00a0aka Jimmy Raheriarisoa is a French art director specialized in web\/mobile design, illustration & motion design.\u00a0 This is a great portfolio site, with nice illustrations and graphic features.<\/p>\n

\"Nerisson\"<\/a><\/p>\n

One Design Company<\/a><\/h2>\n

One Design Company is an experienced and enthusiast team of designers, developers, project managers, writers, and artists. Their site is a vivid and interactive one, based on crisp SVG images.<\/p>\n

\"One-Design-Company<\/a><\/p>\n

LIX – The smallest 3D printing pen in the world<\/a><\/h2>\n

LIX is the smallest and smarter 3D printing pen on the market. With the help of a suggestive animation placed on the site\u2019s homepage, you can experience how interesting 3D printing is.<\/p>\n

\"LIX---The-smallest-3D-printing-pen-in-the-world\"<\/a><\/p>\n

MIDORI AOYAMA<\/a><\/h2>\n

Midori Aoyama is a Tokyo-based DJ and producer. He has launched his own party \u201cEUREKA!\u201d that is still one of the best house music parties in Japan. His site is also innovative, an interesting example of SVG and how you can benefit from it as a user.<\/p>\n

\"MIDORI-AOYAMA\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

SVG’s or scalable vector graphics can be used in an array of animations and interactive designs. The great feature of SVG filters\u00a0is that they allow you to manipulate … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":37612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\n20+ Impressive SVG Effects and Tutorials<\/title>\n<meta name=\"description\" content=\"Here are 40 impressive SVG effects and tutorials that will guide you in creating awesome designs of your own.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20+ Impressive SVG Effects and Tutorials\" \/>\n<meta property=\"og:description\" content=\"Here are 40 impressive SVG effects and tutorials that will guide you in creating awesome designs of your own.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-08T17:19:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-09T21:43:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"20+ Impressive SVG Effects and Tutorials\",\"datePublished\":\"2016-03-08T17:19:22+00:00\",\"dateModified\":\"2020-05-09T21:43:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\"},\"wordCount\":1564,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\",\"url\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\",\"name\":\"20+ Impressive SVG Effects and Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg\",\"datePublished\":\"2016-03-08T17:19:22+00:00\",\"dateModified\":\"2020-05-09T21:43:02+00:00\",\"description\":\"Here are 40 impressive SVG effects and tutorials that will guide you in creating awesome designs of your own.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg\",\"width\":1000,\"height\":350,\"caption\":\"svg-effects-and-tutorials\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"20+ Impressive SVG Effects and Tutorials\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20+ Impressive SVG Effects and Tutorials","description":"Here are 40 impressive SVG effects and tutorials that will guide you in creating awesome designs of your own.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/","og_locale":"en_US","og_type":"article","og_title":"20+ Impressive SVG Effects and Tutorials","og_description":"Here are 40 impressive SVG effects and tutorials that will guide you in creating awesome designs of your own.","og_url":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2016-03-08T17:19:22+00:00","article_modified_time":"2020-05-09T21:43:02+00:00","og_image":[{"width":1000,"height":350,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg","type":"image\/jpeg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"20+ Impressive SVG Effects and Tutorials","datePublished":"2016-03-08T17:19:22+00:00","dateModified":"2020-05-09T21:43:02+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/"},"wordCount":1564,"commentCount":0,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/","url":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/","name":"20+ Impressive SVG Effects and Tutorials","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg","datePublished":"2016-03-08T17:19:22+00:00","dateModified":"2020-05-09T21:43:02+00:00","description":"Here are 40 impressive SVG effects and tutorials that will guide you in creating awesome designs of your own.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2016\/02\/svg-effects-and-tutorials.jpg","width":1000,"height":350,"caption":"svg-effects-and-tutorials"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/svg-effects-and-tutorials\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"20+ Impressive SVG Effects and Tutorials"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/37355"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=37355"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/37355\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/37612"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=37355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=37355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=37355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}