{"id":236664,"date":"2016-01-12T12:56:24","date_gmt":"2016-01-12T19:56:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=236664"},"modified":"2016-01-12T12:56:24","modified_gmt":"2016-01-12T19:56:24","slug":"stroke-dashoffset","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/","title":{"rendered":"stroke-dashoffset"},"content":{"rendered":"<p>The <code>stroke-dashoffset<\/code> property in CSS defines the location along an SVG path where the dash of a <code>stroke<\/code> will begin. The higher the number, the further along the path the dashes will begin.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  stroke-dashoffset: 100;\r\n}<\/code><\/pre>\n<p>Remember:<\/p>\n<ul>\n<li>This <strong>will<\/strong> override a presentation attribute <code>&lt;path stroke-dashoffset=\"100\" ... \/&gt;<\/code><\/li>\n<li>This <strong>will not<\/strong> override an inline style e.g. <code>&lt;path style=\"stroke-dashoffset: 100;\" ... \/&gt;<\/code><\/li>\n<\/ul>\n<h3>Values<\/h3>\n<p>The <code>stroke-dashoffset<\/code> property can accept a percentage or a numeric value.<\/p>\n<ul>\n<li><code>stroke-dashoffset: 100<\/code><\/li>\n<li><code>stroke-dashoffset: 25%<\/code><\/li>\n<\/ul>\n<p>Note that units (i.e. <code>em<\/code> and <code>px<\/code>) are not required. A number without units is rendered in pixel units. Percentage is relative to the percent of the current viewport.<\/p>\n<p data-height=\"200\" style=\"height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"QygqBM\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/QygqBM\/\" rel=\"noopener\">stroke-dashoffset property<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Getting Tricky with <code>stroke-dashoffset<\/code><\/h3>\n<p>Have you ever seen those cool demos where an SVG shape appears to draw itself? That&#8217;s a trick that animates the <code>stroke-dashoffset<\/code> of an element in conjunction with the <code>stroke-dasharray<\/code> property.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.path {\r\n  stroke-dasharray: 1000;\r\n  stroke-dashoffset: 1000;\r\n  animation: dash 5s linear forwards;\r\n}\r\n\r\n@keyframes dash {\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}<\/code><\/pre>\n<p data-height=\"352\" style=\"height: 352px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"bGyoz\" data-default-tab=\"result\" data-user=\"chriscoyier\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/bGyoz\/\" rel=\"noopener\">Basic Example of SVG Line Drawing, Backward and Forward<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>We cover this technique in much more detail <a href=\"https:\/\/css-tricks.com\/svg-line-animation-works\/\">in this post<\/a>.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/\"><code>stroke<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/\"><code>stroke-dasharray<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/\"><code>stroke-linecap<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/\"><code>stroke-width<\/code><\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/SVG11\/painting.html#StrokeDashoffsetProperty\" rel=\"noopener\">SVG 1.1 Spec<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorial\/Fills_and_Strokes\" rel=\"noopener\">MDN on fills and strokes<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Safari\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Opera\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"IE\" class=\"yep\">9+<\/td>\n<td data-browser-name=\"Android\" class=\"yep\">4.4+<\/td>\n<td data-browser-name=\"iOS\" class=\"yep\">Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The stroke-dashoffset property in CSS defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin. .module { stroke-dashoffset: 100; } Remember: This will override a presentation attribute &lt;path stroke-dashoffset=&#8221;100&#8243; &#8230; \/&gt; This will not override an inline [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":236645,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/","url_meta":{"origin":236664,"position":0},"title":"stroke-dasharray","date":"January 18, 2016","format":false,"excerpt":"The stroke-dasharray property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating dashes and the gaps between them. path { stroke-dasharray: 5; \/* dashes and gaps are both 5 units long *\/ } It's a\u2026","rel":"","context":"In \"stroke\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236642,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/","url_meta":{"origin":236664,"position":1},"title":"stroke-linecap","date":"January 12, 2016","format":false,"excerpt":"The stroke-linecap property in CSS is for setting the starting and ending points of a border on SVG shapes. .module { stroke-linecap: round; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke-linecap property can accept the following values: butt (default):\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236637,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/","url_meta":{"origin":236664,"position":2},"title":"stroke-width","date":"January 12, 2016","format":false,"excerpt":"The stroke-width property in CSS is for setting the width of a border on SVG shapes. .module { stroke-width: 2; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke-width property can accept any number, including whole numbers, decimals, and percentages:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":236664,"position":3},"title":"stroke","date":"January 12, 2016","format":false,"excerpt":"The stroke property in CSS is for adding a border to SVG shapes. .module { stroke: black; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke property can accept any CSS color value. Named colors \u2014 orange Hex colors \u2014\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288473,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linejoin\/","url_meta":{"origin":236664,"position":4},"title":"stroke-linejoin","date":"May 29, 2019","format":false,"excerpt":"stroke-linejoin is a CSS property that defines how SVG paths should appear at the point where two lines are joined together. stroke-linejoin can be used to sharpen or soften the joints on connecting lines in an SVG. stroke-linejoin is also an SVG attribute which can be overwritten using CSS. stroke-linejoin:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14117,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","url_meta":{"origin":236664,"position":5},"title":"text-stroke","date":"September 6, 2011","format":false,"excerpt":"text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification. As of June 2013, it is only implemented behind a -webkit vendor prefix, though future versions of\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236664"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=236664"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236664\/revisions"}],"predecessor-version":[{"id":236693,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236664\/revisions\/236693"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=236664"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=236664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}