SVG Experiments with coordinate system transforms
How do I make an svg experiments with coordinate system transforms?
Following along with "Pocket Guide to Writing SVG" by Joni Trythall.. What is a svg experiments with coordinate system transforms? How do you make a svg experiments with coordinate system transforms? This script and codes were developed by KatieK on 12 January 2023, Thursday.
SVG Experiments with coordinate system transforms Previews
SVG Experiments with coordinate system transforms - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Experiments with coordinate system transforms</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/abcei.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>SVG Experiments with coordinate system transforms</h1>
<div> <h3>Nice robot.</h3> <svg viewBox="0 0 64 64"> <desc>Robot SVG to demonstrate coordinate system transforms</desc> <g> <path fill="#00b9f1" d="m57.6 13.651c-.656-.974-1.637-1.658-2.674-2.167-3.377-1.659-11.639-1.31-12.334-5.653-.914-5.695-5.855.061-6.771.061-1.059 0-1.573-3.892-3.723-3.892-2.152 0-2.664 3.892-3.723 3.892-.916 0-5.859-5.756-6.771-.061-.695 4.344-8.959 3.995-12.334 5.653-1.037.51-2.02 1.194-2.674 2.167-.521.773.625 1.614 1.207.887 1.586-1.984 4.832-2.37 7.145-2.827 1.941-.384 4.049-.612 5.881-1.393 2.596-1 2.48-4.931 3.268-4.931.588 0 2.697 3.02 4.549 3.02 1.58 0 2.58-3.698 3.453-3.698.877 0 1.871 3.698 3.451 3.698 1.854 0 3.963-3.02 4.551-3.02.785 0 .672 3.931 3.268 4.931 1.832.781 3.939 1.01 5.881 1.393 2.313.457 5.559.842 7.145 2.827.58.728 1.726-.113 1.205-.887"/> <path fill="#89967a" d="M53,57c0,2.762-2.238,5-5,5H16c-2.76,0-5-2.238-5-5V36h42V57z"/> <path fill="#b6c4a7" d="m32 12c-15.463 0-21 8.536-21 24v21h42v-21c0-15.464-5.535-24-21-24"/> <g fill="#89967a"> <path d="m11 54.98c-1.104 0-2-1.168-2-2.609v-6.783c0-1.439.896-2.607 2-2.607v11.999"/> <path d="m53 42.98c1.105 0 2 1.168 2 2.607v6.783c0 1.441-.895 2.609-2 2.609v-11.999"/> </g> <g fill="#3e4347"> <path d="m7 19.979h-2v30h2 2v-2h-2z"/> <path d="m57 19.979v28h-2v2h2 2v-30z"/> </g> <circle fill="#00b9f1" cx="58" cy="19.979" r="4"/> <g enable-background="new "> <circle fill="#ff5263" cx="6" cy="19.979" r="4"/> </g> <path fill="#efffd9" d="m21.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <circle fill="#545b61" cx="21.5" cy="31.5" r="6"/> <circle fill="#ff5263" cx="21.5" cy="31.5" r="2.285"/> <path fill="#efffd9" d="m42.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <path fill="#545b61" d="m42.5 37.5c-3.313 0-6-2.688-6-6 0-3.315 2.688-6 6-6 3.317 0 6 2.685 6 6 0 3.313-2.683 6-6 6"/> <circle fill="#ff5263" cx="42.5" cy="31.5" r="2.286"/> <path fill="#efffd9" d="m19.769 54.09c-7.358 0-7.358-13 0-13h24.463c7.358 0 7.358 13 0 13h-24.463"/> <path fill="#89967a" d="m20.488 52.588c-5.984 0-5.984-10 0-10h23.02c5.984 0 5.984 10 0 10h-23.02"/> <g opacity=".7" fill="#3e4347"> <path d="m21.19 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m25.916 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m30.639 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m35.36 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m40.08 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m44.807 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> </g> <circle fill="#f5f5f5" cx="32" cy="36.98" r="2"/> <path transform="matrix(.7071-.7071.7071.7071-16.776 33.459)" fill="#545b61" d="m31.617 34.98h.765v4h-.765z"/> </g> </svg> <p>A nice robot.</p>
</div>
<div> <h3>translate(0, 160)</h3> <svg viewBox="0 0 64 64" transform="translate(0, 160)"> <desc>Robot SVG to demonstrate coordinate system transforms</desc> <g> <path fill="#00b9f1" d="m57.6 13.651c-.656-.974-1.637-1.658-2.674-2.167-3.377-1.659-11.639-1.31-12.334-5.653-.914-5.695-5.855.061-6.771.061-1.059 0-1.573-3.892-3.723-3.892-2.152 0-2.664 3.892-3.723 3.892-.916 0-5.859-5.756-6.771-.061-.695 4.344-8.959 3.995-12.334 5.653-1.037.51-2.02 1.194-2.674 2.167-.521.773.625 1.614 1.207.887 1.586-1.984 4.832-2.37 7.145-2.827 1.941-.384 4.049-.612 5.881-1.393 2.596-1 2.48-4.931 3.268-4.931.588 0 2.697 3.02 4.549 3.02 1.58 0 2.58-3.698 3.453-3.698.877 0 1.871 3.698 3.451 3.698 1.854 0 3.963-3.02 4.551-3.02.785 0 .672 3.931 3.268 4.931 1.832.781 3.939 1.01 5.881 1.393 2.313.457 5.559.842 7.145 2.827.58.728 1.726-.113 1.205-.887"/> <path fill="#89967a" d="M53,57c0,2.762-2.238,5-5,5H16c-2.76,0-5-2.238-5-5V36h42V57z"/> <path fill="#b6c4a7" d="m32 12c-15.463 0-21 8.536-21 24v21h42v-21c0-15.464-5.535-24-21-24"/> <g fill="#89967a"> <path d="m11 54.98c-1.104 0-2-1.168-2-2.609v-6.783c0-1.439.896-2.607 2-2.607v11.999"/> <path d="m53 42.98c1.105 0 2 1.168 2 2.607v6.783c0 1.441-.895 2.609-2 2.609v-11.999"/> </g> <g fill="#3e4347"> <path d="m7 19.979h-2v30h2 2v-2h-2z"/> <path d="m57 19.979v28h-2v2h2 2v-30z"/> </g> <circle fill="#00b9f1" cx="58" cy="19.979" r="4"/> <g enable-background="new "> <circle fill="#ff5263" cx="6" cy="19.979" r="4"/> </g> <path fill="#efffd9" d="m21.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <circle fill="#545b61" cx="21.5" cy="31.5" r="6"/> <circle fill="#ff5263" cx="21.5" cy="31.5" r="2.285"/> <path fill="#efffd9" d="m42.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <path fill="#545b61" d="m42.5 37.5c-3.313 0-6-2.688-6-6 0-3.315 2.688-6 6-6 3.317 0 6 2.685 6 6 0 3.313-2.683 6-6 6"/> <circle fill="#ff5263" cx="42.5" cy="31.5" r="2.286"/> <path fill="#efffd9" d="m19.769 54.09c-7.358 0-7.358-13 0-13h24.463c7.358 0 7.358 13 0 13h-24.463"/> <path fill="#89967a" d="m20.488 52.588c-5.984 0-5.984-10 0-10h23.02c5.984 0 5.984 10 0 10h-23.02"/> <g opacity=".7" fill="#3e4347"> <path d="m21.19 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m25.916 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m30.639 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m35.36 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m40.08 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m44.807 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> </g> <circle fill="#f5f5f5" cx="32" cy="36.98" r="2"/> <path transform="matrix(.7071-.7071.7071.7071-16.776 33.459)" fill="#545b61" d="m31.617 34.98h.765v4h-.765z"/> </g> </svg> <p>Robot has moved downwards.</p>
</div>
<div> <h3>rotate(5)</h3> <svg viewBox="0 0 64 64" transform="rotate(5)"> <desc>Robot SVG to demonstrate coordinate system transforms</desc> <g> <path fill="#00b9f1" d="m57.6 13.651c-.656-.974-1.637-1.658-2.674-2.167-3.377-1.659-11.639-1.31-12.334-5.653-.914-5.695-5.855.061-6.771.061-1.059 0-1.573-3.892-3.723-3.892-2.152 0-2.664 3.892-3.723 3.892-.916 0-5.859-5.756-6.771-.061-.695 4.344-8.959 3.995-12.334 5.653-1.037.51-2.02 1.194-2.674 2.167-.521.773.625 1.614 1.207.887 1.586-1.984 4.832-2.37 7.145-2.827 1.941-.384 4.049-.612 5.881-1.393 2.596-1 2.48-4.931 3.268-4.931.588 0 2.697 3.02 4.549 3.02 1.58 0 2.58-3.698 3.453-3.698.877 0 1.871 3.698 3.451 3.698 1.854 0 3.963-3.02 4.551-3.02.785 0 .672 3.931 3.268 4.931 1.832.781 3.939 1.01 5.881 1.393 2.313.457 5.559.842 7.145 2.827.58.728 1.726-.113 1.205-.887"/> <path fill="#89967a" d="M53,57c0,2.762-2.238,5-5,5H16c-2.76,0-5-2.238-5-5V36h42V57z"/> <path fill="#b6c4a7" d="m32 12c-15.463 0-21 8.536-21 24v21h42v-21c0-15.464-5.535-24-21-24"/> <g fill="#89967a"> <path d="m11 54.98c-1.104 0-2-1.168-2-2.609v-6.783c0-1.439.896-2.607 2-2.607v11.999"/> <path d="m53 42.98c1.105 0 2 1.168 2 2.607v6.783c0 1.441-.895 2.609-2 2.609v-11.999"/> </g> <g fill="#3e4347"> <path d="m7 19.979h-2v30h2 2v-2h-2z"/> <path d="m57 19.979v28h-2v2h2 2v-30z"/> </g> <circle fill="#00b9f1" cx="58" cy="19.979" r="4"/> <g enable-background="new "> <circle fill="#ff5263" cx="6" cy="19.979" r="4"/> </g> <path fill="#efffd9" d="m21.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <circle fill="#545b61" cx="21.5" cy="31.5" r="6"/> <circle fill="#ff5263" cx="21.5" cy="31.5" r="2.285"/> <path fill="#efffd9" d="m42.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <path fill="#545b61" d="m42.5 37.5c-3.313 0-6-2.688-6-6 0-3.315 2.688-6 6-6 3.317 0 6 2.685 6 6 0 3.313-2.683 6-6 6"/> <circle fill="#ff5263" cx="42.5" cy="31.5" r="2.286"/> <path fill="#efffd9" d="m19.769 54.09c-7.358 0-7.358-13 0-13h24.463c7.358 0 7.358 13 0 13h-24.463"/> <path fill="#89967a" d="m20.488 52.588c-5.984 0-5.984-10 0-10h23.02c5.984 0 5.984 10 0 10h-23.02"/> <g opacity=".7" fill="#3e4347"> <path d="m21.19 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m25.916 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m30.639 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m35.36 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m40.08 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m44.807 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> </g> <circle fill="#f5f5f5" cx="32" cy="36.98" r="2"/> <path transform="matrix(.7071-.7071.7071.7071-16.776 33.459)" fill="#545b61" d="m31.617 34.98h.765v4h-.765z"/> </g> </svg> <p>A slightly tilted robot. </p>
</div>
<div> <h3>rotate(45, 200, 200)</h3> <svg viewBox="0 0 64 64" transform="rotate(45, 200, 200)"> <desc>Robot SVG to demonstrate coordinate system transforms</desc> <g> <path fill="#00b9f1" d="m57.6 13.651c-.656-.974-1.637-1.658-2.674-2.167-3.377-1.659-11.639-1.31-12.334-5.653-.914-5.695-5.855.061-6.771.061-1.059 0-1.573-3.892-3.723-3.892-2.152 0-2.664 3.892-3.723 3.892-.916 0-5.859-5.756-6.771-.061-.695 4.344-8.959 3.995-12.334 5.653-1.037.51-2.02 1.194-2.674 2.167-.521.773.625 1.614 1.207.887 1.586-1.984 4.832-2.37 7.145-2.827 1.941-.384 4.049-.612 5.881-1.393 2.596-1 2.48-4.931 3.268-4.931.588 0 2.697 3.02 4.549 3.02 1.58 0 2.58-3.698 3.453-3.698.877 0 1.871 3.698 3.451 3.698 1.854 0 3.963-3.02 4.551-3.02.785 0 .672 3.931 3.268 4.931 1.832.781 3.939 1.01 5.881 1.393 2.313.457 5.559.842 7.145 2.827.58.728 1.726-.113 1.205-.887"/> <path fill="#89967a" d="M53,57c0,2.762-2.238,5-5,5H16c-2.76,0-5-2.238-5-5V36h42V57z"/> <path fill="#b6c4a7" d="m32 12c-15.463 0-21 8.536-21 24v21h42v-21c0-15.464-5.535-24-21-24"/> <g fill="#89967a"> <path d="m11 54.98c-1.104 0-2-1.168-2-2.609v-6.783c0-1.439.896-2.607 2-2.607v11.999"/> <path d="m53 42.98c1.105 0 2 1.168 2 2.607v6.783c0 1.441-.895 2.609-2 2.609v-11.999"/> </g> <g fill="#3e4347"> <path d="m7 19.979h-2v30h2 2v-2h-2z"/> <path d="m57 19.979v28h-2v2h2 2v-30z"/> </g> <circle fill="#00b9f1" cx="58" cy="19.979" r="4"/> <g enable-background="new "> <circle fill="#ff5263" cx="6" cy="19.979" r="4"/> </g> <path fill="#efffd9" d="m21.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <circle fill="#545b61" cx="21.5" cy="31.5" r="6"/> <circle fill="#ff5263" cx="21.5" cy="31.5" r="2.285"/> <path fill="#efffd9" d="m42.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <path fill="#545b61" d="m42.5 37.5c-3.313 0-6-2.688-6-6 0-3.315 2.688-6 6-6 3.317 0 6 2.685 6 6 0 3.313-2.683 6-6 6"/> <circle fill="#ff5263" cx="42.5" cy="31.5" r="2.286"/> <path fill="#efffd9" d="m19.769 54.09c-7.358 0-7.358-13 0-13h24.463c7.358 0 7.358 13 0 13h-24.463"/> <path fill="#89967a" d="m20.488 52.588c-5.984 0-5.984-10 0-10h23.02c5.984 0 5.984 10 0 10h-23.02"/> <g opacity=".7" fill="#3e4347"> <path d="m21.19 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m25.916 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m30.639 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m35.36 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m40.08 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m44.807 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> </g> <circle fill="#f5f5f5" cx="32" cy="36.98" r="2"/> <path transform="matrix(.7071-.7071.7071.7071-16.776 33.459)" fill="#545b61" d="m31.617 34.98h.765v4h-.765z"/> </g> </svg> <p>The tilted robot's rotate origin has be changed.</p>
</div>
<div> <h3>scale(1.5, 1.5)</h3> <svg viewBox="0 0 64 64" transform="scale(1.5, .5)"> <desc>Robot SVG to demonstrate coordinate system transforms</desc> <g> <path fill="#00b9f1" d="m57.6 13.651c-.656-.974-1.637-1.658-2.674-2.167-3.377-1.659-11.639-1.31-12.334-5.653-.914-5.695-5.855.061-6.771.061-1.059 0-1.573-3.892-3.723-3.892-2.152 0-2.664 3.892-3.723 3.892-.916 0-5.859-5.756-6.771-.061-.695 4.344-8.959 3.995-12.334 5.653-1.037.51-2.02 1.194-2.674 2.167-.521.773.625 1.614 1.207.887 1.586-1.984 4.832-2.37 7.145-2.827 1.941-.384 4.049-.612 5.881-1.393 2.596-1 2.48-4.931 3.268-4.931.588 0 2.697 3.02 4.549 3.02 1.58 0 2.58-3.698 3.453-3.698.877 0 1.871 3.698 3.451 3.698 1.854 0 3.963-3.02 4.551-3.02.785 0 .672 3.931 3.268 4.931 1.832.781 3.939 1.01 5.881 1.393 2.313.457 5.559.842 7.145 2.827.58.728 1.726-.113 1.205-.887"/> <path fill="#89967a" d="M53,57c0,2.762-2.238,5-5,5H16c-2.76,0-5-2.238-5-5V36h42V57z"/> <path fill="#b6c4a7" d="m32 12c-15.463 0-21 8.536-21 24v21h42v-21c0-15.464-5.535-24-21-24"/> <g fill="#89967a"> <path d="m11 54.98c-1.104 0-2-1.168-2-2.609v-6.783c0-1.439.896-2.607 2-2.607v11.999"/> <path d="m53 42.98c1.105 0 2 1.168 2 2.607v6.783c0 1.441-.895 2.609-2 2.609v-11.999"/> </g> <g fill="#3e4347"> <path d="m7 19.979h-2v30h2 2v-2h-2z"/> <path d="m57 19.979v28h-2v2h2 2v-30z"/> </g> <circle fill="#00b9f1" cx="58" cy="19.979" r="4"/> <g enable-background="new "> <circle fill="#ff5263" cx="6" cy="19.979" r="4"/> </g> <path fill="#efffd9" d="m21.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <circle fill="#545b61" cx="21.5" cy="31.5" r="6"/> <circle fill="#ff5263" cx="21.5" cy="31.5" r="2.285"/> <path fill="#efffd9" d="m42.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <path fill="#545b61" d="m42.5 37.5c-3.313 0-6-2.688-6-6 0-3.315 2.688-6 6-6 3.317 0 6 2.685 6 6 0 3.313-2.683 6-6 6"/> <circle fill="#ff5263" cx="42.5" cy="31.5" r="2.286"/> <path fill="#efffd9" d="m19.769 54.09c-7.358 0-7.358-13 0-13h24.463c7.358 0 7.358 13 0 13h-24.463"/> <path fill="#89967a" d="m20.488 52.588c-5.984 0-5.984-10 0-10h23.02c5.984 0 5.984 10 0 10h-23.02"/> <g opacity=".7" fill="#3e4347"> <path d="m21.19 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m25.916 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m30.639 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m35.36 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m40.08 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m44.807 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> </g> <circle fill="#f5f5f5" cx="32" cy="36.98" r="2"/> <path transform="matrix(.7071-.7071.7071.7071-16.776 33.459)" fill="#545b61" d="m31.617 34.98h.765v4h-.765z"/> </g> </svg> <p>The robot is taller and fatter.</p>
</div>
<div> <h3>skewX(20) skewY(10)</h3> <svg viewBox="0 0 64 64" transform="skewX(20) skewY(10)"> <desc>Robot SVG to demonstrate coordinate system transforms</desc> <g> <path fill="#00b9f1" d="m57.6 13.651c-.656-.974-1.637-1.658-2.674-2.167-3.377-1.659-11.639-1.31-12.334-5.653-.914-5.695-5.855.061-6.771.061-1.059 0-1.573-3.892-3.723-3.892-2.152 0-2.664 3.892-3.723 3.892-.916 0-5.859-5.756-6.771-.061-.695 4.344-8.959 3.995-12.334 5.653-1.037.51-2.02 1.194-2.674 2.167-.521.773.625 1.614 1.207.887 1.586-1.984 4.832-2.37 7.145-2.827 1.941-.384 4.049-.612 5.881-1.393 2.596-1 2.48-4.931 3.268-4.931.588 0 2.697 3.02 4.549 3.02 1.58 0 2.58-3.698 3.453-3.698.877 0 1.871 3.698 3.451 3.698 1.854 0 3.963-3.02 4.551-3.02.785 0 .672 3.931 3.268 4.931 1.832.781 3.939 1.01 5.881 1.393 2.313.457 5.559.842 7.145 2.827.58.728 1.726-.113 1.205-.887"/> <path fill="#89967a" d="M53,57c0,2.762-2.238,5-5,5H16c-2.76,0-5-2.238-5-5V36h42V57z"/> <path fill="#b6c4a7" d="m32 12c-15.463 0-21 8.536-21 24v21h42v-21c0-15.464-5.535-24-21-24"/> <g fill="#89967a"> <path d="m11 54.98c-1.104 0-2-1.168-2-2.609v-6.783c0-1.439.896-2.607 2-2.607v11.999"/> <path d="m53 42.98c1.105 0 2 1.168 2 2.607v6.783c0 1.441-.895 2.609-2 2.609v-11.999"/> </g> <g fill="#3e4347"> <path d="m7 19.979h-2v30h2 2v-2h-2z"/> <path d="m57 19.979v28h-2v2h2 2v-30z"/> </g> <circle fill="#00b9f1" cx="58" cy="19.979" r="4"/> <g enable-background="new "> <circle fill="#ff5263" cx="6" cy="19.979" r="4"/> </g> <path fill="#efffd9" d="m21.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <circle fill="#545b61" cx="21.5" cy="31.5" r="6"/> <circle fill="#ff5263" cx="21.5" cy="31.5" r="2.285"/> <path fill="#efffd9" d="m42.5 39.5c-4.415 0-8-3.583-8-8 0-4.42 3.585-8 8-8 4.422 0 8 3.58 8 8 0 4.417-3.578 8-8 8"/> <path fill="#545b61" d="m42.5 37.5c-3.313 0-6-2.688-6-6 0-3.315 2.688-6 6-6 3.317 0 6 2.685 6 6 0 3.313-2.683 6-6 6"/> <circle fill="#ff5263" cx="42.5" cy="31.5" r="2.286"/> <path fill="#efffd9" d="m19.769 54.09c-7.358 0-7.358-13 0-13h24.463c7.358 0 7.358 13 0 13h-24.463"/> <path fill="#89967a" d="m20.488 52.588c-5.984 0-5.984-10 0-10h23.02c5.984 0 5.984 10 0 10h-23.02"/> <g opacity=".7" fill="#3e4347"> <path d="m21.19 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m25.916 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m30.639 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m35.36 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m40.08 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> <path d="m44.807 50.662c0 1.234-2 1.234-2 0v-6.148c0-1.234 2-1.234 2 0v6.148"/> </g> <circle fill="#f5f5f5" cx="32" cy="36.98" r="2"/> <path transform="matrix(.7071-.7071.7071.7071-16.776 33.459)" fill="#545b61" d="m31.617 34.98h.765v4h-.765z"/> </g> </svg> <p>The robot is skewed in both x and y directions.</p>
</div>
<p class="note">Notes:</p>
<ul class="note"> <li>The default origin for rotation is <code>0, 0</code> - the top left corner.</li> <li>With scale, if there is no second value, the first value is used for both x and y.</li>
</ul>
</body>
</html>
SVG Experiments with coordinate system transforms - Script Codes CSS Codes
svg { margin: 0 1rem; outline: dashed $color 1px;
}
h3 { font-weight: normal; border-top: solid black 1px;
}
.note { font-style: italic; font-size: 90%;
}
.hide { display: none;
}
| Developer | KatieK |
| Username | KatieK2 |
| Uploaded | January 12, 2023 |
| Rating | 3 |
| Size | 4,004 Kb |
| Views | 4,048 |
Do you need developer help for SVG Experiments with coordinate system transforms?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
KatieK (KatieK2) Script Codes
| Name | Size |
| Dadgumit, Blowouts | 4,451 Kb |
| Experiments with Sass Color Functions | 4,076 Kb |
| Reverse the String | 2,911 Kb |
| Transparent Textures | 4,276 Kb |
| Image Caption | 2,694 Kb |
| CSS Content Generation Demos | 15,183 Kb |
| Text Blocks Over Image, Updated | 3,122 Kb |
| Vertical Centering - Ghost Element | 2,434 Kb |
| Fun with Clipping | 2,971 Kb |
| Experiments with Vertical Centering | 3,924 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Objects | Bonzaipenguin | 2,616 Kb |
| Project Euler Problem 17 | Bfillmer | 2,739 Kb |
| Swiftype Lower Third | Zumwalt | 4,796 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
| Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
| CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
| Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
| Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
| Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!