[grab and drag the pads]
Javascript animated SVG graphics
Example of embedded javascript in a SVG image. Coding SVG is like coding HTML canvas.
SVG
HTML
Note that the script is only executed if the SVG is viewed directly in a javascript enabled player (browser) or embedded in HTML with the <embed> element.
<embed>
The inspiration to create this was to add sandboxed javascript to github/gitlab/gitea README.md files. However, only after creation it turns out that it does not work with <img> elements and README.md does not allow <embed>.
README.md
<img>
Parked here for historics and inspirations.
The SVG is interactive. You can drag the black pads to change the curve.
You need to host the SVG image on GitHub-pages. Using the repository version (raw.githubusercontent.com) will not work as GitHub sends the HTTP header "Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox" which disables the javascript.
raw.githubusercontent.com
HTTP
"Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox"
Standard README.md links do not open in a new window and ![]() images miss resizing abilities.
![]()
Some suggested ways of using a SVG image (size is 500x500):
<img src="scripted-svg-500x500.svg" width="200" height="200" alt="SVC">
<embed src="https://xyzzy.github.io/scripted-svg/scripted-svg-500x500.svg" type="image/svg+xml">
NOTE: Will only work in HTML as README.md removes <embed> tags, Otherwise: SVG is interactive, you can move the black pads to change the curve.
NOTE: Browsers have a broken implementation as they do not scale mouse coordinates.
<a href="https://xyzzy.github.io/scripted-svg/scripted-svg-500x500.svg" target="_blank"><img src="scripted-svg-500x500.svg" width="200" height="200" alt="SVC"></a>
NOTE: The SVG when opened will full-screen.
Grab one of the tarballs at https://github.com/xyzzy/scripted-svg/releases or checkout the latest code:
git clone https://github.com/xyzzy/scripted-svg.git
Using SemVer for versioning. For the versions available, see the tags on this repository.
Everything withing <script> and </script> is part of ccbc and is licensed under the GNU Affero General Public License v3 - see the LICENSE.txt file for details. Everything else (the important stuff) is MIT.
<script>
</script>
ccbc