Search the Community
Showing results for tags 'draw'.
Found 11 results
-
Hi there, I would like to have the same effect as on this tutorial: https://codepen.io/PointC/pen/c07761a17f94434f1229e11e798f1a3d Everything is going well, except the drawing of the dashed line. I think I took all the necessary information, and even when I'm copying the code from codepen, the dashed line will not show up. If is remove the part 'mask="url(#theMask)"', the dashed path is showing up. Can somebody please help me? Thanks in advance! Below the result of my code:
-
Hello, Im trying to create click points on image/svg, that will animate line and point to another element point. As on image example if line is on building 1 and some one click building 2 or 3, line will go to clicked building. Best wil be if it could move just ending point from one to another position, transforming whole line That's my pen https://codepen.io/isuke01/pen/yLyyeyb but nothing exacting so far, I just create clicking area with callback, but I have no idea how to make this to work as it should. Thanks for any help
-
Small issue with my circle here, it works the first time on hover (in & out) and then changes direction. Any ideas why it breaks after the first hover? It should look like this. Many thanks, Smallio
-
When i click on inspect, it does show that something is happening, but no visual changes can be seen... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chameleon-Dev</title> <link rel="stylesheet" href="css/index.min.css"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 355.16 372.37"> <defs> <style> .a { fill: url("#a"); } .b { fill: url("#b"); } .c { fill: url("#c"); } .d { fill: url("#d"); } .e { fill: url("#e"); } .f { fill: #00a086; } .g { fill: #0088bd; } </style> <linearGradient id="a" x1="627.86" y1="131.81" x2="801.37" y2="131.81" gradientUnits="userSpaceOnUse"><stop offset="0.11" stop-color="#00a3b8"/><stop offset="0.18" stop-color="#00a2a7"/><stop offset="0.28" stop-color="#00a195"/><stop offset="0.39" stop-color="#00a08a"/> <stop offset="0.51" stop-color="#00a086"/><stop offset="0.62" stop-color="#009e8b"/><stop offset="0.74" stop-color="#00979a"/><stop offset="0.88" stop-color="#008cb3"/><stop offset="0.93" stop-color="#0088bd"/></linearGradient> <linearGradient id="b" x1="639.38" y1="287.63" x2="768.84" y2="287.63" gradientUnits="userSpaceOnUse"><stop offset="0.33" stop-color="#00a086"/><stop offset="0.56" stop-color="#009f88"/><stop offset="0.69" stop-color="#009b91"/><stop offset="0.79" stop-color="#00959f"/><stop offset="0.89" stop-color="#008cb3"/><stop offset="0.93" stop-color="#0088bd"/></linearGradient> <linearGradient id="c" x1="639.38" y1="214.26" x2="795.23" y2="214.26" gradientUnits="userSpaceOnUse"><stop offset="0.21" stop-color="#0088bd"/><stop offset="0.32" stop-color="#008ab8"/><stop offset="0.46" stop-color="#0091a9"/><stop offset="0.62" stop-color="#009c90"/><stop offset="0.67" stop-color="#00a086"/></linearGradient> <linearGradient id="d" x1="635.64" y1="118.94" x2="635.64" y2="57.75" gradientUnits="userSpaceOnUse"><stop offset="0.31" stop-color="#00a086"/><stop offset="0.43" stop-color="#009a93"/><stop offset="0.75" stop-color="#008db2"/><stop offset="0.93" stop-color="#0088bd"/></linearGradient><linearGradient id="e" x1="707.47" y1="321.99" x2="707.47" y2="248.47" xlink:href="#d"/></defs> <title>lgo</title><path class="a" d="M790.12,172.61c-5.83-10.24-19.82-37.18-20.83-39.14-1.21-2.55-13.67-27.18-43-30C721.8,95.2,716.79,90,709.08,82c-2.94-3-6.26-6.49-10.17-10.73-3.61-3.93-15-12-27.06-18.07-16.9-8.56-29.39-10.49-37.13-5.73l-.92.57-.69.84c-2,2.37-4.22,6.36-5.25,15.05,4.31-6.92,11.62-6.51,15-5.86,3.18-.62,10.43.31,23.09,6.73,11.45,5.8,21.3,13,23.36,15.27,4,4.36,7.39,7.86,10.38,11,8.34,8.65,12.53,13,16.53,21.42l1.71,3.6,4,.11c24.93.71,35.19,22,35.61,22.88l.14.28c.64,1.23,15.66,30.2,21.55,40.42l.4.69.55.57c4.74,4.94,7.07,8.32,7.87,11.49,4.63,8,8.47,17.94,6.78,26.16l.55-.75.32-1.1c.77-2.64,1.6-5,2.41-7.27C802.65,196.71,804.39,187.75,790.12,172.61Z" transform="translate(-537.62 -44.94)"/><path class="b" d="M676.59,218.91l-1.55-.3-1.52.44c-10.66,3.13-21.64,16.9-24.79,23.73a100.38,100.38,0,0,0-9.17,47.54c1.19,18.72,8.37,35.07,20.74,47.31,14,13.81,29.52,19,44,19a65.27,65.27,0,0,0,31.62-8.4c24.25-13.6,37.24-39.88,31.59-63.9-6.44-27.38-30.71-39.76-50.74-39.76h-.48A45.2,45.2,0,0,0,696.85,249c17.57-2.61,34,5.22,43.65,16.41a37.25,37.25,0,0,1,14.37,21.95c4.33,18.41-6.07,38.8-25.29,49.59-20.57,11.54-43.05,8.35-60.14-8.54-21.78-21.52-20.17-55.77-8.91-80.16,2.2-4.77,9.88-13.65,15.38-16.22l.35.07a41.47,41.47,0,0,1,18.7-9.89C690.25,221.52,684.57,220.45,676.59,218.91Z" transform="translate(-537.62 -44.94)"/><path class="c" d="M788,192.51c1,3.79-.27,7.26-2.19,12.71-.7,2-1.49,4.2-2.24,6.66-4.92,5-20.62,6.23-35.83,7.4-6.82.52-13.87,1.06-21.11,1.95-15.51,1.89-21.22,2.44-31.71,1a41.47,41.47,0,0,0-18.7,9.89c24.91,4.79,28.9,4.86,52,2,6.95-.85,13.85-1.38,20.53-1.89,21.4-1.64,38.29-2.94,45.93-13.39l.13-.17C796.51,210.45,792.67,200.49,788,192.51Z" transform="translate(-537.62 -44.94)"/><path class="d" d="M643.85,111.2h0c-3.7-20.56-5.14-45.75-1.37-53l.4-.09c-3.41-.65-10.71-1.06-15,5.86a124.41,124.41,0,0,0,0,23.48c.93,12.45,2.8,23.54,3.18,25.71a6.51,6.51,0,0,0,13-.7A6.72,6.72,0,0,0,643.85,111.2Z" transform="translate(-537.62 -44.94)"/><path class="e" d="M732.87,285.62a6.5,6.5,0,0,0-6.48,6h0c-.27,7.64-3.48,13.08-9.27,15.74-6.71,3.07-15.72,1.74-21.92-3.24-6.68-5.36-9.15-14-6.95-24.24,3-13.8,13.5-22.13,28.21-22.28h.36a40.78,40.78,0,0,1,23.7,7.79c-9.64-11.19-26.08-19-43.65-16.41-10.86,5.3-18.54,15.15-21.33,28.18-3.24,15.11,1,28.63,11.52,37.1,10,8.06,24.3,10,35.47,4.91,10-4.57,16.05-14,16.79-26.07a6.46,6.46,0,0,0-6.43-7.47Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M555.54,390a9.94,9.94,0,0,1,3.4,1.49,2.6,2.6,0,0,1,1.28,2,1.6,1.6,0,0,1-.39,1,1.22,1.22,0,0,1-1,.47,1.62,1.62,0,0,1-.86-.21,4.25,4.25,0,0,1-.76-.63,5.22,5.22,0,0,0-1.31-1,8.75,8.75,0,0,0-2.07-.6,15.24,15.24,0,0,0-2.75-.24,9.84,9.84,0,0,0-5.26,1.47,10.39,10.39,0,0,0-3.74,4,11.46,11.46,0,0,0-1.36,5.55,12,12,0,0,0,1.31,5.65,9.8,9.8,0,0,0,8.95,5.39,11.59,11.59,0,0,0,3-.31,11.38,11.38,0,0,0,2.22-.89,11.22,11.22,0,0,0,1.26-.94,5,5,0,0,1,.73-.55,1.33,1.33,0,0,1,.68-.18,1.29,1.29,0,0,1,1,.39,1.44,1.44,0,0,1,.37,1,2.72,2.72,0,0,1-1.26,1.91,11,11,0,0,1-3.45,1.75,15.33,15.33,0,0,1-4.87.73,12.88,12.88,0,0,1-6.8-1.81,12.33,12.33,0,0,1-4.63-5,15.4,15.4,0,0,1-1.65-7.17,14.71,14.71,0,0,1,1.67-7A12.86,12.86,0,0,1,551,389.42,18.19,18.19,0,0,1,555.54,390Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M585.51,392.79a12,12,0,0,1,2.3,7.62v14.81a1.57,1.57,0,1,1-3.14,0V400.41a8.84,8.84,0,0,0-1.62-5.52,6,6,0,0,0-5.08-2.12,9,9,0,0,0-7.33,3.85,6.57,6.57,0,0,0-1.2,3.79v14.81a1.57,1.57,0,1,1-3.14,0V379.63a1.57,1.57,0,1,1,3.14,0V395a11,11,0,0,1,3.92-3.69,10.21,10.21,0,0,1,5.13-1.44Q583.2,389.84,585.51,392.79Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M618.87,390.52a1.62,1.62,0,0,1,.45,1.15v23.55a1.57,1.57,0,1,1-3.14,0v-3.51a11,11,0,0,1-3.93,4,10.62,10.62,0,0,1-5.7,1.62,11.26,11.26,0,0,1-6.31-1.83,12.57,12.57,0,0,1-4.4-5,15.79,15.79,0,0,1-1.6-7.17,15.45,15.45,0,0,1,1.62-7.14,12.43,12.43,0,0,1,4.42-4.95,11.69,11.69,0,0,1,12-.26,10,10,0,0,1,3.93,4v-3.25a1.61,1.61,0,0,1,.45-1.15,1.58,1.58,0,0,1,2.25,0Zm-7.12,22.43a9.75,9.75,0,0,0,3.4-4,12.86,12.86,0,0,0,1.23-5.68,12.46,12.46,0,0,0-1.23-5.55,9.79,9.79,0,0,0-3.4-4,8.66,8.66,0,0,0-4.89-1.44,8.78,8.78,0,0,0-4.89,1.41,9.63,9.63,0,0,0-3.4,3.9,12.51,12.51,0,0,0-1.23,5.63,13.07,13.07,0,0,0,1.2,5.68,9.56,9.56,0,0,0,3.38,4,9.13,9.13,0,0,0,9.84,0Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M664.82,392.74a12.28,12.28,0,0,1,2.22,7.67v14.81a1.57,1.57,0,1,1-3.14,0V400.57a9.05,9.05,0,0,0-1.65-5.63,6,6,0,0,0-5.1-2.17,8.72,8.72,0,0,0-4.16,1,8.61,8.61,0,0,0-3.17,2.85,6.89,6.89,0,0,0-1.2,3.9v14.65a1.57,1.57,0,1,1-3.14,0V400.41a9,9,0,0,0-1.57-5.52,5.72,5.72,0,0,0-4.92-2.12,8.32,8.32,0,0,0-4.06,1,8.68,8.68,0,0,0-3.09,2.8,6.67,6.67,0,0,0-1.18,3.79v14.81a1.57,1.57,0,1,1-3.14,0V391.77a1.57,1.57,0,1,1,3.14,0v3a11.37,11.37,0,0,1,3.82-3.56,9.88,9.88,0,0,1,5.08-1.41,9.22,9.22,0,0,1,5.23,1.47,8,8,0,0,1,3.14,4.29,9.69,9.69,0,0,1,4-4,11.54,11.54,0,0,1,5.91-1.73Q662.6,389.84,664.82,392.74Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M697.4,402.95a1.55,1.55,0,0,1-1.1.44H676.52A12.09,12.09,0,0,0,677.8,409a9.68,9.68,0,0,0,3.66,3.93,10.66,10.66,0,0,0,5.63,1.44,9.51,9.51,0,0,0,4.5-1,9.27,9.27,0,0,0,3.19-2.67,1.77,1.77,0,0,1,1.1-.47,1.43,1.43,0,0,1,1.36,1.36,1.55,1.55,0,0,1-.52,1.1,13.17,13.17,0,0,1-4.21,3.35,11.55,11.55,0,0,1-5.36,1.31,14.33,14.33,0,0,1-7.12-1.73,12.24,12.24,0,0,1-4.82-4.84,14.59,14.59,0,0,1-1.73-7.2,15.85,15.85,0,0,1,1.7-7.51,12.27,12.27,0,0,1,4.53-4.92,11.49,11.49,0,0,1,6-1.7,12.33,12.33,0,0,1,5.89,1.47,11.59,11.59,0,0,1,4.47,4.29,13,13,0,0,1,1.78,6.7A1.42,1.42,0,0,1,697.4,402.95Zm-17.3-8.4a9.7,9.7,0,0,0-3.32,6h17.85v-.42a8.28,8.28,0,0,0-1.57-4.11,8.53,8.53,0,0,0-3.27-2.67,9.5,9.5,0,0,0-4.06-.92A8.77,8.77,0,0,0,680.11,394.55Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M707.37,416.35a1.57,1.57,0,0,1-2.7-1.13V379.63a1.57,1.57,0,1,1,3.14,0v35.59A1.53,1.53,0,0,1,707.37,416.35Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M738,402.95a1.55,1.55,0,0,1-1.1.44H717.13a12.08,12.08,0,0,0,1.28,5.63,9.68,9.68,0,0,0,3.66,3.93,10.66,10.66,0,0,0,5.63,1.44,9.51,9.51,0,0,0,4.5-1,9.27,9.27,0,0,0,3.19-2.67,1.77,1.77,0,0,1,1.1-.47,1.44,1.44,0,0,1,1.36,1.36,1.55,1.55,0,0,1-.52,1.1,13.18,13.18,0,0,1-4.21,3.35,11.56,11.56,0,0,1-5.37,1.31,14.33,14.33,0,0,1-7.12-1.73,12.24,12.24,0,0,1-4.81-4.84,14.59,14.59,0,0,1-1.73-7.2,15.84,15.84,0,0,1,1.7-7.51,12.26,12.26,0,0,1,4.53-4.92,11.48,11.48,0,0,1,6-1.7,12.33,12.33,0,0,1,5.89,1.47,11.59,11.59,0,0,1,4.48,4.29,13,13,0,0,1,1.78,6.7A1.42,1.42,0,0,1,738,402.95Zm-17.3-8.4a9.7,9.7,0,0,0-3.32,6h17.85v-.42a8.26,8.26,0,0,0-1.57-4.11,8.53,8.53,0,0,0-3.27-2.67,9.5,9.5,0,0,0-4.06-.92A8.77,8.77,0,0,0,720.72,394.55Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M768,410.51a12.76,12.76,0,0,1-4.76,5,13.53,13.53,0,0,1-13.5,0,12.75,12.75,0,0,1-4.76-5,15.53,15.53,0,0,1,0-14.24,13,13,0,0,1,4.76-5,13.36,13.36,0,0,1,13.5,0,13,13,0,0,1,4.76,5,15.54,15.54,0,0,1,0,14.24Zm-2.72-12.77a10,10,0,0,0-3.64-4,9.61,9.61,0,0,0-5.16-1.44,9.48,9.48,0,0,0-5.13,1.44,10.2,10.2,0,0,0-3.64,4,12.52,12.52,0,0,0,0,11.25,10.19,10.19,0,0,0,3.64,4,9.47,9.47,0,0,0,5.13,1.44,9.75,9.75,0,0,0,8.79-5.34,12.86,12.86,0,0,0,0-11.31Z" transform="translate(-537.62 -44.94)"/><path class="f" d="M795.88,392.27a11.77,11.77,0,0,1,2.28,7.56v15.39a1.48,1.48,0,0,1-.47,1.13,1.55,1.55,0,0,1-1.1.44,1.52,1.52,0,0,1-1.57-1.57V400a8.55,8.55,0,0,0-1.7-5.52,6.34,6.34,0,0,0-5.26-2.12,9.39,9.39,0,0,0-7.54,3.85,6.38,6.38,0,0,0-1.26,3.79v15.23a1.57,1.57,0,1,1-3.14,0V391.77a1.57,1.57,0,1,1,3.14,0v2.88a11.11,11.11,0,0,1,4.06-3.74,10.9,10.9,0,0,1,5.42-1.49Q793.6,389.42,795.88,392.27Z" transform="translate(-537.62 -44.94)"/><path class="g" d="M830.55,379a3.12,3.12,0,0,1,.89,2.3V413.6a3.14,3.14,0,0,1-.89,2.28,3,3,0,0,1-2.25.92,3,3,0,0,1-2.22-.89,3.28,3.28,0,0,1-.92-2.25,11.35,11.35,0,0,1-8.22,3.66,12,12,0,0,1-6.54-1.86,13,13,0,0,1-4.63-5.16,16.09,16.09,0,0,1-1.7-7.48,16.45,16.45,0,0,1,1.67-7.51,12.87,12.87,0,0,1,4.58-5.18,11.66,11.66,0,0,1,6.41-1.86,12.14,12.14,0,0,1,4.71.92,12.37,12.37,0,0,1,3.72,2.33V381.25A3.14,3.14,0,0,1,826,379a3,3,0,0,1,2.25-.92A3.05,3.05,0,0,1,830.55,379Zm-7.27,30.12a9.23,9.23,0,0,0,2.15-6.25,9.34,9.34,0,0,0-2.15-6.28,7.32,7.32,0,0,0-11,0,10.28,10.28,0,0,0,0,12.54,6.91,6.91,0,0,0,5.52,2.49A7,7,0,0,0,823.28,409.07Z" transform="translate(-537.62 -44.94)"/><path class="g" d="M862.37,404.18a3.33,3.33,0,0,1-2.2.78H842.9a7.89,7.89,0,0,0,2.88,4.84,8,8,0,0,0,5.08,1.75,11.25,11.25,0,0,0,3.35-.39,8.7,8.7,0,0,0,1.91-.84l1-.6a4,4,0,0,1,1.78-.47,2.57,2.57,0,0,1,1.88.79,2.51,2.51,0,0,1,.79,1.83,3.27,3.27,0,0,1-1.46,2.56,12.5,12.5,0,0,1-3.93,2,16.23,16.23,0,0,1-12.64-1,12.79,12.79,0,0,1-5.05-5.05,14.73,14.73,0,0,1-1.78-7.25,16.05,16.05,0,0,1,1.88-7.9,13.38,13.38,0,0,1,5-5.21,12.85,12.85,0,0,1,6.59-1.81,12.22,12.22,0,0,1,6.52,1.88,14.09,14.09,0,0,1,4.89,5.08,13.65,13.65,0,0,1,1.83,6.91A2.69,2.69,0,0,1,862.37,404.18ZM843,399.73h13.71v-.37a5.41,5.41,0,0,0-2.15-3.77,6.79,6.79,0,0,0-4.4-1.57Q844.05,394,843,399.73Z" transform="translate(-537.62 -44.94)"/><path class="g" d="M891.94,389.65a2.69,2.69,0,0,1,.84,2,4.05,4.05,0,0,1-.42,1.57l-9.79,21.56a3.24,3.24,0,0,1-1.07,1.41,2.9,2.9,0,0,1-1.6.58l-.47.05a2.75,2.75,0,0,1-1.65-.55,3.61,3.61,0,0,1-1.18-1.49l-9.73-21.56a4.13,4.13,0,0,1-.37-1.67,2.61,2.61,0,0,1,.89-1.91,3,3,0,0,1,2.2-.86,3.39,3.39,0,0,1,1.83.52,3.24,3.24,0,0,1,1.26,1.47l7.22,16.54,7.17-16.49a3.45,3.45,0,0,1,1.15-1.52,2.47,2.47,0,0,1,1.62-.47A2.89,2.89,0,0,1,891.94,389.65Z" transform="translate(-537.62 -44.94)"/></svg> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/uncompressed/plugins/AttrPlugin.js"></script> <script type="text/javascript" src="js/uncompressed/jquery.gsap.js"></script> <script type="text/javascript" src="js/uncompressed/TimelineMax.js"></script> <script type="text/javascript" src="js/uncompressed/plugins/DrawSVGPlugin.js"></script> <script type="text/javascript" src="js/uncompressed/TweenMax.js"></script> <script type="text/javascript" src="js/animations.js"></script> </body> </html> This is my Tween TweenMax.from(".a", 2, { drawSVG:0,});
-
Hello! I am trying to make an animated SVG of a complex map. I have over 120 elements in my animation. Most of these are paths but some of them are also polygons (circular). Here's a CodePen: http://codepen.io/i76/pen/vgwKKX I am a JavaScript novice. I searched this forum and found a script (in Carl's post) which allows me to draw a path- var orig1 = document.querySelector('#lineAB'); var obj1 = {length:0, pathLength:orig1.getTotalLength()}; orig1.style.stroke = '#f60'; var t1 = TweenMax.to(obj1, 10, {length:obj1.pathLength, onUpdate:drawLine1, ease:Linear.easeNone}) function drawLine1() { orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' '); } However, this does not work with polygons. My guess is that there is not built-in polygon.Length object in JS. I have found this function on another forum that would measure the length of a polygon but I am not sure how to implement it- getPolygonLength:function(el){ var points = el.attr('points'); points = points.split(" "); var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; for(var i = 0; i < points.length; i++){ var coords = points[i].split(","); if(x1 == null && y1 == null){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x1 = coords[0]; y1 = coords[1]; x3 = coords[0]; y3 = coords[1]; }else{ if(coords[0] != "" && coords[1] != ""){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x2 = coords[0]; y2 = coords[1]; lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); x1 = x2; y1 = y2; if(i == points.length-2){ lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); } } } } return lineLength; } If it doesn't take very long would anyone be able to include the above function into the snippet above so I have a way of animating the polygons as well? Many thanks in advance!
-
Quick question. I was wondering if is possible to create an highlight effect in top of 2 draw canvas images. I'm creating a beaker with a back and front image. I would like create a highlight effect. Any codePen or tutorial about it? or this is not possible with GSAP?
-
I have simple question. When I going to use the Draw SVG Plugin does it work like, that I have a svg illustration and I drag it into the plugin and the plugin will create the path code and animation as well? The plugin automatically convert the svg into js path codes? So I don't need to write the illustration lines in js? I'm quite beginner so hope it's clear what is my question! Thanks in advance for all advice
-
DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Watch the video The video below illustrates the many ways DrawSVGPlugin can be used and will get you up and running fast. Note that it uses GSAP 2 formatting. Demo Click through the demo below to see the various ways you can provide values to DrawSVGPlugin. See the Pen DrawSVGPlugin Values: carl click next by GreenSock (@GreenSock) on CodePen. More details For more detailed usage notes please consult the DrawSVGPlugin API documentation. The docs are loaded with tons of info that will help you get the most out of DrawSVGPlugin. Get your hands on DrawSVGPlugin DrawSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. To learn how to include DrawSVGPlugin into your project, see the GSAP install docs. Try DrawSVGPlugin for free on CodePen! There's a special [fully-functional] version of DrawSVGPlugin that we link to in our DrawSVGPlugin CodePens, so feel free to fork any of them, add your own SVG graphics, and take DrawSVGPlugin for a spin. CodePen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins. Demos DrawSVG Showcase DrawSVG How-To Demos- 6 comments
-
- 4
-
-
-
- line drawing
- drawsvg
- (and 4 more)
-
Hi, I urgently need a way to draw say dots along an entire path of a TimelineMax. The path does not need to animate. It just needs to be drawn initially. Can anyone point me in the right direction? ANy help appreciated. Sample timeline: //create timeline self.llnTimeline = new TimelineMax({ delay: 1, smoothChildTiming: true, timeResolution: 0, onUpdate: function() { } }); self.llnTimeline.seek(0); self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { left: 359, top: 998, ease: Linear.easeNone }), 0); // 1 self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { ease: Linear.easeNone, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 338, top: 1099 }, { left: 257, top: 1114 }, { left: 47, top: 945 }, ] } } }), 12); // 2 self.llnTimeline.add(TweenMax.to(self.llnPlane, 22, { ease: Linear.easeIn, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 27, top: 836 }, { left: 304, top: -573 }, { left: 379, top: -1045 }, ] } } }), 20); -
Hi everybody, for a personal project I would like to build an oblique progress bar. So, my first question is: Is there a way to create dynamically and easily a Line object with Tweenmax.js? For the moment I just resize the width of a rectangle shape like this : http://jsfiddle.net/FracArt/6GJ67/2/ Which actually works! But seems a bit "hacky". Second question, as you can notice on the jsfiddle file I tried to build an oblique progress bar on the same principle. However, when I rotate the rectangle a gap appears between the initial and final position of the bar. So do you have an idea of how I can correct that without doing some geometry calculations? (maybe a transform-origin property on the css?)
-
I cant seem to get accsess to the BezierPlugin, I get a undefined error. My aim is to draw the line my object moves along using bezierThrough, do you know of any simple tutorials/examples of this? I found a few but they are quite confusing.
