So to be able to understand the scope of possibilty in regards to this website I'd like to make, I continued exploring graphic art possibilities and trying to figure out exactly what is possible for me to do.
That is, I'm hoping to translate the work of a real artist into a cool narrative, and get that on a spiffy website with a react frontend and rails backend.
So I went ahead and tried to take a png of some of Larisa’s artwork and work with it. I figured out how to transform it from a bitmap image to a vector image using adobe cc, which is critical for a number of reasons. I used adobe to break apart the various images WITHIN the art, thus making them usable/interchangeable with a background. In other words, I took a static image that would have looked unprofessional had it’s size changed, and turned it into an object that was easy to manipulate and break apart, and thus, easy to transform into a tool with which to narrate a story on my website. (see picture 1, original art, picture 2, vectorized version, picture 3, chunk broken off of image) I needed to make sure I could do this, to know I can successfully be able to translate her art onto the web.
The only hiccup is that when I tried to get the svg code from the image I managed to make, onto a mock website, it came out like (picture 4) which looked nothing like (picture 3). here is a sample of the svg code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.89 57.71">
<defs>
<style>
.cls-1 =
fill = '#e0d1da',
.cls-2
fill = '#f0e2ef',
.cls-3
fill = '#e0d3e1',
.cls-4
fill = '#f9fcfd',
.cls-5
fill= '#d5bad6',
.cls-6
fill= '#b193ab',
.cls-7
fill= '#e7d5db'
</style>
</defs>
<title>Untitled-2</title>
<path class="cls-1" d="M325.81,402.32l-.09,6.51c-.21.86.53,2.39-1.43,2-.48-.75-.2-1.58-.24-2.37a29.19,29.19,0,0,1,.17-4.58,15.2,15.2,0,0,0,.32-4.56,19.74,19.74,0,0,0-.13-3.17c-.15-.82-.26-1.64.75-2.06a1,1,0,0,1,.79.32c.84,1.71.31,3.54.48,5.31A3.4,3.4,0,0,1,325.81,402.32Z" transform="translate(-306.14 -355.77)"/>
<path class="cls-2" d="M324.26,410.84c1.36,0,.64-1.58,1.46-2h0a19.61,19.61,0,0,1,.67,2.5,1.6,1.6,0,0,1-.09,1.1c-1.15,1.27-2.71.64-4.08.91a.51.51,0,0,1-.62,0,1.14,1.14,0,0,1-.13-1,1.9,1.9,0,0,1,.64-.79,4.57,4.57,0,0,1,1.82-.75Z" transform="translate(-306.14 -355.77)"/>
<path class="cls-3" d="M318.12,412.28l1.1-1c.62-.94,0-2.05.42-3a1,1,0,0,1,1.14-.08,1.75,1.75,0,0,1,.43.7A7.34,7.34,0,0,1,321,413l-.3.29C319.89,412.81,318.21,414.56,318.12,412.28Z" transform="translate(-306.14 -355.77)"/>
<path class="cls-4" d="M325.21,394.3c-.76,1.67.43,3.34,0,5-1.83,0-1.46-1.45-1.59-2.46-.24-1.84-1.07-2.07-2.49-1.11-.45.36-.83.83-1.48.82-1.16-1.4-2.39-2.64-4.47-2-1.12-.28-1.31-1-.81-1.93a30,30,0,0,0,1.94-4.86,21.7,21.7,0,0,0,.8-3.39,4.62,4.62,0,0,1,.24-1,8.88,8.88,0,0,1,.6-1.29c1.13-1.78.64-3.53-.12-5.27a5,5,0,0,1-.23-1.08c-.29-2.81-1.14-3.78-3.76-4.24-.72-.13-1.49-.14-2-.85-.62-1.57-.26-3.22-.35-4.83.15-1.44-.14-3.36,1.75-3.65s3.33,1.17,4.28,2.83c2.52,4.41,4.67,9.06,8.08,12.91,1.22,1.36,1.24,3,1.26,4.7,0,3-.62,6.17,1.77,8.77.66.73.33,1.58-.65,2S326.14,393.93,325.21,394.3Z" transform="translate(-306.14 -355.77)"/>
<path class="cls-5" d="M318.73,406.48c0-.33,1,.18,1-.15.07-.59-.63-1.84,0-1.81" transform="translate(-306.14 -355.77)"/>
<path class="cls-6" d="M318.83,407.5c-1.81,6.75,4.51-1.41-.56,2.95" transform="translate(-306.14 -355.77)"/>
<path class="cls-7" d="M319.71,402.38c-1.75.74-.56,0-.9-.81s-.62-2.82-1.53-3.6" transform="translate(-306.14 -355.77)"/>
<path class="cls-8" d="M319.69,400.56c1.42,1.4-.82-3-.93-4.08" transform="translate(-306.14 -355.77)"/>
<path class="cls-9" d="M311.74,376.71c0-1.34,0-2.46.05-5.21" transform="translate(-306.14 -355.77)"/>
<path class="cls-10" d="M310.81,364.45c0,4.33-.05,7.44-.06,10.16" transform="translate(-306.14 -355.77)"/>
<path class="cls-11" d="M315.71,362.34c0-.16-.17-.42-.12-.46,1.47-1.14,2.45.75,3.83.65.72,0,.53.84.27,1.37-.59,1.21-.29,2,1,2.46a1.51,1.51,0,0,1,.81,1.23c-.42,1.49-1.1,1.06-1.84.25C318.26,366.07,317.41,363.9,315.71,362.34Z" transform="translate(-306.14 -355.77)"/>
<path class="cls-12" d="M318.72,367c3.32,1,1.29,2.29,1.55-.51" transform="translate(-306.14 -355.77)"/>
<path class="cls-13" d="M309.76,360.74c-.06.11.81,1,.7,1.09-.92,0-1.41-.67-2-1.22-.28-.17-.54-.38-.83-.52a2.37,2.37,0,0,1-1.35-3c.44-1.45,1.62-1.4,2.82-1.11a3.12,3.12,0,0,1,1.1.73c1.33,1.52.65,2.31-.45,4.08" transform="translate(-306.14 -355.77)"/>
<path class="cls-14" d="M317.3,394.46c3.33,3.2.4,1.47.43,2.55" transform="translate(-306.14 -355.77)"/>
</svg>
…and this is the error I’m getting:
Failed to compile
./src/Components/LDLsummaryLeft.js
Syntax error: Unexpected token, expected } (15:12)
13 | <style>
14 | .cls-1 {
> 15 | fill: #e0d1da;
| ^
16 | }
17 |
18 | .cls-2 {
OTHER THAN THAT, I’m able to get the image on a mock website.
As for the narration bit of the website (that is, the storytelling with the images) I'll will need to speak with her to get a sense of what she’d like the pieces of her circus to do. Someone has, unbeknownst to me, already animated one of her pieces of art and she gave me the separate vector files someone already made for those pieces, to practice with.
that animation is here on her instagram.
Since someone has already done a version of animation with this piece I might try to start from scratch with something else. I’ll look through her art. Anyway I see now how they managed to make those pieces in the first place and it feels cool that I'm able to do something like that.
Sources:
![[paper clip]](/cours/static/images/paper_clip_tilt.png)
| last modified | size | ||
 |
chunk.png | Wed Dec 04 2024 08:42 am | 87K |
|
chunk_in_website.png | Wed Dec 04 2024 08:42 am | 226K |
|
origional.png | Wed Dec 04 2024 08:42 am | 3.4M |
|
vectorized_.png | Wed Dec 04 2024 08:42 am | 3.6M |
