{"id":537,"date":"2018-07-30T10:20:59","date_gmt":"2018-07-30T17:20:59","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=3197"},"modified":"2018-07-30T10:20:59","modified_gmt":"2018-07-30T17:20:59","slug":"quick-line-in-html-and-javascript","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=537","title":{"rendered":"Quick line in HTML and JavaScript"},"content":{"rendered":"<p>Usually if you want to draw lines in HTML you use canvas or SVG. Awhile back I wondered how I might do it without those. This is really just a proof of concept speed coded answer to that question:<\/p>\n<p><iframe height='443' scrolling='no' title='Quick Line' src='\/\/codepen.io\/ZevanRosser\/embed\/baa251b40be2a1579743614a7f8382a0\/?height=443&#038;theme-id=5318&#038;default-tab=result&#038;embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https:\/\/codepen.io\/ZevanRosser\/pen\/baa251b40be2a1579743614a7f8382a0\/'>Quick Line<\/a> by Zevan Rosser (<a href='https:\/\/codepen.io\/ZevanRosser'>@ZevanRosser<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>This works by using a div with a border, rotating it and scaling it as needed so it fits between two arbitrary points. <\/p>\n<p>This could be abstracted a bit more, but it works pretty well. I usually choose `setInterval` over `requestAnimationFrame` when prototyping &#8211; because I like to easily be able to change the speed of<br \/>\n framebased things like this. If I were to try and make this code more dynamic, I would probably switch out to `requestAnimationFrame`.<\/p>\n<p>If you try and connect two lines together &#8211; you&#8217;ll notice some inaccuracy &#8211; a good argument for using SVG or canvas over something like this. That said, if you are connecting two elements using a single line, this inaccuracy would become irrelevant. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Usually if you want to draw lines in HTML you use canvas or SVG. Awhile back I wondered how I might do it without those. This is really just a proof of concept speed coded answer to that question: See the Pen Quick Line by Zevan Rosser (@ZevanRosser) on CodePen. This works by using a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,161,160,121,94,13],"tags":[176,134,177],"class_list":["post-537","post","type-post","status-publish","format-standard","hentry","category-graphics","category-html5","category-javascript","category-math","category-misc","category-motion","tag-html","tag-javascript","tag-lines"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=537"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/537\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}