Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="pony-svg" viewBox="0 0 379 255"><g id="pony-wrapper"><g id="pony">
    <g id="pony_body" fill="#a56a43">
        <ellipse cx="170" cy="123" rx="77.5" ry="52.5"></ellipse>
        <ellipse cx="216" cy="119" rx="59" ry="53"></ellipse>
        <ellipse cx="198" cy="123" rx="69.5" ry="52.5"></ellipse>
    </g>
    <path id="pony_tail" d="m329 204a20.2 20.2 0 0 1-7.58-4.31 58.8 58.8 0 0 1-9.87-11.4c-7.7-11.1-15.8-27.8-24.2-49.6q-1.29-3.36-2.59-6.88-3.85-10.4-6.59-18.2c-3.95-6.66-7.02-12-9.16-15.9-1.05-1.93-1.89-3.55-2.52-4.84q-0.381-0.408-0.686-0.755a10.5 10.5 0 0 1-1.06-1.37c-0.018-0.029-0.04-0.065-0.063-0.106q-1.27-1-2.09-1.73a11.4 11.4 0 0 1-1.34-1.35 1.88 1.88 0 0 1-0.335-2.3 1.84 1.84 0 0 1 2.05-0.759 8.38 8.38 0 0 1 1.41 0.405c0.966 0.349 2.26 0.911 3.96 1.72q0.772 0.367 1.65 0.8a5.57 5.57 0 0 1 1.16 0.233 26.9 26.9 0 0 1 2.89 1.1c1.97 0.852 4.65 2.14 7.96 3.82 5.37 2.73 10.7 5.65 11.2 5.92a168 168 0 0 0 19.2 7.62 71.1 71.1 0 0 0 15 3.36c4.84 0.415 8.25-0.247 10.1-1.97 2.44-2.22 2.49-6.55 0.14-12.9l2.81-1.05a24.6 24.6 0 0 1 1.89 9.76 9 9 0 0 1-2.82 6.36 11.1 11.1 0 0 1-5.5 2.52 25.9 25.9 0 0 1-6.94 0.213 70.3 70.3 0 0 1-14-2.97c3.21 1.38 6.67 2.8 10.2 4.14a137 137 0 0 0 17 5.4l2.44 0.2q-0.013 0.16-0.028 0.32 0.9 0.177 1.75 0.319a34.5 34.5 0 0 0 7.25 0.549 26.4 26.4 0 0 0-2.45-8.38l0.914-0.405a27.5 27.5 0 0 1 2.54 8.71h0.045a9.38 9.38 0 0 0 4.21-1.32q-0.209-0.62-0.441-1.26l0.939-0.341q0.168 0.463 0.324 0.916c1.06-1.12 1.49-2.74 1.3-4.93-0.236-2.72-1.43-6.21-3.55-10.4l0.891-0.452 1.78-0.904c2.3 4.53 3.6 8.4 3.87 11.5 0.273 3.16-0.491 5.65-2.27 7.42a7.8 7.8 0 0 1-1.05 0.872 26.9 26.9 0 0 1 1.1 6.92q0 0.29-0.01 0.569c-0.1 2.86-1.04 4.99-2.77 6.33a10 10 0 0 1-6.4 1.71 33.5 33.5 0 0 1-8.71-1.56q-0.345-0.1-0.7-0.211 5.03 2.26 9.47 3.84a71.2 71.2 0 0 0 8.99 2.6q-0.227-1.53-0.585-3.23l2.94-0.619q0.492 2.34 0.751 4.4 0.63 0.088 1.22 0.149c0.03-0.069 0.044-0.113 0.048-0.124l0.6 0.185a17.8 17.8 0 0 0 7.5-0.673c2.99-1.08 3.57-2.9 3.59-2.97-0.01 0.02-0.01 0.03-0.01 0.03l0.97 0.243 1.94 0.49a5.75 5.75 0 0 1-1.04 1.97 9.53 9.53 0 0 1-4.17 2.97 20.2 20.2 0 0 1-8.66 0.969q-0.838-0.062-1.72-0.169a21.7 21.7 0 0 1-0.253 4.64c-0.554 3.12-1.94 5.34-4.11 6.58a9.51 9.51 0 0 1-4.88 1.13 42.4 42.4 0 0 0 6.07 1.75 18.5 18.5 0 0 0 7.88 0.154 7.52 7.52 0 0 0 3.58-1.86 4.02 4.02 0 0 0 0.883-1.2l0.932 0.363c-0.041 0.107-1.06 2.65-5.08 3.66a19.2 19.2 0 0 1-8.28-0.1 44.1 44.1 0 0 1-6.73-1.97 6.99 6.99 0 0 1-3.52 3.25 10 10 0 0 1-6.62-0.119q-0.629-0.191-1.29-0.442a43.8 43.8 0 0 1-1.73 7.04q2.72 2.11 5.26 3.86c10.5 7.24 16.7 8.43 20 8.15 3.17-0.266 4.2-1.88 4.24-1.94l-0.016 0.027 2.62 1.46a5.75 5.75 0 0 1-1.51 1.64 9.52 9.52 0 0 1-4.8 1.79 20.2 20.2 0 0 1-8.62-1.31 58.7 58.7 0 0 1-13.3-7.11q-2.47-1.69-5.1-3.7-0.293 0.58-0.605 1.1a9.5 9.5 0 0 1-4.83 4.32q0.306 0.283 0.61 0.561a57.3 57.3 0 0 0 11.7 8.62l0.341 0.174a3.78 3.78 0 0 0 1.22-0.826l1.55 1.26a4 4 0 0 1-0.583 0.55 15.5 15.5 0 0 0 4.99 1.16 7.53 7.53 0 0 0 3.95-0.8 4.05 4.05 0 0 0 1.18-0.914l0.8 0.606c-0.069 0.092-1.75 2.25-5.89 2.11a17.1 17.1 0 0 1-6.05-1.5 8.86 8.86 0 0 1-4.78 0.88 19.7 19.7 0 0 1-8.05-2.72 58.2 58.2 0 0 1-11.8-9.23c-9.65-9.42-20.8-24.2-33.2-44q-1.67-2.67-3.37-5.46 0.71 1.94 1.46 3.98c9.13 24.8 18 43.5 26.2 55.5 7.23 10.5 12.6 13.9 15.8 14.8 3.04 0.883 4.57-0.235 4.65-0.3l-0.024 0.019 1.92 2.3a5.74 5.74 0 0 1-2 0.985 8.33 8.33 0 0 1-2.36 0.326 10.7 10.7 0 0 1-2.76-0.393zm13.4-17.8a8.37 8.37 0 0 0 2.26-0.1 59.7 59.7 0 0 1-11.3-8.4q-0.578-0.527-1.16-1.08c-0.077 0.014-0.153 0.027-0.231 0.039a11 11 0 0 1-7.07-1.73 23.7 23.7 0 0 1-2.28-1.5c9.75 9.9 16.1 12.5 19.8 12.8zm-10.9-12.5c1.58-0.243 2.91-1.31 4.08-3.25a15.1 15.1 0 0 0 0.76-1.44c-9.58-7.68-20.6-18.4-32.9-32.1q-2.41-2.67-4.88-5.5-2.09-2.38-4.01-4.6l0.956 1.46q2.05 3.13 4.06 6.11c11.5 17.1 22 30.3 31.1 39.3a4.81 4.81 0 0 0 0.847-0.044zm-25-24.1a117 117 0 0 0 13.5 17.5 31.5 31.5 0 0 0 6.43 5.25 11.9 11.9 0 0 0 2.58 1.14c-8.93-9.05-19.1-22-30.2-38.5q-2.01-2.98-4.06-6.12-1.28-1.95-2.48-3.79c2.15 4.13 7.68 14.5 14.3 24.5zm31 16.5a42.4 42.4 0 0 0 1.16-4.92 11.7 11.7 0 0 1-5.64-0.682 26.4 26.4 0 0 1-4.18-1.9q4.5 4.14 8.65 7.5zm11.8-5.42a5.96 5.96 0 0 0 2.95-2.68q-1.15-0.451-2.36-0.973a35 35 0 0 1-5-1.65v0.01a9.42 9.42 0 0 1-3.19 4.57c3.12 1.25 5.67 1.5 7.6 0.733zm-23-6.06a32.1 32.1 0 0 0 7.44 3.99 10.4 10.4 0 0 0 4.23 0.653q-1.36-0.743-2.83-1.67a115 115 0 0 1-16.4-13.4l-0.142-0.1c-5.72-3.92-11.9-10-18.5-18.1q-1.2-1.48-2.41-3.04-2.62-3.39-4.71-6.18-4.15-3.59-7.7-6.71 0.489 1.03 0.962 2.03c0.553 0.767 1.06 1.47 1.5 2.08q5.5 6.48 13.2 15.3 8.93 10.2 17 18.4a85.6 85.6 0 0 0 8.39 6.71zm13.2 4.3c1.59-0.616 2.76-2 3.57-4.22l0.042-0.116-0.108-0.049a86.8 86.8 0 0 1-9.32-5.06c-0.32 0.017-0.648 0.024-0.988 0.019a22.2 22.2 0 0 1-9.76-2.75c6.46 5.81 12 9.89 16.6 12.2zm15.1-4.36a6.15 6.15 0 0 0 2.81-0.724c1.38-0.792 2.25-2.26 2.65-4.5a17.3 17.3 0 0 0 0.235-3.08 16.4 16.4 0 0 1-5.15 0.385 33.6 33.6 0 0 1-0.538 7.92zm-2.46-0.16a14.1 14.1 0 0 0 1.44 0.153 32 32 0 0 0 0.554-8 40.1 40.1 0 0 1-7.83-1.76 38.7 38.7 0 0 1-0.566 7.65 28.6 28.6 0 0 0 6.4 1.96zm-8.28-2.78a39.4 39.4 0 0 0 0.433-7.5q-0.829-0.3-1.68-0.625c-10-3.86-22.7-11.2-37.8-21.7q-2.35-1.65-4.78-3.4-2.18-1.57-4.18-3.03c3.27 3.16 5.67 5.53 5.92 5.78a304 304 0 0 0 23.7 19.2q4.79 3.45 9.02 6.1a9.1 9.1 0 0 0 3.2-1.03 6.16 6.16 0 0 0 1.61-1.21l-0.01 0.011 2.32 1.9a9.62 9.62 0 0 1-3.59 2.46q3.15 1.82 5.9 3.1zm16.4-6.39q-0.011-0.242-0.026-0.491a71.2 71.2 0 0 1-9.94-2.77 152 152 0 0 1-18.8-8.28 24 24 0 0 1-10.3-2.28 140 140 0 0 0 21.6 11.1q1.43 0.554 2.79 1.01l0.624-0.021q0 0.115 0.01 0.23a40 40 0 0 0 7.8 1.8q-0.024-0.449-0.055-0.912l1-0.068q0.037 0.544 0.064 1.07a15.1 15.1 0 0 0 5.17-0.404zm-40.1-3.66a31.8 31.8 0 0 0 7.42 3.93q-1.93-1.32-3.96-2.79c-6.02-4.34-11.7-8.92-16-12.5a75.6 75.6 0 0 0 12.6 11.4zm-32.7-16.6q1.96 3.23 3.84 6.24 4.21 6.74 8.05 12.4c-6.17-10.2-10.6-19-10.6-19.1l-0.026-0.054c-0.026-0.058-2.04-4.52-4.65-10.1q-2.16-2.57-3.93-4.72 1.18 3.4 2.61 7.42 2.22 3.7 4.73 7.85zm69.2 9.44c1.6-1.24 2.4-3.28 2.39-6.1a25.2 25.2 0 0 0-0.987-6.39 13.2 13.2 0 0 1-4.79 1.35q-0.279 0.03-0.567 0.052a5.88 5.88 0 0 1-1.74 3.02 7.02 7.02 0 0 1-2.78 1.5 12.6 12.6 0 0 1-1.51 0.629 18.9 18.9 0 0 1-6.87 0.871 10.1 10.1 0 0 1-3.3 2.98c9.98 3.92 16.9 4.65 20.2 2.09zm-24.3-3.83a8.1 8.1 0 0 0 1.88-0.489 6.76 6.76 0 0 0 1.87-1.13 49.9 49.9 0 0 1-7.47-1.83 86.5 86.5 0 0 1-9.42-3.71q5.98 3.51 11.4 6.39 0.866 0.399 1.7 0.768zm-17.8-6.18a60.4 60.4 0 0 0 6.87 3.76q-5.41-3.08-11.3-6.7c1.37 0.974 2.85 1.98 4.4 2.95zm26.9 1.94a14.5 14.5 0 0 0 4.28-0.709 7.65 7.65 0 0 0 3.43-2.21l0.061-0.073a44.7 44.7 0 0 1-5.02-0.573q-0.807-0.135-1.65-0.3a21.1 21.1 0 0 1-1.09 3.87zm-3.23-0.133a16.4 16.4 0 0 0 1.39-4.37 141 141 0 0 1-17.2-5.46 307 307 0 0 1-28.1-12.5l-0.052-0.029c-0.066-0.037-6.28-3.58-13.2-7.35 3.42 2.43 7.67 5.36 12.7 8.76q2.14 1.44 4.22 2.79a178 178 0 0 0 22.7 12.8q0.614 0.258 1.23 0.512 5.77 2.37 10.5 3.82a38.8 38.8 0 0 0 5.85 1.11zm-38.7-9.51c-1.06-1.07-3.17-3.17-5.41-5.3q-0.688-0.654-1.3-1.22l-1.57-1.06q1 1.44 2.3 3.23 2.81 2.05 6 4.36zm-24.4-12.7q-0.226-0.683-0.435-1.33-0.881-1.19-1.44-2.05-0.266-0.4-0.466-0.741 1.08 1.91 2.36 4.12zm-3.37-5.96q0.359 0.648 0.746 1.34-0.117-0.224-0.2-0.415a2.87 2.87 0 0 1-0.249-0.966l-0.663-0.623zm0.6-1.13a1.69 1.69 0 0 1 0.136-0.166q-0.553-0.707-1.06-1.35-0.943-0.677-1.8-1.3l0.219 0.418q1.12 1.09 2.52 2.4zm62.1 104m13.1-15.9 0.01-0.01z" fill="#805333"></path>
    <g id="pony_head">
        <path id="pony_neck" d="m109 118-22-35.5a12.4 12.4 0 0 1-0.689-1.13 47.5 47.5 0 0 1-5.04-7.63 32.1 32.1 0 0 1-26 10l-12.4 5.25a29.7 29.7 0 0 1-11.6 6.28c-13.5 3.88-27.1-2.01-30.3-13.2-3.12-10.9 4.8-22.8 17.8-26.9l7.8-9.98a32 32 0 0 1 43.7-22.9c11.6-6.58 32.7-3.15 52.2 9.51 23.6 15.3 35.8 38.4 27.3 51.5-2.98 4.59-8.12 7.35-14.5 8.34a11.5 11.5 0 0 1-2.47 5.37c-2.85 3.39-7.55 4.76-13.1 4.3l-0.569 13.8a5.5 5.5 0 0 1-5.49 5.47 5.59 5.59 0 0 1-4.65-2.56z" fill="#a56a43"></path>
        <ellipse id="rechtes_Ohr" transform="rotate(-12)" cx="40.1" cy="27.7" rx="8.5" ry="15.5" fill="#a56a43"></ellipse>
        <g id="pony_eye" transform="translate(-.000801 -11.9)">
            <ellipse id="pony_eyeball" transform="rotate(-12)" cx="38.2" cy="67.4" rx="6" ry="5.5" fill="#fff"></ellipse>
            <path id="pony_eyeball_contour" d="m50.2 52.6c-3.22 0.682-5.37 3.65-4.73 6.65 0.642 3.01 3.82 4.84 7.04 4.16 3.22-0.682 5.37-3.65 4.73-6.65-0.642-3.01-3.82-4.85-7.04-4.16zm0.193 0.904c2.78-0.588 5.42 0.982 5.95 3.45s-1.24 4.97-4.02 5.56c-2.78 0.588-5.42-0.98-5.95-3.45s1.24-4.97 4.02-5.56z" color="#000000" fill="#1e1e1e" style="-inkscape-stroke:none"></path>
            <ellipse id="pony_pupil" transform="rotate(-12)" cx="37.2" cy="67.4" rx="4" ry="3.5"></ellipse>
            <circle id="pony_sparkle" transform="rotate(-12)" cx="38.7" cy="66.4" r="1.5" fill="#fff"></circle>
        </g>
        <ellipse id="pony_nose" transform="rotate(-40)" cx="-36" cy="62.8" rx="6.6" ry="4.34" fill="#333"></ellipse>
        <path id="pony_mouth" d="m15.8 95c-1.57 6e-5 -2.67-0.455-3.09-1.28-0.0623-0.122-0.11-0.253-0.143-0.389 0.22 0.0219 0.46 0.0337 0.714 0.0337 2.25 0 5.25-0.871 8.23-2.39 3.77-1.92 6.72-4.5 7.51-6.57 0.274 0.188 0.481 0.42 0.618 0.688 1 1.97-1.98 5.5-6.65 7.88-2.53 1.29-5.15 2.03-7.19 2.03z" fill="#333"></path>
        <g id="pony_mane" transform="translate(-.000801 -11.9)" fill="#805333">
            <path d="m73.6 26.4a2 2 0 0 1 3.67 0.32l1.96 6.06a2 2 0 0 1-2.08 2.61l-4.94-0.431a2 2 0 0 1-1.59-2.93z"></path>
            <path d="m80.6 24.8a2 2 0 0 1 3.66 0.319l2.86 8.7a2 2 0 0 1-2.07 2.62l-7.19-0.626a2 2 0 0 1-1.58-2.94z"></path>
            <path d="m91.3 24a2 2 0 0 1 3.54 0.626l3.16 11.1a2 2 0 0 1-2.27 2.52l-9.94-1.76a2 2 0 0 1-1.27-3.14z"></path>
            <path d="m101 27a2 2 0 0 1 3.38 1.23l1.18 11.5a2 2 0 0 1-2.67 2.08l-9.49-3.45a2 2 0 0 1-0.709-3.31z"></path>
            <path d="m114 27.8a1 1 0 0 1 1.6 0.615l3.14 17.9a1 1 0 0 1-1.34 1.11l-17.4-6.7a1 1 0 0 1-0.259-1.72z"></path>
            <path d="m124 33.1a1 1 0 0 1 1.53 0.681l2.69 16.7a1 1 0 0 1-1.39 1.07l-16.9-7.52a1 1 0 0 1-0.136-1.75z"></path>
            <path d="m132 37.4a1 1 0 0 1 1.59 0.845l-0.566 15.2a1 1 0 0 1-1.47 0.845l-11.7-6.24a1 1 0 0 1-0.12-1.69z"></path>
            <path d="m140 44.7a2 2 0 0 1 2.6 2.11l-1.38 13.5a2 2 0 0 1-3.25 1.35l-11.5-9.32a2 2 0 0 1 0.642-3.46z"></path>
            <path d="m147 51.9a2 2 0 0 1 2.36 2.72l-4.55 10.6a2 2 0 0 1-3.35 0.527l-6.63-7.62a2 2 0 0 1 0.987-3.24z"></path>
            <path d="m152 62.1a2 2 0 0 1 2.11 3.01l-4.83 7.79a2 2 0 0 1-3.34 0.0941l-4.14-5.92a2 2 0 0 1 1.23-3.1z"></path>
            <path d="m157 70.5a1 1 0 0 1 0.848 1.63l-6.53 7.89a1 1 0 0 1-1.66-0.178l-3.68-7.08a1 1 0 0 1 0.809-1.46z"></path>
            <path d="m50.6 25.6a2 2 0 0 1 3.53-1.01l5.79 7.1a2 2 0 0 1-0.998 3.19l-6.94 1.99a2 2 0 0 1-2.53-2.17z"></path>
            <path d="m44.4 27.6a1 1 0 0 1 1.74-0.6l6.85 7.62a1 1 0 0 1-0.418 1.61l-7.55 2.6a1 1 0 0 1-1.32-1.01z"></path>
            <path d="m38.6 32a1 1 0 0 1 1.65-0.805l6.36 5.45a1 1 0 0 1-0.211 1.66l-5.98 2.92a1 1 0 0 1-1.44-0.856z"></path>
        </g>
        <ellipse id="pony_left_ear" transform="rotate(-12)" cx="57.1" cy="27.8" rx="8.5" ry="15.5" fill="#a56a43"></ellipse>
        <path id="pony_spots" d="m30.6 48.4c-0.934-0.784-0.253-3.18 1.51-5.62a12.6 12.6 0 0 1 1.88-5.35c2.13-3.55 5.2-5.62 6.86-4.63s1.27 4.68-0.863 8.23a13.9 13.9 0 0 1-2.86 3.44q-0.209 0.271-0.435 0.54c-1.86 2.22-3.99 3.63-5.3 3.63a1.19 1.19 0 0 1-0.793-0.251z" fill="#fff"></path>
    </g>
    <g id="pony_leg_front_right">
        <ellipse cx="75.4" cy="176" rx="11.5" ry="10" fill="#a56a43"></ellipse>
        <path d="m94.8 132c-31.7 34.6-25.8 41-25.8 41l14.1 3.22 34.1-24.1z" fill="#a56a43"></path>
        <path d="m68.6 181c11.1 28 24.3 29.7 24.3 29.7l-11.7-36.2" fill="#a56a43"></path>
        <ellipse cx="86.9" cy="206" rx="9" ry="7.5" fill="#a56a43"></ellipse>
        <path d="m101 208s-4.22 0.285-6.19-1.34 3.92 2.01 3.92 2.01l-9.28 11-3.75-4.05 8.58-9.01" fill="#a56a43"></path>
        <path d="m97.9 207a3 3 0 0 1 5.2 1.11l3.8 13.6c0.605 2.17 0.159 4.33-2.05 3.86l-14.3-2.84a3 3 0 0 1-1.69-4.85z" fill="#7a7676"></path>
    </g>
    <g id="pony_leg_front_left">
        <path d="m160 153c3.11 44.4-4.84 46.7-4.84 46.7l-12.1-4.52-10.8-37.1z" fill="#a56a43"></path>
        <ellipse cx="152" cy="201" rx="11.5" ry="10" fill="#a56a43"></ellipse>
        <path d="m159 205c0.2 30.1-11.4 36.7-11.4 36.7l-2.7-38" fill="#a56a43"></path>
        <ellipse cx="153" cy="232" rx="9" ry="7.5" fill="#a56a43"></ellipse>
        <path d="m160 245s-2.58-2.9-2.43-5.19c0.149-2.29 0.632 3.9 0.632 3.9l-13.7-0.862 1.04-4.86 11.8 1.44" fill="#a56a43"></path>
        <path d="m144 242-3.67 8.59-2.01 5h21.9v-12.8" fill="#7a7676"></path>
    </g>
    <g id="pony_leg_back_left">
        <path d="m273 135-1.21 46.3-27.3 43.5-9.47-7.98 15.1-31.9-14.3-35.2z" fill="#a56a43"></path>
        <ellipse cx="239" cy="223" rx="9" ry="7.5" fill="#a56a43"></ellipse>
        <path d="m245 236s-2.2-3.2-1.78-5.45 0.152 3.95 0.152 3.95l-13.5-2.53 1.62-4.7 11.5 2.86" fill="#a56a43"></path>
        <path d="m246 235a3 3 0 0 1 1.29 5.16l-10.6 9.38c-1.69 1.5-3.82 2.04-4.37-0.148l-3.7-14.1a3 3 0 0 1 3.62-3.64z" fill="#7a7676"></path>
    </g>
    <g id="pony_leg_back_right">
        <path d="m229 138-1.21 46.3-27.3 43.5-9.47-7.98 15.1-31.9-14.3-35.2z" fill="#a56a43"></path>
        <ellipse id="joint" cx="196" cy="223" rx="9" ry="7.5" fill="#a56a43"></ellipse>
        <path d="m199 240s-1.44-5.3-0.465-8.88-0.799 6.35-0.799 6.35l-12.9-5.12 2.75-7.4 10.8 5.5" fill="#a56a43"></path>
        <path d="m185 232-3.34 7.77-1.82 4.52h19.9v-11.6" fill="#7a7676"></path>
    </g></g></g></svg>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');

body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
  margin: 0;
  padding: 0 20px;
}

#pony-svg { width: 100px; overflow: visible }
              
            
!

JS

              
                gsap.registerPlugin(MotionPathPlugin);

let svg = document.getElementById("pony-svg"),
  pony = document.getElementById("pony"),
  ponyWrapper = document.getElementById("pony-wrapper"),
  path = buildPath(),
  game = gsap.timeline({
    repeat: -1,
    defaults: {
      duration: 5,
      ease: "linear"
    }
  });

game
  .to(pony, {
    motionPath: {
      path: path,
      align: path,
      autoRotate: 180,
      alignOrigin: [0.5, 0.5]
    },
    onComplete: function () {
      this.vars.motionPath.path = buildPath(); // does not work

      /************************
      
      at this point I would like to revalculate the path and apply it to motionPath.path (as well as to motionPath.align).
      I tried 
      this.vars.motionPath.path = buildPath();
      but it doesn't have an effect
      
      *************************/
    }
  })
  .set(ponyWrapper, { scaleX: -1 })
  .to(pony, {
    motionPath: {
      path: path,
      align: path,
      start: 1,
      end: 0,
      autoRotate: 180,
      alignOrigin: [0.5, 0.5]
    },
    onComplete: function () {
      /************************
      
      revalculate path again
      
      *************************/
    }
  });





function buildPath() {
  let startY = gsap.utils.random(window.innerHeight / 10, window.innerHeight),
    endY = gsap.utils.random(window.innerHeight / 10, window.innerHeight),
    middleY = gsap.utils.random(startY, endY),
    outsidePoint = window.innerWidth + 150,
    pathArray = [
      { x: outsidePoint, y: startY },
      { x: window.innerWidth / 2, y: middleY },
      { x: -150, y: endY }
    ];

  pathArray[0] = MotionPathPlugin.convertCoordinates(window, svg, pathArray[0]);
  pathArray[1] = MotionPathPlugin.convertCoordinates(window, svg, pathArray[1]);
  pathArray[2] = MotionPathPlugin.convertCoordinates(window, svg, pathArray[2]);
  let rawPath = MotionPathPlugin.arrayToRawPath(pathArray, { curviness: 2 }),
      newPath = createSVG("path", svg, { d: MotionPathPlugin.rawPathToString(rawPath) });
  gsap.set(newPath, { stroke: "grey", strokeWidth: 1, fill: "none" });
  return newPath;
}



function createSVG(type, container, attributes) {
  let element = document.createElementNS("http://www.w3.org/2000/svg", type),
    reg = /([a-z])([A-Z])/g,
    p;
  for (p in attributes) {
    element.setAttributeNS(
      null,
      p.replace(reg, "$1-$2").toLowerCase(),
      attributes[p]
    );
  }
  if (typeof container === "string") {
    container = document.querySelector(container);
  }
  container.appendChild(element);
  return element;
}

              
            
!
999px

Console