When I test VR mode at Android device(by google cardboard), It seems no stereo effect? The picture in two eyes are different, however when I put my phone into cardboard, they did not match each other, which means the entities overlap, but not come to one integrated stereo things..
enter image description here
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>i3D</title>
<meta name="description" content="VRselfWebsite">
<script src="js/Aframe/aframe.js"></script>
<script src="js/Aframe/build.js"></script>
<script src="js/Aframe/aframe-animation-component.js"></script>
<script src="js/Aframe/aframe-event-set-component.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-layout-component/master/dist/aframe-layout-component.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-template-component/master/dist/aframe-template-component.min.js"></script>
<script src="js/Aframe/set-image.js"></script>
<script src="js/Aframe/update-raycaster.js"></script>
<script src="https://cdn.rawgit.com/AdaRoseEdwards/facetype-fonts-for-a-frame/master/Exo%202_Bold%20Italic.js"></script>
</head>
<body>
<a-scene >
<a-assets>
<img id="internship" src="img/internship.png">
<img id="goggles" src="img/goggles.png">
<img id="education" src="img/education.png">
<img id="interets" src="img/interets.png">
<img id="harry" src="img/harry.jpeg">
<img id="gallery" src="img/gallery.png">
<img id="hkust" src="img/hkustPanorama.jpg">
<img id="mozvr" src="img/mozvr.png">
<img id="zy" src="img/zy.jpeg">
<img id="trans" src="img/trans.png">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
</a-assets>
<!-- Camera + cursor. -->
<a-entity camera look-controls>
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 300"
event-set__1="_event: mouseenter; color: springgreen"
event-set__2="_event: mouseleave; color: black"
raycaster="objects: .link"></a-cursor>
</a-entity>
<a-entity position="0 0 -3" rotation="5 0 0" sound="on: click; src: #click-sound">
<a-entity id="author"
position="-.7 0 0.3" text="text: Ariel .Zhang; font: exo 2; style: italic; size: 0.37; weight: bold; height: 0;"
material="shader: flat; color:black;"
>
</a-entity>
</a-entity>
<a-image id="planes" width="7" height="2.7" src="#trans" scale="0.9 0.9 0.9">
<a-animation attribute="position" from="0.7 -2 -12" to="0.7 -2 -5" delay="750"
dur="1000"></a-animation>
</a-image>
<a-curvedimage id="education-logo" src="#education" radius="5.7" theta-length="36" height="1"
position="0 2.6 -1" opacity="0.5" sound="on: click; src: #click-sound"
class="link"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1"
set-image="on: click; target: #planes; src: #education"
update-raycaster="#cursor">
<a-animation attribute="rotation" from="0 10 0" to="0 200 0" delay="500"
dur="1000"></a-animation>
</a-curvedimage>
<a-image id="interets" src="#interets" width="7" height="3.5" scale="0.3 0.3 0.3" sound="on: click; src: #click-sound"
class="link"
event-set__1="_event: mousedown; scale: 0.3 0.3 0.3"
event-set__2="_event: mouseup; scale: 0.4 0.4 0.3"
event-set__3="_event: mouseenter; scale: 0.4 0.4 0.3"
event-set__4="_event: mouseleave; scale: 0.3 0.3 0.3"
set-image="on: click; target: #planes; src: #interets"
update-raycaster="#cursor">
<a-animation attribute="position" from="0 2.8 -6" to="2.25 2.8 -6" delay="1000"
dur="1000"></a-animation>
</a-image>
<a-cylinder id="goggles" color="#101010" height="0.02" radius="0.8" sound="on: click; src: #click-sound">
<a-animation attribute="rotation" from="-270 0 0" to="-90 0 0" dur="750" delay="1000"
fill="both"></a-animation>
<a-animation attribute="position" from="8 0 -9" to="8 -3.5 -9" dur="750" delay="1000"
fill="both"></a-animation>
<a-image src="#goggles" width="2" height="1" rotation="90 0 0" position="0 -.05 0"
scale=".4 .4 .4"></a-image>
</a-cylinder>
<a-curvedimage id="internship" src="#internship" radius="5.7"
theta-length="18" height=".45" position="0 -0.05 0" scale=".4 .4 .4" sound="on: click; src: #click-sound"
class="link"
event-set__1="_event: mousedown; scale: 0.3 0.3 0.3"
event-set__2="_event: mouseup; scale: 0.4 0.4 0.3"
event-set__3="_event: mouseenter; scale: 0.4 0.4 0.3"
event-set__4="_event: mouseleave; scale: 0.3 0.3 0.3"
set-image="on: click; target: #planes; src: #internship"
update-raycaster="#cursor">
<a-animation attribute="rotation" from="0 180 0" to="0 217 0" delay="750"
dur="1000"></a-animation>
</a-curvedimage>
<a-curvedimage id="gallery" src="#gallery" radius="5.7" theta-length="18" height=".8"
position="0.7 0.2 0.3" scale=".5 .5 .5" sound="on: click; src: #click-sound"
class="link"
event-set__1="_event: mousedown; scale: 0.3 0.3 0.3"
event-set__2="_event: mouseup; scale: 0.4 0.4 0.3"
event-set__3="_event: mouseenter; scale: 0.4 0.4 0.3"
event-set__4="_event: mouseleave; scale: 0.3 0.3 0.3"
set-image="on: click; target: #planes; src: #zy"
update-raycaster="#cursor">
<a-animation attribute="rotation" from="0 180 0" to="0 130 0" delay="750"
dur="1000"></a-animation>
</a-curvedimage>
<a-entity>
<a-cylinder position="0 0.5 0" radius="4" height="1.6" side="back" open-ended="true"
color="#FFF" opacity="0.9"></a-cylinder>
</a-entity>
<!--<a-sky color="#ECECEC"></a-sky>-->
<a-sky id="hkust-360" radius="10" src="#hkust"></a-sky>
<!--<a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
<a-light type="ambient" color="#fff"></a-light>-->
</a-scene>
</body>
</html>
Thanks in advance!!
Related
I have some code using A-frame (https://aframe.io) that rotates a cube. What I'm wondering is how can I rotate the cube from a random amount anywhere from 0, 0, 0 to 360, 360, 360? Currently my rotation also loops so that it repeats after 1 second of being finished. What I would like is to have my cube rotate to a random rotation and loop after a delay of 1 second each time. How can this be done? Code for the animation:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity animation="property: rotation; to: 20 0 0; loop: true; delay: 1000; dur: 1000">
<a-box position="5 0 0" color="mediumseagreen"></a-box>
</a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
I have some code for a camera using A-frame (https://aframe.io) and I'm wondering how I can add multiple sequential animations. I would like it so that when my first animation is finished, another animation will trigger and the camera will move 5 spaces to the left after the first animation is complete. How can this be done? My current code:
<a-entity id="rig" position="0 1.6 0" animation="property: position; delay: 2000; dur: 7000; easing: linear; to: 0 1.6 -25">
<a-entity id="camera" wasd-controls camera look-controls></a-entity>
</a-entity>
You can use the fact that
any animation can be started by emitting an signal defined in the startEvents property
you can determine when an animation has ended by listening to the animationcomplete event.
You can use the animationcomplete signal in the startEvents property, to chain the animations:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity id="rig" position="-1 1.6 0"
animation__first="property: position; dur: 750; to: 1 1.6 0;
startEvents: animationcomplete__second, loaded;"
animation__second="property: position; dur: 750; to: -1 1.6 0;
startEvents: animationcomplete__first"
foo>
<a-entity id="camera" camera look-controls></a-entity>
</a-entity>
</a-scene>
Or if you want a little bit more control over them, you can make a "manager" for your animations:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
this.signalName = "signalone";
// when the animation is finished, fire the other one
this.el.addEventListener("animationcomplete", e => {
// wait a while and start the other animation
this.signalName = this.signalName == "signalone" ? "signaltwo" : "signalone";
setTimeout(e => {
this.el.emit(this.signalName)
}, 500)
})
this.el.emit(this.signalName)
}
})
</script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity id="rig" position="-1 1.6 0"
animation__first="property: position; dur: 500; easing: linear; to: 1 1.6 0; startEvents: signalone;"
animation__second="property: position; dur: 500; easing: linear; to: -1 1.6 0; startEvents: signaltwo" foo>
<a-entity id="camera" camera look-controls></a-entity>
</a-entity>
</a-scene>
I'm trying to build a VR site. One of the things I need my code to do is for my plane and text to toggle visibility when I click a statue. In the code below, when I click parkStatue, both park and parkPlane are supposed to disappear or become visible. The text is working fine, but the plane doesn't change. The height and width theoretically change (become 0 and back), but it doesn't resize. What am I doing wrong
Demo: https://people.rit.edu/dl1683/VR
Using A Frame
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"> </script>
</head>
<body>
<script>
var proj={
park:'Pakinsons',
anant: "Anant"
}
function visible(idBase) {
// get the clock
console.log("Clicked: "+idBase)
var plane=document.getElementById(idBase+'Plane')
var text=document.getElementById(idBase)
console.log(plane.getAttribute('visible'))
if(text.getAttribute('value')!=' '){
text.setAttribute('value'," ")
plane.setAttribute('height', 0)
plane.setAttribute('width', 0)
plane.setAttribute('visible',false)
// plane.height="0000"
// plane.width="0000"
}else{
text.setAttribute('value',proj[idBase])
plane.setAttribute('height', ".00010")
plane.setAttribute('width', ".00010")
plane.setAttribute('visible',true)
// plane.height=".00010"
// plane.width=".00010"
}
}
</script>
<a-scene>
<a-camera position="2 3 0">
<a-cursor color="#FF0000">
</a-camera>
>
<a-gltf-model id="sheep" position="0 0 -3" rotation="0 100 0"
src="https://cdn.glitch.com/0fc2d138-1979-4b80-8bae-51eb67b7ccb9%2Fsheep.glb?1544159918188">
</a-gltf-model>
<a-gltf-model id="parkStatue" position="-4 2 -11" rotation="0 15 0" scale=".04 .04 .04" onclick="visible('park')"
src="https://cdn.glitch.com/7e18fbf8-9686-4cf7-91f9-4a6bbdb54f5e%2Fstatue.glb?1544169724449">
</a-gltf-model>
<a-plane id='parkPlane' position="-1 1.69 -2.5" rotation="0 10 0" height=".00010"
color="#faaf52" width=".00010"></a-plane>
<a-text id='park' value="Parkinsons" position="-2.15 2 -2.29" rotation="0 10 0" width="4" color="black" ></a-text>
<a-sky src="https://cdn.glitch.com/7e18fbf8-9686-4cf7-91f9-4a6bbdb54f5e%2Fsky.jpg?1544174075054"></a-sky>
<a-plane id="floor" position="0 0 0" rotation="-90 0 0" width="30" height="30" repeat="5 4"
src="https://cdn.glitch.com/c388f728-37b7-4af9-af03-1ee7430663e7%2F4727356277_66fb5f938f_o.jpg?1544178281422">
</a-plane>
<a-plane position="-1 1.69 -2.5" rotation="0 10 0" scale="2.75 1 1" color="#faaf52"></a-plane>
<a-plane position="2 1 -2.5" rotation="0 -10 0" scale="2 .8 1" color="#faaf52"></a-plane>
<a-text value="On desktop, click + drag to look around, and use the awsd keys to move around."
position="1.12 1.23 -2.6" rotation="0 -10 0" width="1.9" color="black"></a-text>
<a-text value="In Go/Daydream/GearVR or mobile, look around. On Rift, Vive, or WinMR, you can also walk around!"
position="1.09 1 -2.6" rotation="0 -10 0" width="1.9" color="black"></a-text>
<a-dodecahedron position="-8 2 -1" color="yellow"></a-dodecahedron>
<a-sphere position="10 2 0" color="orange" scale=".6 .6 .6"></a-sphere>
<a-sphere position="10 1.5 -1" color="brown" scale=".4 .4 .4"></a-sphere>
<a-sphere position="10 1.5 1" color="brown" scale=".4 .4 .4"></a-sphere>
<a-sphere position="10 2.7 .8" color="brown" scale=".4 .4 .4"></a-sphere>
<a-plane position="0 1.5 -15" color="#643200" scale="30 3 30"></a-plane>
<a-plane position="15 1.5 0" rotation="0 -90 0" color="#643200" scale="30 3 30"></a-plane>
<a-plane position="0 1.5 15" rotation="0 180 0" color="#643200" scale="30 3 30"></a-plane>
<a-plane position="-15 1.5 0" rotation="0 90 0" color="#643200" scale="30 3 30"></a-plane>
<a-box position="4 1 -8" scale="2 2 2" color="black"></a-box>
<a-torus-knot position="4 4 -8" color="#408080"></a-torus-knot>
<a-box position="-10 1 -10" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="-10 3.2 -10" color="green" scale="1 3 1"></a-cone>
<a-box position="-9 1 -12" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="-9 3.2 -12" scale="1 3 1" color="green"></a-cone>
<!-- tree -->
<a-box position="10 1 10" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="10 3.2 10" color="green" scale="1 3 1"></a-cone>
<!-- tree -->
<a-box position="9 1 12" scale=".5 2 .5" color="#552b00"></a-box>
<a-cone position="9 3.2 12" scale="1 3 1" color="green"></a-cone>
<a-box position="-8 3 10" rotation="0 -45 0" scale="6 2 2" color="#80ffff"></a-box>
<a-box position="-8 1 10" rotation="0 -45 0" scale="1 2 1" color="#592d00"></a-box>
<a-box position="0 1 10" scale="2 2 2" color="black"></a-box>
<a-tetrahedron position="0 3.5 10" rotation="-12 -180 65" color="#FF926B" radius="5" scale=".5 .5 .5">
</a-tetrahedron>
</a-scene>
</body>
</html>
Your code works as expected but there's a bug on A-Frame. Setting width and height to 0 sets the geometry default value instead of 0. I captured the issue in github. Any other value should work as expected. In your case you don't need to set height and width to 0 since you're hiding the entity.
FYI, You're in an old A-Frame version. Use 1.0.4 or newer.
Check that your HTML is valid. e.g: No closing tag for <a-cursor> or ids using single quotes ' instead of double ". In the future sharing a runnable example will make easier for people to help you. Glitch is a good option
I have multiple images (say North, East, South, West) and I want them to be shown as one combined panorama/360 view using aframe in java script, instead of each image to be shown as individual 360 view as a-sky does.
Here is a codepen for reference.
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute('src', this.data);
});
}
});
</script>
<a-scene>
<a-camera position="0 2 4">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="1" position="-4 2 0" set-
sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-
sphere>
<a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-
sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-
sphere>
<a-sky></a-sky>
</a-scene>
Relevant Blog:
https://blog.neondaylight.com/build-a-simple-web-vr-ui-with-a-frame-a17a2d5b484
As said in ngokevin's comment, You could either:
create an entity made of planes with Your images, and place the camera inside:
<a-entity position="0 0 0">
<a-plane width="5" height="5" position="0 0 -2.5"
material="src:#north"></a-plane>
<a-plane width="5" height="5" position="2.5 0 0" rotation="0 -90 0"
material="src:#west"></a-plane>
<a-plane width="5" height="5" position="-2.5 0 0" rotation="0 90 0"
material="src:#east"></a-plane>
<a-plane width="5" height="5" position="0 0 2.5" rotation="0 180 0"
material="src:#south"></a-plane>
</a-entity>
But you need to fill it with some ground and top, so you could try to:
create a cubemap out of six images:
<a-assets>
<a-cubemap id="sky">
<img src="right.png" crossorigin="anonymous">
<img src="left.png" crossorigin="anonymous">
<img src="top.png" crossorigin="anonymous">
<img src="bottom.png" crossorigin="anonymous">
<img src="front.png" crossorigin="anonymous">
<img src="back.png" crossorigin="anonymous">
</a-cubemap>
</a-assets>
<a-entity position="0 0 0" rotation="0 0 0" scale="3 3 3"
geometry="primitive: box;" material="envMap: #sky;
roughness: 0;metalness:1;side:back"></a-entity>
A demo consisting of both options is here. Just navigate Yourself with wasd-controls inside the cubemap, or planes.
Check out the source code here.
I have two SVG vectors that I have overlapped by using CSS. See here. The shapes are as follows:
<svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg id="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
If I change the CSS by removing the position:absolute (check the following), then they become two separate shapes. They don't overlap (stay adjacent in this case) anymore.
* {
/* position: absolute; */
}
#path1{
margin: 10px;
padding: 50px;
border: 1px solid;
}
#path2{
margin: 10px;
padding: 50px;
border: 1px solid red;
}
In this question: How to overlap two SVG images? , it says CSS is one solution or I could use them both inside a single SVG tag (inline SVG).
I can't use CSS; because I need to place the shapes in another HTML page. There if I keep position: absolute, it creates all sorts of mess as you can imagine.
I can't use inline SVG; because I am trying to animate the shapes using Vivus. This JS library requires both shapes to be inside a separate SVG tag. So I need to keep the shapes in two different SVG tags to make them animate separately.
Is there any other genius hack to this problem?
(Without CSS or inline SVG)
All you need to do is restrict the application of the position: absolute by restricting that behaviour to one page and not the other.
For example in the snippet below, the SVGs in <div class="draw"> are overlapped, but the ones in <div class="draw2"> are not.
.draw {
height: 250px;
}
.draw svg {
position: absolute;
}
.path1{
margin: 10px;
padding: 50px;
border: 1px solid;
}
.path2{
margin: 10px;
padding: 50px;
border: 1px solid red;
}
.draw2 .path1,
.draw2 .path2 {
border: 1px solid green;
}
<div class="draw">
<svg class="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg class="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
</div>
<div class="draw2">
<svg class="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg class="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
</div>
You haven't really explained what you mean exactly by "overlap". Or what exactly your restrictions are. If the SVGs are not inlined then they effectively become the same as if they were PNGs or JPEGs. Overlapping them is just a matter of using CSS positioning.
If you just need to draw something that contains both paths, then you can just combine them in one SVG.
<svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px">
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>