結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> *{margin:20px;} .タイヤ{position:fixed; top:0; left:-100; z-index:30;} </style> <div class="タイヤ"> <svg width="600"height="600"viewBox="0 0 1000 1000"xmlns="http://www.w3.org/2000/svg"> <!-- タイヤの中心の黒 --> <filter color-interpolation-filters="sRGB"id="ターン"><feGaussianBlur stdDeviation="1"></filter> <!-- タイヤの揺れ --> <g id="ガタゴト"transform="matrix(0.525,0,0,0.525,296.20522,12.444465)"> <animateTransform values="0 0;-6 -6;0 2;0 0"attributeName="transform"additive="sum"begin="0ms"dur="0.3s"type="translate"repeatCount="indefinite"/> <path style="fill-rule:evenodd;stroke:none;filter:url(#ターン)"inkscape:connector-curvature="0"d="m 577,324.73068 c 0,19.7004 -3.93013,39.39306 -11.49419,57.59386 -7.56407,18.2008 -18.75612,34.89542 -32.73269,48.8257 -13.97657,13.93028 -30.72666,25.08526 -48.98792,32.62427 -18.26127,7.539 -38.01935,11.45611 -57.7852,11.45611 -19.76585,0 -39.52393,-3.91711 -57.7852,-11.45611 -18.26126,-7.53901 -35.01135,-18.69399 -48.98792,-32.62427 -13.97657,-13.93028 -25.16862,-30.6249 -32.73269,-48.8257 C 278.93013,364.12374 275,344.43108 275,324.73068 c 0,-19.7004 3.93013,-39.39306 11.49419,-57.59386 7.56407,-18.20079 18.75612,-34.89542 32.73269,-48.8257 13.97657,-13.93028 30.72666,-25.08526 48.98792,-32.62426 18.26127,-7.53901 38.01935,-11.45611 57.7852,-11.45611 19.76585,0 39.52393,3.9171 57.7852,11.45611 18.26126,7.539 35.01135,18.69398 48.98792,32.62426 13.97657,13.93028 25.16862,30.62491 32.73269,48.8257 C 573.06987,285.33762 577,305.03028 577,324.73068 z" transform="matrix(0.40891692,0,0,0.37383098,-18.693326,789.77044)"/> <!-- タイヤのホイール --> <g> <animateTransform repeatCount="indefinite"type="rotate"dur="0.5s"begin="0s"additive="sum"attributeName="transform"from="180 152,909"to="0 152,909"/> <path style="fill:#969696;fill-opacity:1;fill-rule:evenodd"inkscape:connector-curvature="0"d="m 151.62,830.14 c -31.44,0 -58.584,18.378 -71.297,44.969 7.971,-13.164 20.531,-29.603 37.281,-35.172 l 17.328,48.438 c 0.0469,0.65202 0.0731,1.2939 0.0469,1.8906 3.708,-3.1748 8.365,-5.2821 13.484,-5.8281 -0.76682,-0.4634 -1.4867,-1.2352 -2.2031,-2.0625 l -22,-46.5 c 7.3978,-3.7064 15.836,-5.08 24.25,-5.1094 9.5359,-0.0333 19.045,1.6587 26.984,3.6094 l -22.312,48 c -0.6265,0.91798 -1.2112,1.5242 -1.7656,1.9219 5.9691,0.07 11.423,2.2552 15.672,5.8281 -0.2824,-0.90707 -0.24138,-2.0492 -0.15625,-3.2344 l 17.328,-48.438 c 16.751,5.5685 29.31,21.992 37.281,35.156 l -49.719,18.172 c -1.2271,0.23159 -2.1536,0.24109 -2.8594,0.0781 4.328,4.4704 7,10.552 7,17.266 0,13.189 -10.281,23.984 -23.266,24.797 0.76205,0.29535 1.5797,1.0181 2.4844,2.3438 l 22.125,47.578 c 3.5689,-1.2264 7.0266,-2.6879 10.344,-4.3906 l -18.094,-49.484 c -0.77387,-4.1004 0.93838,-4.9093 3.2344,-4.9531 0.52984,-0.0101 1.1035,0.0217 1.6719,0.0625 l 48.438,17.328 c -0.37692,1.1338 -0.8091,2.2485 -1.2812,3.3438 5.7375,-10.946 9,-23.409 9,-36.625 0,-6.4808 -0.79353,-12.77 -2.2656,-18.797 2.7258,13.963 3.7373,30.881 -3.0156,44.359 l -46.5,-22 c -2.2975,-1.9896 -4.242,-4.0268 0,-6.9219 l 47.578,-22.109 c -10.598,-31.125 -40.086,-53.516 -74.797,-53.516 z m -71.297,44.969 c -4.927,10.305 -7.6875,21.831 -7.6875,34.016 0,25.774 12.354,48.66 31.453,63.078 -9.5079,-7.425 -18.469,-16.953 -22.297,-28.469 l 48.438,-17.328 c 1.1576,-0.0831 2.2905,-0.12059 3.1875,0.14062 -3.5441,-3.6041 -6.0029,-8.278 -6.8281,-13.5 -0.45372,0.55913 -1.037,1.1044 -1.6562,1.6406 l -46.5,22 c -7.907,-15.782 -5.1719,-36.29 -1.5,-51.234 l 48,22.312 c 0.56083,0.38274 1.0013,0.75471 1.3594,1.1094 0.0585,-5.8475 2.1433,-11.207 5.5781,-15.422 -0.52575,0.005 -1.1185,-0.0536 -1.8281,-0.1875 l -49.719,-18.156 z m 54.781,53 c 0.25668,0.73759 0.28636,1.7686 0.0156,3.2031 l -17.875,48.938 c 10.396,5.0356 22.048,7.875 34.375,7.875 6.8163,0 13.44,-0.86099 19.75,-2.4844 -14.102,2.8347 -31.391,3.9982 -45.109,-2.875 l 22,-46.5 c 0.85514,-0.98748 1.7189,-1.903 2.6562,-2.2969 -6.0257,-0.0484 -11.536,-2.2463 -15.812,-5.8594 z m 71.844,37.391 c -4.9888,4.6312 -10.459,8.6155 -15.641,11.953 5.7116,-3.3242 10.955,-7.3536 15.641,-11.953 z"/> </g> <!-- タイヤの外 --> <path style="fill-rule:evenodd"inkscape:connector-curvature="0"d="m 152.51,771.26 c 79.391,0 143.75,60.494 143.75,135.12 0,74.626 -64.359,135.12 -143.75,135.12 -79.391,0 -143.75,-60.494 -143.75,-135.12 0,-74.626 64.359,-135.12 143.75,-135.12 z m 0,22.52 c -66.159,0 -119.81,50.412 -119.81,112.6 0,62.188 53.653,112.6 119.81,112.6 66.157,0 119.81,-50.412 119.81,-112.6 0,-62.188 -53.653,-112.6 -119.81,-112.6 z"/> <!-- タイヤの内側 --> <path style="fill-rule:evenodd"inkscape:connector-curvature="0"d="m 152.51,792.88 c 66.688,0 120.75,50.815 120.75,113.5 0,62.685 -54.062,113.5 -120.75,113.5 -66.688,0 -120.75,-50.815 -120.75,-113.5 0,-62.685 54.062,-113.5 120.75,-113.5 z m 0,18.916 c -55.574,0 -100.64,42.346 -100.64,94.582 0,52.236 45.069,94.582 100.64,94.582 55.571,0 100.64,-42.346 100.64,-94.582 0,-52.236 -45.069,-94.582 -100.64,-94.582 z"/> <!-- ホイール --> <path style="fill:#cccccc;fill-opacity:1;fill-rule:evenodd"inkscape:connector-curvature="0"d="m 152.51,816.38 c 52.881,0 95.75,40.294 95.75,90 0,49.706 -42.869,90 -95.75,90 -52.881,0 -95.75,-40.294 -95.75,-90 0,-49.706 42.869,-90 95.75,-90 z m 0,15 c -44.068,0 -79.806,33.579 -79.806,75 0,41.421 39.273,73.586 83.341,73.586 44.068,0 76.27,-32.164 76.27,-73.586 0,-41.422 -35.738,-75 -79.806,-75 z"/> </g> <!-- タイヤの距離 --> <use transform="translate(486,0)"xlink:href="#ガタゴト"x="0"y="0"/> </svg> </div> <style>.ポジション{position:fixed;z-index:-10;}.メッシュ{fill:none;stroke:gray;stroke-width:0.4;}</style><div class="ポジション"><svg width="600"height="600"viewBox="0 0 600 600"><g><line class="メッシュ"x1="0"y1="0"x2="0"y2="600"/><line class="メッシュ"x1="20"y1="0"x2="20"y2="600"/><line class="メッシュ"x1="40"y1="0"x2="40"y2="600"/><line class="メッシュ"x1="60"y1="0"x2="60"y2="600"/><line class="メッシュ"x1="80"y1="0"x2="80"y2="600"/><line class="メッシュ"x1="100"y1="0"x2="100"y2="600"/><line class="メッシュ"x1="120"y1="0"x2="120"y2="600"/><line class="メッシュ"x1="140"y1="0"x2="140"y2="600"/><line class="メッシュ"x1="160"y1="0"x2="160"y2="600"/><line class="メッシュ"x1="180"y1="0"x2="180"y2="600"/><line class="メッシュ"x1="200"y1="0"x2="200"y2="600"/><line class="メッシュ"x1="220"y1="0"x2="220"y2="600"/><line class="メッシュ"x1="240"y1="0"x2="240"y2="600"/><line class="メッシュ"x1="260"y1="0"x2="260"y2="600"/><line class="メッシュ"x1="280"y1="0"x2="280"y2="600"/><line class="メッシュ"x1="300"y1="0"x2="300"y2="600"/><line class="メッシュ"x1="320"y1="0"x2="320"y2="600"/><line class="メッシュ"x1="340"y1="0"x2="340"y2="600"/><line class="メッシュ"x1="360"y1="0"x2="360"y2="600"/><line class="メッシュ"x1="380"y1="0"x2="380"y2="600"/><line class="メッシュ"x1="400"y1="0"x2="400"y2="600"/><line class="メッシュ"x1="420"y1="0"x2="420"y2="600"/><line class="メッシュ"x1="440"y1="0"x2="440"y2="600"/><line class="メッシュ"x1="460"y1="0"x2="460"y2="600"/><line class="メッシュ"x1="480"y1="0"x2="480"y2="600"/><line class="メッシュ"x1="500"y1="0"x2="500"y2="600"/><line class="メッシュ"x1="520"y1="0"x2="520"y2="600"/><line class="メッシュ"x1="540"y1="0"x2="540"y2="600"/><line class="メッシュ"x1="560"y1="0"x2="560"y2="600"/><line class="メッシュ"x1="580"y1="0"x2="580"y2="600"/><line class="メッシュ"x1="600"y1="0"x2="600"y2="600"/><line class="メッシュ"x1="0"y1="0"x2="600"y2="0"/><line class="メッシュ"x1="0"y1="20"x2="600"y2="20"/><line class="メッシュ"x1="0"y1="40"x2="600"y2="40"/><line class="メッシュ"x1="0"y1="60"x2="600"y2="60"/><line class="メッシュ"x1="0"y1="80"x2="600"y2="80"/><line class="メッシュ"x1="0"y1="100"x2="600"y2="100"/><line class="メッシュ"x1="0"y1="120"x2="600"y2="120"/><line class="メッシュ"x1="0"y1="140"x2="600"y2="140"/><line class="メッシュ"x1="0"y1="160"x2="600"y2="160"/><line class="メッシュ"x1="0"y1="180"x2="600"y2="180"/><line class="メッシュ"x1="0"y1="200"x2="600"y2="200"/><line class="メッシュ"x1="0"y1="220"x2="600"y2="220"/><line class="メッシュ"x1="0"y1="240"x2="600"y2="240"/><line class="メッシュ"x1="0"y1="260"x2="600"y2="260"/><line class="メッシュ"x1="0"y1="280"x2="600"y2="280"/><line class="メッシュ"x1="0"y1="300"x2="600"y2="300"/><line class="メッシュ"x1="0"y1="320"x2="600"y2="320"/><line class="メッシュ"x1="0"y1="340"x2="600"y2="340"/><line class="メッシュ"x1="0"y1="360"x2="600"y2="360"/><line class="メッシュ"x1="0"y1="380"x2="600"y2="380"/><line class="メッシュ"x1="0"y1="400"x2="600"y2="400"/><line class="メッシュ"x1="0"y1="420"x2="600"y2="420"/><line class="メッシュ"x1="0"y1="440"x2="600"y2="440"/><line class="メッシュ"x1="0"y1="460"x2="600"y2="460"/><line class="メッシュ"x1="0"y1="480"x2="600"y2="480"/><line class="メッシュ"x1="0"y1="500"x2="600"y2="500"/><line class="メッシュ"x1="0"y1="520"x2="600"y2="520"/><line class="メッシュ"x1="0"y1="540"x2="600"y2="540"/><line class="メッシュ"x1="0"y1="560"x2="600"y2="560"/><line class="メッシュ"x1="0"y1="580"x2="600"y2="580"/><line class="メッシュ"x1="0"y1="600"x2="600"y2="600"/></g><rect x="0"y="0"width="600"height="600"stroke="black"stroke-width="4"fill="transparent"/></svg></div> </html>